Supercharge Storybook

Build a nice-looking style guide with docs and automatic sample source code with a PropType explorer.

Add docs in Markdown format for each story. It’s useful because most projects and components already have README.md files.

A decorator that allows you to use your routing-aware components in your stories.

With this addon, you can showcase multiple components (or varying component states) within one story. Break your stories down into smaller categories (chapters) and subcategories (sections) for more organizational goodness.

A decorator with powerful display options for hosting, sizing and framing your components.

Navigate different versions of static Storybook builds to see how a component has changed over time.

This addon will allow you to write tests based on your stories and display results directly inside Storybook.

Add different paddings to your preview. Useful for checking how components behave when surrounded with white space.

Given possible values for each prop, renders your component with all combinations of prop values. Useful for finding edge cases or just seeing all component states at once.

Save the screenshot image of your stories (via Puppeteer).

Toggle the locale and directly see the result in the preview.

View your stories in a range of responsive viewports

Resize your responsive viewports dynamically with a draggable handle, exact px/em width inputs, or with one-click preset size buttons.

Rendering components with a matrix of props. This addon can also be used with storyshots.

Get a preview of the JSX code for each story. Configure the display and copy the code with a single click.

Provides live react story editing and preview.

Display code and copy it to the clipboard. It also has options to customize colors and syntax highlighting for any language. There is similar functionality via @storybook/addon-info but addon-info doesn’t currently work when using @storybook/html.

Create stories with AngularJS(1.x) components.

Allow to render stories in AMP-HTML. It also has options to view and validate the generated code.

Display the compiled HTML for each story.

Display code preview with user selected knobs in various framework code.

Open the code of the component used in story directly in VS code (dev/local) and in Github repo (deployed/production)

Wrap your stories with the Apollo client for mocking GraphQL queries/mutations.

Manage state inside a story. Update components when this state changes. Wrap the story in a function call to setup state management. The story can modify state properties with the provided store. The addon provides a panel to view and reset state.

Put GraphQL queries to your stories and either see the default formatted output or pass received data to your Components. Can be connected to any GraphQL endpoint but have additional features for GraphCMS projects.

Display form state for formik-aware components.

Wraps your story into MuiThemeProvider. It allows you to add your custom themes, switch between them, make changes in the visual editor and download as JSON file.

Add ability to customize styles in the story preview area

Select between styled components themes.

Select between JSS themes.

Provides the ability to change the html or body attribute.

Automatically generate design token documentation from your stylesheets and icon files.

Select between themes and tweek them directly in a panel.

Allows you to change the theme based on a css class name and adds a theme selection control to the Storybook panel.

Universal addon for developing themed React Apps, Components and Themes objects themselves. Supports Styled Components, Emotion, Material UI and any similar theming providers. Change colors dynamically and switch between themes. Edit props in themes of any shapes. Has API for extending under your needs.

Convert stories into Sketch symbols.

Embed Figma designs in a storybook panel.

Embed XD designs in a storybook panel.

Design with Playroom inside Storybook, using each story source as a starting point.

Take an eye over the vertical rhythm of your stories with this decorator.

Suggestions on how to tweak the HTML and CSS of your components to be more mobile-friendly.

Embed Zeplin designs in a storybook panel.

Embed Contrast handoff tool in a storybook panel.

Change Storybook to dark mode.