Boneyard

Boneyard is an open-source JavaScript library (published as boneyard-js on npm) that auto-generates skeleton loading screens by snapping your real rendered UI. Instead of hand-coding placeholder shapes, you wrap a component in a Skeleton element, run the CLI once, and Boneyard writes out positioned bone rectangles that mirror the actual layout. It supports React, Preact, Vue, Svelte 5, Angular, and React Native from a single package.

Install with `npm install boneyard-js`, then wrap any component in the framework-specific Skeleton wrapper (for example, `import { Skeleton } from 'boneyard-js/react'`). Run `npx boneyard-js build` once against your running dev server to generate the bones JSON files, then import `'./bones/registry'` in your app entry so every Skeleton auto-resolves its data by name. For Vite projects, the `boneyardPlugin()` from `boneyard-js/vite` replaces the CLI entirely and recaptures on every HMR update.

Yes, Boneyard is released under the MIT license and is free to use. The package is distributed on npm as boneyard-js, and the source is publicly available on GitHub at github.com/0xGF/boneyard. There is no paid tier mentioned in the documentation.

Boneyard is best suited for teams that need skeleton screens to stay in sync with a rapidly changing UI without manual upkeep. It fits naturally into component-driven projects using React, Vue, Svelte, or Angular, especially those running Vite, where the plugin handles capture automatically. It is particularly useful when you want zero layout shift during loading states and cannot afford the maintenance cost of hand-tuned placeholders.

Hand-coded skeleton screens require manually measuring every element and updating those measurements whenever the real component changes. Boneyard replaces that work with a one-time CLI run that captures positions directly from the live DOM, then outputs static JSON that the tiny ~7.5KB runtime reads at load time. The incremental build cache means only changed components are recaptured on subsequent runs, making the maintenance burden close to zero compared to manual approaches.

Boneyard requires a running dev server to capture bones, so components that cannot be fully rendered in development (for example, those needing authenticated production data) need a `fixture` prop or will be skipped. For React Native, the CLI must be running alongside an open device in dev mode to capture fiber-tree measurements. Additionally, if a component's layout changes significantly between runs, bones must be recaptured to stay accurate.