S

SkeletonStyler

Library

Build Complex Skeletons
With Fluent Precision

skeleton-styler creates high-performance loading states using a type-safe Fluent API. Forget maintaining complex CSS files.

Try Playground Install Package
hero-demo.ts
1new ElementBuilder()
2  .s_w(340).s_p(20).s_bg("white").s_rounded(24)
3  .s_shadow("lg").s_border("1px solid #e2e8f0")
4  .s_flexColumn().s_gap(20)
5  .append(
6    SkeletonTemplate.Flex({ gap: 16 }).append(
7      SkeletonTemplate.Avatar({ size: 48 }),
8      new ElementBuilder().s_flexColumn().s_gap(8).append(
9        SkeletonTemplate.Line({ w: 120, h: 14 }),
10        SkeletonTemplate.Line({ w: 80, h: 12 })
11      )
12    ),
13    new ElementBuilder().s_wFull().s_h(140).s_rounded(16).markAsSkeleton(),
14    new ElementBuilder().s_flexColumn().s_gap(10).append(
15      SkeletonTemplate.Line({ h: 14 }).s_randomWidth(40, 100, "%"),
16      SkeletonTemplate.Line({ h: 14 }).s_randomWidth(40, 80, "%")
17    )
18  ).generate();
Live Render

Framework Agnostic

Designed to be flexible. Whether you use modern frameworks or vanilla JavaScript, SkeletonStyler adapts to your stack.

main.js
1import { ElementBuilder } from 'skeleton-styler';
2
3// 1. Create a builder instance
4const builder = new ElementBuilder()
5  .s_w("100%").s_h(200)
6  .s_rounded(12)
7  .markAsSkeleton();
8
9const container = document.getElementById('app');
10
11// 2. Logic to toggle skeleton
12function renderContent(isLoading) {
13  if (isLoading) {
14     // Generate & append
15     container.replaceChildren(builder.generate());
16  } else {
17     container.innerHTML = '<div>Real Content Loaded</div>';
18  }
19}
20
21// Initial render
22renderContent(true);

Zero Runtime Overhead

What you see is what you get. The library compiles down to standard, inline-styled HTML elements. No hidden CSS classes, no extra stylesheets.

Fluent Builder

You write clean, chainable TypeScript.

builder.ts
1new ElementBuilder()
2  .s_flex()
3  .s_gap("16px")
4  .append(
5     new ElementBuilder()
6       .s_w(60).s_h(60).s_roundedFull()
7       .markAsSkeleton(),
8     new ElementBuilder()
9       .s_flex1().s_flexColumn().s_gap(8)
10       .append(
11          new ElementBuilder()
12            .s_w("80%").s_h(20)
13            .markAsSkeleton(),
14          new ElementBuilder()
15            .s_w("50%").s_h(15)
16            .markAsSkeleton()
17       )
18  )

Standard DOM

It generates pure, inline-styled HTML.

output.html
1<div style="display: flex; gap: 16px;">
2  <div style="width: 60px; height: 60px; border-radius: 9999px; background: rgb(227, 227, 227); animation: 2.5s ease 0s infinite normal none running pulse;"></div>
3  
4  <div style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px;">
5    <div style="width: 80%; height: 20px; background: rgb(227, 227, 227); border-radius: 4px; animation: 2.5s ease 0s infinite normal none running pulse;"></div>
6    <div style="width: 50%; height: 15px; background: rgb(227, 227, 227); border-radius: 4px; animation: 2.5s ease 0s infinite normal none running pulse;"></div>
7  </div>
8</div>

How we stack up

See why developers are switching from complex SVG loaders to our Fluent Builder.

SkeletonStyler
Recommended
React Content LoaderReact Loading Skeleton
Syntax StyleFluent API (Chainable)SVG Coordinates (Complex)Props / Component
Framework SupportAll (React, Vue, Angular, Vanilla)React / React NativeReact Only
Tech StackStandard HTML/CSSSVG (Heavy DOM)HTML/CSS
Custom Shapes
Animation ControlFull (Duration, Easing, Type)Limited propsBasic

When to use others?

If you need to draw artistic, complex vector illustrations as loaders (like a map or a very specific logo shape),React Content Loader is still the king of SVGs.

When to use SkeletonStyler?

When you need to build UI layouts quickly (Cards, Lists, Profiles) that are responsive, lightweight, and work across any project/framework without learning new props API.

Fluent API

Chain methods like a natural sentence. Readable, maintainable, and fully typed.

Full Customization

Control every CSS property, animation timing, and layout structure.

Ultra Lightweight

Zero heavy dependencies. Generated DOM nodes are optimized for performance.

Explore Documentation