Back to Devoured - July 17, 2026
DEVOURED
Component Anatomy (Website)

Component Anatomy (Website)

Design frontendweb Github
Component Anatomy lets developers annotate rendered DOM elements with data-part attributes to generate live, synchronized interactive documentation overlays.
What: Component Anatomy is a 4 kB framework-agnostic runtime that creates interactive documentation panels. It allows developers to label DOM elements to trigger synced hover states between code and UI, with specific support for Astro and Storybook.
Why it matters: It replaces static screenshots with live, synchronized documentation, addressing the common problem where UI components drift away from their outdated design annotations.
Takeaway: Add data-part attributes to your HTML elements and install the @component-anatomy/storybook or @component-anatomy/astro package to see your component hierarchy in real-time.
Deep dive
  • Runtime: Uses a lightweight 4 kB script to track DOM nodes.
  • Sync: Provides two-way syncing between documentation hover states and rendered UI components.
  • API: Relies on a single data-part attribute to auto-discover component structure.
  • Integration: Offers dedicated packages for Astro and Storybook, plus vanilla JS support.
Decoder
  • SSR: Server-side rendering; the process of generating HTML for a web page on the server rather than in the browser.
  • DOM: Document Object Model; the tree-like structure representing the elements of a web page.
Original article

Try it — this is real

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.

Small API, serious rendering

Framework-agnostic core

A dependency-free ~4 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, one-line accent theming, CSS variables, render hooks. Beautiful defaults, full control.

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.

Pick your entry point

  • @component-anatomy/core: The runtime: createAnatomy(), overlays, theming, events.
  • @component-anatomy/astro: Two-column anatomy block with SSR Markdown descriptions.
  • @component-anatomy/storybook: An "Anatomy" panel synced with the story canvas. SB 9/10.
Explore all 54 articles in today's digest

Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi