boneyard-js

The build command uses Playwright to snapshot your UI. You must install the Chromium browser binary once before your first build to avoid errors.

npx playwright install chromium

To use boneyard for generating skeleton loading screens, install the core package via npm.

npm install boneyard-js

Boneyard provides framework-specific imports for the <Skeleton> component. Wrap your component in <Skeleton> and provide a name and loading state. The CLI will then extract the layout based on that name.

// React
import { Skeleton } from 'boneyard-js/react'

function BlogPage() {
  const { data, isLoading } = useFetch('/api/post')

  return (
    <Skeleton name="blog-card" loading={isLoading}>
      <BlogCard data={data} />
    </Skeleton>
  )
}

For Vite-based projects (React, Preact, Vue, Svelte), use the boneyardPlugin to automate bone capture during development without a separate terminal.

// vite.config.ts
import { boneyardPlugin } from 'boneyard-js/vite'

export default defineConfig({
  plugins: [boneyardPlugin()]
})

To reuse an existing browser session (to avoid downloading Chromium or to use existing auth/cookies), launch Chrome with a remote debugging port and point the CLI to it using the --cdp flag.

# 1. Start Chrome with remote debugging
# macOS:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# 2. CLI
npx boneyard-js build --cdp 9222

Create a boneyard.config.json file in your project root to control CLI and runtime defaults. This includes breakpoints, output directories, colors, and animation settings.

{
  "breakpoints": [375, 768, 1280],
  "out": "./src/bones",

  "color": "#e5e5e5",
  "darkColor": "#2a2a2a",
  "animate": "shimmer",
  "shimmerColor": "#ebebeb",
  "darkShimmerColor": "#333333",
  "speed": "2s",
  "shimmerAngle": 110
}

The build command visits your running application at various breakpoints, captures named <Skeleton> components, and writes .bones.json files to disk. It can auto-detect your dev server or take an explicit URL.

Basic Usage:

• Auto-detect dev server: npx boneyard-js build
• Explicit URL: npx boneyard-js build http://localhost:3000
• Multiple URLs: npx boneyard-js build http://localhost:3000/blog http://localhost:3000/shop

npx boneyard-js build [url] [options]

To reuse your existing Chrome cookies, authentication state, and manual certificate handling, run Chrome with remote debugging enabled and use the --cdp flag.

1. Start Chrome:

   • macOS: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   • Linux/Windows: google-chrome --remote-debugging-port=9222

2. Run boneyard: npx boneyard-js build --cdp 9222

To use the boneyard CLI to extract UI bones, you must install playwright and its Chromium browser dependency:

npm install -D playwright && npx playwright install chromium

For SSR or advanced responsive tooling, use the layout APIs to compute bone layouts without rendering the full component.

import { computeLayout, compileDescriptor, invalidateDescriptor } from 'boneyard-js'

// Simple usage
const result = computeLayout(descriptor, 375)

// Optimized usage for multiple breakpoints
const compiled = compileDescriptor(descriptor)
const mobile  = computeLayout(compiled, 375)
const tablet  = computeLayout(compiled, 768)
const desktop = computeLayout(compiled, 1280)

// To force a rebuild if the descriptor is mutated
invalidateDescriptor(descriptor)

Import Skeleton from boneyard-js/react. Wrap your content with the component and provide a name and a loading boolean prop. The name determines the generated .bones.json file.

import { Skeleton } from 'boneyard-js/react'

function BlogPage() {
  const { data, isLoading } = useFetch('/api/post')
  return (
    <Skeleton name="blog-card" loading={isLoading}>
      {data && <BlogCard data={data} />}
    </Skeleton>
  )
}