Boneyard is a skeleton loading framework that automatically generates pixel-perfect placeholder screens from your real UI components.
The problem it solves is the tedious manual work of creating skeleton loaders that match your actual layout. Boneyard captures bone data by running a headless browser against your application at build time, visiting each Skeleton component and measuring its layout across multiple viewport widths. For React Native, it scans the fiber tree and measures views directly via UIManager. All frameworks output the same JSON format, making the approach cross-platform compatible. At runtime, the captured bones render as fallback content while data loads, with no need for manual measurements or hand-tuned placeholders.
The tool works with React, Preact, Vue, Svelte 5, Angular, and React Native. It suits projects where you want skeleton screens that automatically stay in sync with UI changes, eliminating the maintenance burden of keeping placeholders updated. For Vite-based projects, a plugin captures bones automatically on dev server start and on every HMR update, removing the need for a separate terminal. The Skeleton component accepts props to customize bone color, animation style (pulse, shimmer, or solid), stagger timing, and fade-out transitions. React developers can drop in BoneSuspense as a Suspense boundary replacement, letting queries resolve naturally during the build-time capture window. React Native automatically scales bone positions at runtime to match the user's text size settings.
The project maintains active development with regular updates across its framework integrations. The codebase shows consistent refinement of the core bone-capture mechanism and plugin infrastructure. Development activity demonstrates ongoing attention to both the CLI tooling and the runtime component implementations across multiple frameworks.
