Skip to content
charpente
charpente — from structure to contentcharpente — from structure to content

The structure before the content

You set an attribute on the area that is loading. charpente paints the text, images, buttons and blocks with the theme and animation of your choice, without a single line of runtime JavaScript.
Get startedOpen the playground

The demo, for real

Section titled “The demo, for real”

This card switches on its own between the loading state and the content. It is the same markup: only three attributes change.

Profile card
Camille DurandProject lead

Camille has led the site redesign for three years. She likes projects where design and code move forward together.

12 projectsLyonProduct team

What charpente expects
<article data-charpente-loading aria-busy="true" inert>
  <img src="/avatar.png" alt="" width="54" height="54" />
  <div>
    <span>Camille Durand</span>
    <span>Project lead</span>
  </div>
  <button type="button">Follow</button>
</article>

Three independent axes

Section titled “Three independent axes”

The theme

Says what a skeleton looks like: solid, outline, dots, cyberpunk, web and six seasonal themes.

The motion

Says how it moves: shimmer, pulse, glitch, alone or combined.

The timing

Says when: a delay before appearing, to avoid flicker on fast loads, and an offset between elements.

charpente.config.ts
import { defineCharpente } from 'charpente'


export default defineCharpente({
  defaultTheme: 'cyberpunk',
  motion: ['shimmer', 'glitch'],
  timing: { delay: 120, stagger: 40 },
  colorScheme: { dark: '[data-theme="dark"]' },
})

Explore the documentation

Section titled “Explore the documentation”