Use Case

Design System Documentation & Component Library

Capture Storybook stories, component variants, and design token previews automatically. Keep your component library docs always in sync.

Overview

Component libraries evolve fast — and their documentation falls behind just as quickly. Screenshotly captures individual Storybook stories, component variants, and design token previews so your design system docs stay current without manual screenshots.

Point the API at your Storybook iframe URLs to capture isolated components. Use CSS selectors to target the story root element for clean, cropped images. Capture every variant — sizes, states, themes (light/dark) — in a single automated pass. Generate visual changelogs by diffing current captures against previous versions.

Design system teams integrate captures into their CI pipeline: on every component library release, fresh screenshots are generated and published to the documentation site. Designers and developers always see the real, rendered component — not an outdated static image.

Key Benefits

Auto-sync docs with component changes

Capture all component variants

Visual changelog for design updates

Consistent documentation images

Results You Can Expect

Synced

with component updates

Complete

variant documentation

Visual

changelog generation

How It Works

Connect to your Storybook or component playground

Define components and variants to capture

Trigger captures on component library updates

Generate visual changelog with diffs

Publish to documentation platform

Code Example

// Capture Storybook components for documentation
const captureComponents = async (storybookUrl, components) => {
  const docs = {};

  for (const component of components) {
    const storyUrl = storybookUrl + '/?path=/story/' + component.storyId;
    
    docs[component.name] = await fetch('https://api.screenshotly.app/screenshot', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        url: storyUrl,
        device: 'desktop',
        format: 'png',
        selector: '#storybook-root',
      }),
    });
  }

  return docs;
};

Frequently Asked Questions

Can I capture individual Storybook stories?

Yes! Use the Storybook iframe URL with component story IDs. Target the story root element with CSS selector for isolated component captures.

How do I generate visual changelogs?

Compare current component screenshots against previous versions. Generate diff images highlighting visual changes and include them in release notes.

Does this work with Figma or other design tools?

You can capture Figma embed URLs or any browser-accessible design tool. For private Figma files, use Figma's API to export frames directly, then compare against your live component screenshots.

How do I capture components in different themes (light/dark)?

Append theme parameters to your Storybook URL or use custom CSS injection to toggle themes before capture. Run two capture passes — one for light mode, one for dark — to document both variants.

Want a step-by-step walkthrough?

Read: Documentation Screenshot Automation Guide →

Ready to automate design systems?

Get started with 100 free screenshots. No credit card required.

Start Free Trial Try Playground