Component anatomy docs
that are actually alive
Stop exporting annotated screenshots from Figma. Annotate your rendered
DOM with data-part and get an interactive, synchronized
anatomy panel — in plain HTML, Astro, or Storybook.
// 1. Annotate your component
<div class="thumb" data-part="thumb"></div>
// 2. Wire it up
import { createAnatomy } from '@component-anatomy/core';
createAnatomy({ root, panel });
Hover the docs. Hover the component.
This slider is a live component on this page, documented by the library itself.
root The component wrapper — groups every part below.
track The rail the thumb travels along.
range The filled portion, visualizing the current value.
thumb The draggable handle. Focusable, arrow-key operable.
output Live value readout, announced via aria-live.
More demos: presets & theming · Bootstrap via CDN · shadcn-style · Storybook addon ↗
Small API, serious rendering
-
Framework-agnostic core
A dependency-free ~4.5 kB runtime. Works in plain HTML, any bundler, any framework — anywhere a DOM exists.
-
Two-way hover sync
Hover docs → highlight the component. Hover the component → highlight the docs. Always in sync.
-
One attribute
Annotate elements with data-part="thumb". Parts are auto-discovered, names derived from ids.
-
Themable rendering
Four presets, CSS variables and render hooks, with one line to change the accent.
-
Live overlays
Highlight boxes track the real rendered DOM — resize, scroll, dynamic updates included.
-
Astro & Storybook
A drop-in Astro component with SSR Markdown, and a Storybook addon panel for any renderer.