Cookbook
Advanced patterns, Vite integration, and styling guides for power users.
If your app has authenticated or dynamic routes, the headless browser won't be able to capture your skeletons directly. Instead, create an isolated directory (e.g. src/routes/blocks) where you can mock your UI in isolation.
Excluding from Production: You don't want these mock pages in your final build. You can exclude them in your svelte.config.js by customizing your adapter options, or using SvelteKit's built in routing config to ignore the directory entirely.
Tired of running the CLI manually? The boneyard-svelte/vite plugin watches your mock routes and automatically triggers a background crawl whenever you save a change.
Pro Tip: The plugin uses your active Tailwind breakpoints automatically to ensure your generated bones are always responsive.
Handling Heavy Renders
If your components use complex animations or heavy client-side logic, the CLI might
capture them before they are fully settled. Use --wait to increase the delay.
Nested Route Extraction
Boneyard supports nested directory structures. Point the --out flag at your lib folder, and the CLI will mirror your route structure.
Manual URL Capture
In non-SvelteKit projects, or when you want to capture a specific state of your running app, use the --url flag to point Boneyard at your dev server.
Using Boneyard with **Pure Svelte + Vite** (no SvelteKit)? Simply swap out the SvelteKit plugin for the standard Svelte one and point Boneyard to any directory containing your mock components.
Unlike SvelteKit which handles imports automatically via layouts, in a standard Svelte app you should import the registry in your main.ts entry point.
Boneyard works seamlessly with Svelte 5's new reactivity model. Use $state for your loading toggles to ensure the skeleton disappears the moment your data is ready.
The QuerySkeleton is a high-level wrapper that adds built-in error handling and retry logic to the standard skeleton. It's ideal for patterns where you have explicit loading and error states.
Custom Error UI: Use the errorSnippet to provide a custom UI when a fetch fails.
The AsyncSkeleton leverages Svelte 5's experimental await syntax and <svelte:boundary>. It allows you to use top-level await directly in your components while automatically showing a skeleton during the pending state.
Requirement: To use this, you must enable experimental async in your svelte.config.js:
Boneyard works perfectly with component libraries like Shadcn Svelte out of the box. Simply wrap your card or complex component in a Skeleton and Boneyard will snapshot the rendered output of the library.
Because Boneyard reads the real computed layout from the browser, it handles Shadcn's flex layouts and utility classes automatically.
Boneyard was built for the modern era. It natively detects Tailwind v4 CSS configurations.
- Auto-discovers breakpoints from your
globals.cssimports. - Supports the new CSS-variable based theme system.
- Handles canonical classes natively (e.g.
max-w-180).