# Boneyard By **0xgf** ยท Software & Tools Auto-generated, pixel-perfect skeleton screens for React, Vue, Svelte, Angular, and React Native, no manual placeholders needed. - Source: https://boneyard.vercel.app/ - Repository: https://github.com/0xGF/boneyard - Install: `npx boneyard` - Tags: open-source, ui, react, vue, svelte, loading, cli, vite - Pricing: free - Upvotes: 0 ## Features - Auto-captures skeleton bones from the live DOM via headless browser - Supports React, Preact, Vue, Svelte 5, Angular, and React Native - BoneSuspense wrapper for useSuspenseQuery Suspense boundaries - Vite plugin for automatic capture on dev-server start and HMR updates - CLI watch mode re-captures on every HMR change - Incremental build cache hashes each skeleton and skips unchanged components - Responsive capture at configurable viewport breakpoints - Pulse, shimmer, and solid animation styles with optional stagger and fade transitions --- ## Why it matters Hand-tuned skeleton screens drift the moment a component changes. Boneyard solves this by snapping your actual rendered layout and writing the positions out as static JSON, so skeletons track your UI automatically. ## How it works The CLI (or Vite plugin) opens a headless browser, visits your running dev server, and finds every `` in the DOM. It captures bone rectangles at three breakpoints (375, 768, 1280px by default) and writes a compact `.bones.json` per component. At runtime, the `` wrapper reads that file and renders the bones, then swaps in real content when loading resolves. Per the README, bones are stored as arrays rather than objects, keeping JSON files small and parse time low. ## The big picture Version 1.8.2 (the current release) adds `BoneSuspense`, a drop-in replacement for React's `` boundary that works with `useSuspenseQuery` without needing `initialData` or `placeholderData`. The CLI's `--wait` flag gives queries time to resolve naturally at build time, and a `fixture` prop handles cases where they cannot. ## Zoom in The runtime weighs roughly 7.5KB. Bones data is static JSON loaded once at app entry via `import './bones/registry'`, so there is no layout engine running in the browser. The CLI hashes each skeleton and skips unchanged ones, keeping rebuilds fast even in large codebases. React Native support uses a fiber-tree walk and `UIManager` measurements sent back to the CLI, with zero overhead in production builds. ## Yes, but The CLI requires a live dev server to capture bones, so skeletons must be generated during development. If a component cannot be rendered in dev mode (for example, it needs authenticated data that cannot be mocked), you need to pass a `fixture` prop or live without a captured skeleton for that component. ## The bottom line Boneyard trades a one-time CLI run for permanently in-sync skeleton screens across six frameworks. The ~7.5KB runtime and static JSON output keep it cheap to ship, and the Vite plugin makes the capture step nearly invisible for modern projects. ## FAQ ### What is 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. ### How do I install and start using Boneyard? 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. ### Is Boneyard free and open source? 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. ### What is Boneyard best for? 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. ### How does Boneyard compare to writing skeleton screens by hand? 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. ### What are Boneyard's main limitations? 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. --- [View on Analog](https://analoghq.ai/0xgf/software-tools/boneyard)