Forgebook GitHub

See your components the way every user will.

Forgebook draws each story in dark mode, at high contrast, in another language or at a phone's width. It writes each component's page from its types, turns every story into a test and shows your coding agent the same catalogue.

$ npm install --save-dev forgebook @forgebook/react
Read the guide

Open source under the MIT licence, for React and Vite. Version 0.1, so the API may still change.

Forgebook showing a DatePicker story, switching between its dark and light theme, with the sidebar of components, the toolbar of switches and the props panel
Works with what you use
  • React
  • Vite
  • TypeScript
  • Playwright
  • axe
  • CSF stories
  • Claude Code
  • Codex

One story file. Four things you no longer write by hand.

// Badge.stories.tsx
export default {
  title: "Feedback/Badge",
  component: Badge
} satisfies Meta<typeof Badge>;

/** The label as most pages use it. */
export const Default = {
  args: { label: "New" }
};

Made for you and for your coding agent

Forgebook gives an agent the same catalogue you look at, through an MCP server and commands that answer in JSON. It finds the component that already exists, writes its stories, checks them in a browser and looks at the picture before it tells you the work is done.

  1. It learns how your project writes stories

    forgebook agents adds the rules to your AGENTS.md, or as a Claude Code skill with --skill.

  2. It finds before it writes

    CATALOG.md lists every component, hook and helper of a library in one line each, and get_story shows where a component is already used.

  3. It writes the stories

    new_stories drafts a component's first stories from its props: the main one, one per choice and the worst case.

  4. It checks them in a browser

    check_story runs accessibility, spills, overlays and errors on the story it changed, in any view.

  5. It looks at the result

    story_shot puts the story's pictures in the answer itself, dark and 360 px wide if you ask.

  6. It hears about what broke

    recent_errors reports what the frames open in your browser threw while it edited.

An example session

› Add a size prop to Badge, with sm, md and lg

● get_story ui:feedback-badge--overview
  used in Card, TableRow and Toolbar
● edit src/Badge.tsx, src/Badge.stories.tsx
● check_story ui:feedback-badge --view "dark 360"
  span.badge spills out of div.toolbar by 6px
● edit src/badge.scss
● check_story ui:feedback-badge --view "dark 360"
  no problems in 3 stories
● story_shot ui:feedback-badge--sizes
  3 pictures

Badge takes size sm, md and lg. The stories cover each
size, and the checks pass in dark at 360 px.
  • list_stories
  • get_story
  • story_address
  • new_stories
  • check_story
  • recent_errors
  • story_shot

  • Any MCP client

    forgebook mcp serves the tools over stdin and stdout, for Claude Code, Codex or any client.

  • Commands that answer in JSON

    stories, story, check, shot and errors take --json, and every answer carries links a person can open.

  • A catalogue for agents

    forgebook docs writes CATALOG.md and llms.txt, and --check fails in CI when they go stale.

  • Errors as they happen

    forgebook errors --follow lists each story that could not be shown and each play that failed, while you edit.

Look at a component the way each of your users will

The toolbar's switches change the story in place, so it keeps its state while you flip it to dark or to more contrast. Compare puts the same story side by side in every theme, so a colour that only breaks in high contrast shows up at a glance.

Kaji UI's Tag in Compare: the same story in light, dark and light with more contrast, side by side

  • Themes and contrast

    Your library's own themes, a higher contrast, and the system's choice, from the toolbar or a key.

  • Languages, right to left

    Every language your stories have texts for, a pseudo-language for text that grows, and Arabic or Hebrew drawn right to left.

  • Widths and the worst case

    Phone and tablet widths, and one press that fills every prop with its longest text and outlines what spills.

  • Touch on your computer

    The mouse becomes a finger, Shift adds a second one for pinches, and your CSS answers to a phone's hover and pointer.

Pages written from your types, never by hand

Each component gets a page: its demo, your notes in Markdown, then an API table read from its TypeScript props and their TSDoc. Change a prop and the page changes with it.

Kaji UI's Select page in Forgebook: its notes and its API reference, with each prop's type and what it does

  • Props from TypeScript

    Types, defaults and descriptions come from the code, and the panel's controls come from the same place.

  • Your own notes

    A Markdown file beside the component becomes the prose of its page.

  • Hooks, documented

    Stories about logic put a hook's signature first: its parameters, its return value and what each one means.

  • Used in

    A component's page lists the other components whose stories use it.

Every story you write is already a test

@forgebook/testing opens each story in Playwright in every view: both themes, more contrast, the structure without your styles, a narrow width. The panel runs the same accessibility check while you work, so you hear about a problem before the build does.

The Accessibility tab of Kaji UI's Button story: no WCAG 2.2 A or AA rule is broken 
$ playwright test

✓ Actions/Button › Overview · light
✓ Actions/Button › Overview · dark
✓ Actions/Button › Overview · dark-more
✓ Actions/Button › Overview · structure
✗ Inputs/Field › Long label · narrow
  label.field__label spills out of
  div.field by 38px
✓ Hooks/useUndo › History · logic

  • Accessibility

    axe checks WCAG 2.2 A and AA in every view, and a story that breaks a rule fails.

  • Spills and overlays

    An element that overflows its parent, or a menu left open past the frame, fails the story.

  • Reference images

    Screenshot runs compare each story with its picture, in a container, so fonts render the same everywhere.

  • Server rendering

    Each story is also rendered to a string, so no component reads the window while it renders.

Start from the stories you have

Forgebook reads CSF 3 and CSF 2, args, argTypes and actions. If your stories run in Storybook today, one command writes Forgebook's configuration beside it, and both can run while you decide. 

# reads .storybook/ and writes forgebook.config.ts beside it
$ npx forgebook init --from storybook

# the catalogue, on the same stories
$ npx forgebook dev

Try it on your own components

$ npm install --save-dev forgebook @forgebook/react
© 2026 Ensiria Made by Ensiria