PatternBook statically analyses your React & TypeScript components to generate a living design system with live previews, prop tables, and source code, with no configuration required.
From zero to a living, searchable component library — with no config required.
Point PatternBook at your components folder and it handles the rest. No YAML, no decorators, no annotations.
Every example is rendered live in the browser. Edit the code inline and watch the preview update in real time.
TypeScript types and JSDoc comments are extracted automatically into a searchable, filterable prop reference.
Find any component instantly by name, description, or tag. Categories keep everything organised as your library grows.
PatternBook watches your files and regenerates the manifest on every save. Your docs can never fall out of sync.
View the full source of any component with syntax highlighting, right alongside the rendered preview.
Install PatternBook in your project. No config files, no boilerplate — it works with your existing structure.
npm i patternbook-cli Point PatternBook at your components folder. It statically analyses every component — extracting props, descriptions, and source code.
npx patternbook generate Launch the live viewer and browse your design system in the browser. Share the URL with your team instantly.
npx patternbook serve Get PatternBook running in your project in under five minutes.