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 bun boneyard-svelte build creates one .bones.json file per named <Skeleton> in your app:

src/lib/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).

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.

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.