DEV Community

Cover image for I built a React component doc generator that outputs Storybook stories
Valeria Castillo
Valeria Castillo

Posted on

I built a React component doc generator that outputs Storybook stories

It works on any React or TypeScript component — hooks, utilities, classes — and generates a props table, README section, and a complete Storybook story file in about 10 seconds.

Not a big story here. I was documenting a component for a design system at work and spent about 15 minutes cleaning up what Claude gave me. Structured it into a proper props table, extracted the Storybook argTypes, reformatted the README section. The component itself took maybe 45 minutes to build.

That ratio felt wrong.

So I built readmi — React component documentation generator — paste any JS or TS component, get back a structured props table, README section, usage example, and Storybook args. Takes about 10 seconds.


The part I kept not finding anywhere else: Storybook output. Every doc tool I looked at stops at props tables. readmi generates a complete .stories.tsx file with argTypes with the right control types inferred from your prop types (string → text, boolean → boolean, union of strings → select with the options array populated), plus a default Story. You paste it and it works. Storybook export is part of the $9 full access tier and the free tier includes the full props table, README preview, and usage example.

No JSDoc required. No setup. Works on components you didn't write, components without comments, things you inherited.


Free tier gives you full generation, no account needed. $9 one-time unlocks copy/export/download and the other output tabs. VS Code extension is almost done, license covers that too.

Built this for myself, figured others might find it useful too.

Top comments (0)