Live demo

Toggle loading to see each component's skeleton generate itself from its real rendered layout. Toggle animated to switch the shimmer on/off, or hit Simulate reload to run a full loading cycle.

loading animated

Profile card

Stat tiles (grid)

Article list (v-for)

Settings form

Every skeleton above is derived automatically from the component next to it — no skeleton markup was written for any of them. Notice how:

• text becomes per-line bars (with a shorter last line),
• images and thumbnails become solid blocks matching their size and radius,
• grids and lists keep their structure,
• editing a component would change its skeleton on the next render, with nothing to keep in sync.

See How it works for the mechanism, or Getting started to add it to your app.