Output Format

What boneyard generates when it snapshots your UI — the bones JSON format, where files go, and how to use them.

Generated files

Running npx boneyard-js build creates one .bones.json file per named <Skeleton> in your app:

src/bones/ ← auto-created by the CLI

├── blog-card.bones.json ← from <Skeleton name="blog-card">

├── profile.bones.json

└── dashboard.bones.json

Each file contains responsive bone data captured at multiple viewport widths (default: 375px, 768px, 1280px). The generated registry.js imports all of these automatically — just add import './bones/registry' to your app entry.

SkeletonResult

Each breakpoint inside a .bones.json file is a SkeletonResult — a flat list of positioned rectangles that mirror your real layout pixel-for-pixel.

src/bones/blog-card.bones.json

{
  "name": "blog-card",
  "viewportWidth": 375,
  "width": 343,
  "height": 284,
  "bones": [
    { "x": 0,  "y": 0,   "w": 343, "h": 180, "r": 8 },       // hero image
    { "x": 0,  "y": 192, "w": 240, "h": 20,  "r": 4 },       // title
    { "x": 0,  "y": 220, "w": 343, "h": 16,  "r": 4 },       // excerpt
    { "x": 0,  "y": 244, "w": 24,  "h": 24,  "r": "50%" },  // avatar
    { "x": 32, "y": 248, "w": 80,  "h": 16,  "r": 4 }        // author name
  ]
}

Bone fields

Each bone is one rounded rectangle. All values are pixel offsets from the container's top-left corner.

x

Horizontal offset from the left edge (px).

y

Vertical offset from the top edge (px).

w

Width (px).

h

Height (px).

r

Border radius. A number for pixels, or a string like "50%" for circles.

c

Container flag. When true, this bone represents a container element (card, panel) that has child bones on top. Rendered at a lighter shade so children stand out.

Result fields

name

Identifier from the name prop, or 'component' by default.

viewportWidth

Browser viewport width at capture time (px).

width

Container element width at capture time (px).

height

Total content height (px). Used to size the skeleton overlay.

bones

Flat array of positioned rectangles — every visible element as a bone.

Direct API (non-React)

The React <Skeleton> wrapper calls these automatically. You can also call them directly for vanilla JS, SSR, or other frameworks.

Snapshot from a live DOM element (browser only)

import { snapshotBones } from 'boneyard'

const result = snapshotBones(document.querySelector('.card'))
// result: { name, viewportWidth, width, height, bones: Bone[] }

Render bones to an HTML string (SSR / vanilla)

import { renderBones } from 'boneyard'

const html = renderBones(result, '#d4d4d4')
container.innerHTML = html

The bones array is framework-agnostic — just positioned rectangles. Render them however you want, or use the React <Skeleton> wrapper which handles everything automatically.