Faithful mode

By default Charpente paints the content that is already in the page: nothing to configure, it works immediately. That needs placeholder content in the loading area.

When you want the skeleton to match the real layout, even if the area is empty while loading, add a capture entry to the configuration. Without it, nothing changes.

1. Configure the capture

charpente.config.ts

import { defineCharpente } from 'charpente'

export default defineCharpente({
  capture: {
    routes: ['/', '/team'],
    breakpoints: [375, 768, 1280],
  },
})

Option	Default	Role
routes	scanned	Pages to visit, relative to the URL you give to the command. Leave it out and Charpente follows the internal links from /.
limit	30	Most pages visited by the scan.
breakpoints	[375, 768, 1280]	Viewport widths to measure.
wait	500	Milliseconds to wait after the page is idle.
out	charpente.bones.json	File that stores the measures.
url	detected	Address of the running application.
cdp	none	Address of a Chrome you already opened, see below.
dev	true	Capture automatically with the Vite dev server.

2. Mark the zones

Add data-charpente-capture="name" next to data-charpente-block on the area to reproduce. The zone is measured in its loaded state: its text, images, controls and blocks become the shapes of the skeleton.

<section data-charpente-block data-charpente-capture="team">
  <h2>Meet the team</h2>
  <p>A short introduction.</p>
  <img src="/team.jpg" alt="The team" width="320" height="120" />
  <button type="button">Join us</button>
</section>

With a wrapper, the capture prop does the same: <Charpente capture="team"> in React, Vue, Solid, Svelte, Astro and Blade, capture="team" next to charpente in Angular. The zone is marked even when nothing is loading.

With React or Vue, CharpenteSuspense marks the same zone and shows it as a skeleton while a Suspense boundary waits, so the captured shapes appear instead of an empty area.

3. Capture

Start your application, then run the command with its address. It needs Playwright (pnpm add -D playwright).

npx charpente capture --url http://localhost:3000

The measures go to charpente.bones.json, and the file is only rewritten when a measure changed. Commit it, or generate it in your pipeline. The Vite plugin and charpente build read it and add the zones to the stylesheet.

Without --url, the command looks for your application on the usual ports (5173, 3000, 4321, 4200, 8080, 8000).

Flag	Role
--url	Address of the running application.
--breakpoints 375,768,1280	Viewport widths to measure.
--wait 500	Milliseconds to wait after the page is idle.
--out file.json	File that stores the measures.
--watch	Capture again after each change of a source file.
--cdp http://localhost:9222	Measure in a Chrome you already opened.
--env-file .env	Load environment variables before reading the configuration.

Automatic capture with Vite

With the Vite plugin, the capture runs by itself when the dev server starts and again after each change of a source file. There is nothing to run. Set capture.dev to false to turn it off. A missing Playwright is reported as a warning and the dev server keeps running.

Pages behind a login

Start Chrome with a debugging port, sign in, then point the capture at it. The capture opens a tab in that browser and keeps your session.

google-chrome --remote-debugging-port=9222
npx charpente capture --url http://localhost:3000 --cdp http://localhost:9222

What you get

While the area loads, the zone reserves its captured height and draws the captured shapes with the theme of the page: its colors, pattern and motion. The breakpoint is picked with media queries and the shapes stretch with the width of the zone between two breakpoints.

Note

Each shape keeps its nature: text shapes use the text paint of the theme, images the media paint, and blocks and controls the block paint. Capture again after a layout change, and keep the simple mode for areas where placeholder content is enough.