v0.0.1 · MIT · Framework-agnostic
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 });Try it — this is real
This slider is a live component on this page, documented by the library itself.
rootThe component wrapper — groups every part below.
trackThe rail the thumb travels along.
rangeThe filled portion, visualizing the current value.
thumbThe draggable handle. Focusable, arrow-key operable.
outputLive value readout, announced via aria-live.
More demos:presets & theming ·Bootstrap via CDN ·shadcn-style ·Storybook addon ↗
Why
A dependency-free ~4 kB runtime. Works in plain HTML, any bundler, any framework — anywhere a DOM exists.
Hover docs → highlight the component. Hover the component → highlight the docs. Always in sync.
Annotate elements with data-part="thumb". Parts are auto-discovered, names derived from ids.
Four presets, one-line accent theming, CSS variables, render hooks. Beautiful defaults, full control.
Highlight boxes track the real rendered DOM — resize, scroll, dynamic updates included.
A drop-in Astro component with SSR Markdown, and a Storybook addon panel for any renderer.
Packages