<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Valeria Castillo</title>
    <description>The latest articles on DEV Community by Valeria Castillo (@vcvstle).</description>
    <link>https://dev.to/vcvstle</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F223828%2F805a4426-212e-4c0e-b9d6-10e77802fb86.jpg</url>
      <title>DEV Community: Valeria Castillo</title>
      <link>https://dev.to/vcvstle</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vcvstle"/>
    <language>en</language>
    <item>
      <title>I built a React component doc generator that outputs Storybook stories</title>
      <dc:creator>Valeria Castillo</dc:creator>
      <pubDate>Mon, 04 May 2026 14:35:08 +0000</pubDate>
      <link>https://dev.to/vcvstle/i-built-a-react-component-doc-generator-that-outputs-storybook-stories-2lde</link>
      <guid>https://dev.to/vcvstle/i-built-a-react-component-doc-generator-that-outputs-storybook-stories-2lde</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;That ratio felt wrong.&lt;/p&gt;

&lt;p&gt;So I built &lt;a href="https://readmi.dev" rel="noopener noreferrer"&gt;readmi — React component documentation generator&lt;/a&gt; — paste any JS or TS component, get back a structured props table, README section, usage example, and Storybook args. Takes about 10 seconds.&lt;/p&gt;




&lt;p&gt;The part I kept not finding anywhere else: Storybook output. Every doc tool I looked at stops at props tables. readmi generates a complete &lt;code&gt;.stories.tsx&lt;/code&gt; 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.&lt;/p&gt;

&lt;p&gt;No JSDoc required. No setup. Works on components you didn't write, components without comments, things you inherited.&lt;/p&gt;




&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Built this for myself, figured others might find it useful too.&lt;/p&gt;

</description>
      <category>react</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
