Framework:

Frequently Asked Questions

Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the Storybook Repository.

How can I run coverage tests with Create React App and leave out stories?

Create React App does not allow providing options to Jest in your package.json, however you can run jest with commandline arguments:

💡 Note: If you're using yarn as a package manager, you'll need to adjust the command accordingly.

I see ReferenceError: React is not defined when using storybooks with Next.js

Next automatically defines React for all of your files via a babel plugin. You must define React for JSX to work. You can solve this either by:

  1. Adding import React from 'react' to your component files.
  2. Adding a .babelrc that includes babel-plugin-react-require

How do I setup Storybook to share Webpack configuration with Next.js?

You can generally reuse webpack rules by placing them in a file that is require()-ed from both your next.config.js and your .storybook/main.js files. For example:

How do I setup React Fast Refresh with Storybook?

Fast refresh is an opt-in feature that can be used in Storybook React. There are two ways that you can enable it, go ahead and pick one:

  • You can set a FAST_REFRESH environment variable in your .env file:
  • Or you can set the following properties in your .storybook/main.js files:

Note: Fast Refresh requires React 16.10 or higher and is only enabled in development mode.

Why is there no addons channel?

A common error is that an addon tries to access the "channel", but the channel is not set. This can happen in a few different cases:

  1. You're trying to access addon channel (e.g. by calling setOptions) in a non-browser environment like Jest. You may need to add a channel mock:

  2. In React Native, it's a special case that's documented in #1192

Can I modify React component state in stories?

Not directly. If you control the component source, you can do something like this:

Why aren't Controls visible in the Canvas panel but visible in the Docs panel?

If you're adding Storybook's dependencies manually, make sure you to include the @storybook/addon-controls dependency in your project and reference it in your .storybook/main.js as follows:

Why aren't the addons working in a composed Storybook?

Composition is a new feature that we released with version 6.0 and there's still some limitations to it.

For now the addons you're using in a composed Storybook will not work.

We're working on overcoming this limitation, soon you'll be able to use them as if you working with a non composed Storybook.

Which community addons are compatible with the latest version of Storybook?

Starting with Storybook version 6.0 we've introduced some great features aimed at streamlining your development workflow.

With this we would like to point out that if you plan on using addons created by our fantastic community, you need to take in consideration that some of those addons might be working with a outdated version of Storybook.

We're actively working in providing a better way to address this situation, but in the meantime we would ask a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating a issue in the Storybook repo so that we can gather information and create a curated list with those addons to help not only you but the rest of the community.

Is it possible to browse the documentation for past versions of Storybook?

With the release of version 6.0, we also updated our documentation as well. That doesn't mean that the old documentation was removed, we kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our migration guide .

We're only covering version 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more you'll have to check the specific release in the monorepo.

SectionPageCurrent LocationVersion 5.3 locationVersion 5.0 location
Get StartedInstallSee current documentationSee versioned documentationSee versioned documentation
What's a storySee current documentationSee versioned documentation for your frameworkSee versioned documentation for your framework
Browse StoriesSee current documentationSee versioned documentation for your frameworkSee versioned documentation for your framework
SetupSee current documentationSee versioned documentation for your frameworkSee versioned documentation for your framework
Writing StoriesIntroductionSee current documentationSee versioned documentationSee versioned documentation
ParametersSee current documentationSee versioned documentation hereNon existing feature or undocumented
DecoratorsSee current documentationSee versioned documentation hereSee versioned documentation here
Naming components and hierarchySee current documentationSee versioned documentationSee versioned documentation
Writing DocsDocsPageSee current documentationSee versioned addon documentationNon existing feature or undocumented
MDXSee current documentationSee versioned addon documentationNon existing feature or undocumented
Doc BlocksSee current documentationSee versioned addon documentationNon existing feature or undocumented
Preview and build docsSee current documentationNon existing feature or undocumentedNon existing feature or undocumented
Essential addonsControlsSee current documentationControls are specific to version 6.0 see Knobs versioned documentationControls are specific to version 6.0 see Knobs versioned documentation
ActionsSee current documentationSee addon versioned documentationSee addon versioned documentation
ViewportSee current documentationSee addon versioned documentationSee addon versioned documentation
BackgroundsSee current documentationSee addon versioned documentationSee addon versioned documentation
Toolbars and globalsSee current documentationSee versioned documentationNon existing feature or undocumented
ConfigureOverviewSee current documentationSee versioned documentationSee versioned documentation
Integration/WebpackSee current documentationSee versioned documentationSee versioned documentation
Integration/BabelSee current documentationSee versioned documentation here and hereSee versioned documentation here and here
Integration/TypescriptSee current documentationSee versioned documentationSee versioned documentation
Integration/Styling and CSSSee current documentationSee versioned documentationSee versioned documentation
Integration/Images and assetsSee current documentationSee versioned documentationSee versioned documentation
Story renderingSee current documentationSee versioned documentation here and hereSee versioned documentation here
Story LayoutSee current documentationNon existing feature or undocumentedNon existing feature or undocumented
User Interface/Features and behaviorSee current documentationSee versioned documentationSee versioned documentation
User Interface/ThemingSee current documentationSee versioned documentationSee versioned documentation
User Interface/Sidebar & URLSSee current documentationSee versioned documentationSee versioned documentation
Environment variablesSee current documentationSee versioned documentationSee versioned documentation
WorkflowsPublish StorybookSee current documentationSee versioned documentationSee versioned documentation
Build pages and screensSee current documentationNon existing feature or undocumentedNon existing feature or undocumented
Stories for multiple componentsSee current documentationNon existing feature or undocumentedNon existing feature or undocumented
Testing with Storybook/Unit TestingSee current documentationSee versioned documentationSee versioned documentation
Testing with Storybook/Visual TestingSee current documentationSee versioned documentationSee versioned documentation
Testing with Storybook/Interaction TestingSee current documentationSee versioned documentationSee versioned documentation
Testing with Storybook/Snapshot TestingSee current documentationSee versioned documentationSee versioned documentation
AddonsIntroductionSee current documentationSee versioned documentationSee versioned documentation
Install addonsSee current documentationSee versioned documentationSee versioned documentation
Writing AddonsSee current documentationSee versioned documentationSee versioned documentation
Writing PresetsSee current documentationSee versioned documentationNon existing feature or undocumented
Addons Knowledge BaseSee current documentationSee versioned documentationSee versioned documentation
Types of addonsSee current documentationNon existing feature or undocumentedNon existing feature or undocumented
Addons APISee current documentationSee versioned documentationSee versioned documentation
APIStories/Component Story FormatSee current documentationSee versioned documentationNon existing feature or undocumented
Stories/MDX syntaxSee current documentationSee versioned documentationNon existing feature or undocumented
Stories/StoriesOF format (see note below)See current documentationSee versioned documentationNon existing feature or undocumented
FrameworksSee current documentationNon existing feature or undocumentedNon existing feature or undocumented
CLI optionsSee current documentationSee versioned documentationSee versioned documentation
With the release of version 5.3 we've updated how you can write your stories to a more compact and easier way. It doesn't mean that the storiesOf format has been removed. For the time being we're still supporting it and we have documentation for it. But be advised that this is bound to change in the future.

What icons are available for my toolbar or my addon?

With the @storybook/components package you get a set of icons that you can use to customize your own UI. Use the table below as a reference while writing your own addon or defining your own Storybook global types. Go through this story to see how the icons look.

accessibilityaccessibilityaltaddadminalert
arrowdownarrowleftarrowleftaltarrowrightarrowrightalt
arrowupbackbasketbatchacceptbatchdeny
beakerbellbitbucketbookbookmark
bookmarkhollowbottombarboxbranchbrowser
buttoncalendarcameracategorycertificate
checkchevrondownchromaticcirclecirclehollow
closecloseAltcogcollapsecomment
commitcompasscomponentcontrastcopy
cpucreditcrossdashboarddatabase
deletediscorddocchartdoclistdocument
downloadeditellipsisemailexpand
expandalteyeeyeclosefacebookfacehappy
faceneutralfacesadfilterflagfolder
formgdrivegithubgitlabglobe
googlegraphbargraphlinegraphqlgrid
growhearthearthollowhomehourglass
infokeylightninglightningofflink
listunorderedlocationlockmarkupmedium
memorymenumergemirrormobile
nutoutboxoutlinepaintbrushpaperclip
paragraphphonephotopinplay
pluspowerprintproceedprofile
pullrequestquestionredirectreduxreply
repositoryrequestchangersssearchshare
sharealtshieldsidebarsidebaraltspeaker
starstarhollowstopstructuresubtract
supportswitchaltsynctabletthumbsup
timetimertransfertrashtwitter
undounfoldunlockuploaduser
useradduseraltusersvideowatch
wrenchyoutubezoomzoomoutzoomreset

I see a "No Preview" error with a Storybook production build

If you're using the serve package to verify your production build of Storybook you'll get that error. It relates how serve handles rewrites. For instance /iframe.html is rewritten into /iframe and you'll get that error.

We recommend that you use http-server instead and use the following command to preview Storybook:

If you don't want to run the command above frequently. Add http-server as a development dependency and create a new script to preview your production build of Storybook.

Can I use Storybook with Vue 3?

Yes, Storybook support for Vue 3 is currently being finalized and will be released in version 6.2. See the install page for instructions.

Is snapshot testing with Storyshots supported for Vue 3?

Yes, if you're using Vue 3 in your project you can use the Storyshots addon. You'll need to adjust your config object and manually specify the framework.

Why are my MDX stories not working in IE11?

Currently there's an issue when using MDX stories with IE11. This issue does not apply to DocsPage. If you're interested in helping us fix this issue, read our Contribution guidelines and submit a pull request.