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 opt-out of Angular Ivy?

In case you are having trouble with Angular Ivy you can deactivate it in your main.js:

Please report any issues related to Ivy in our GitHub Issue Tracker as the support for View Engine will be dropped in a future release of Angular.

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:

💡 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 Storybook with Next.js

Next automatically defines React for all of your files via a babel plugin. In Storybook, you can solve this either by:

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

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:

💡 Fast Refresh only works in development mode with React 16.10 or higher.

Why is there no addons channel?

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

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:
Loading...
In React Native, it's a special case 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 include the @storybook/addon-controls dependency in your project and reference it in your .storybook/main.js as follows:

.storybook/main.js

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

Composition is a new feature that we released with version 6.0, and there are 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, and soon you'll be able to use them as if you are 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 consider that some of those addons might be working with an outdated version of Storybook.

We're actively working to provide a better way to address this situation, but in the meantime, we would ask for a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating an 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 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 versions 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.

Section	Page	Current Location	Version 5.3 location	Version 5.0 location
Get started	Install	See current documentation	See versioned documentation	See versioned documentation
	What's a story	See current documentation	See versioned documentation for your framework	See versioned documentation for your framework
	Browse Stories	See current documentation	See versioned documentation for your framework	See versioned documentation for your framework
	Setup	See current documentation	See versioned documentation for your framework	See versioned documentation for your framework
Write stories	Introduction	See current documentation	See versioned documentation	See versioned documentation
	Parameters	See current documentation	See versioned documentation here	Non existing feature or undocumented
	Decorators	See current documentation	See versioned documentation here	See versioned documentation here
	Naming components and hierarchy	See current documentation	See versioned documentation	See versioned documentation
	Build pages and screens	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	Stories for multiple components	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
Write docs	DocsPage	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	MDX	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Doc Blocks/Argstable	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Doc Blocks/Canvas	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Doc Blocks/Color Palette	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Doc Blocks/Description	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Doc Blocks/Icon Gallery	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Doc Blocks/Source	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Doc Blocks/Story	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Doc Blocks/Typeset	See current documentation	See versioned addon documentation	Non existing feature or undocumented
	Preview and build docs	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
Testing	Visual tests	See current documentation	See versioned documentation	See versioned documentation
	Accessibility tests	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	Interaction tests	See current documentation	See versioned documentation	See versioned documentation
	Snapshot tests	See current documentation	See versioned documentation	See versioned documentation
	Import stories in tests	See current documentation	See versioned documentation	See versioned documentation
Sharing	Publish Storybook	See current documentation	See versioned documentation	See versioned documentation
	Embed	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	Composition	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	Package Composition	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
Essential addons	Controls	See current documentation	Controls are specific to version 6.0 see Knobs versioned documentation	Controls are specific to version 6.0 see Knobs versioned documentation
	Actions	See current documentation	See addon versioned documentation	See addon versioned documentation
	Viewport	See current documentation	See addon versioned documentation	See addon versioned documentation
	Backgrounds	See current documentation	See addon versioned documentation	See addon versioned documentation
	Toolbars and globals	See current documentation	See versioned documentation	Non existing feature or undocumented
Configure	Overview	See current documentation	See versioned documentation	See versioned documentation
	Integration/Webpack	See current documentation	See versioned documentation	See versioned documentation
	Integration/Babel	See current documentation	See versioned documentation here and here	See versioned documentation here and here
	Integration/Typescript	See current documentation	See versioned documentation	See versioned documentation
	Integration/Styling and CSS	See current documentation	See versioned documentation	See versioned documentation
	Integration/Images and assets	See current documentation	See versioned documentation	See versioned documentation
	Story rendering	See current documentation	See versioned documentation here and here	See versioned documentation here
	Story Layout	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	User Interface/Features and behavior	See current documentation	See versioned documentation	See versioned documentation
	User Interface/Theming	See current documentation	See versioned documentation	See versioned documentation
	User Interface/Sidebar & URLS	See current documentation	See versioned documentation	See versioned documentation
	Environment variables	See current documentation	See versioned documentation	See versioned documentation
Addons	Introduction	See current documentation	See versioned documentation	See versioned documentation
	Install addons	See current documentation	See versioned documentation	See versioned documentation
	Writing Addons	See current documentation	See versioned documentation	See versioned documentation
	Writing Presets	See current documentation	See versioned documentation	Non existing feature or undocumented
	Addons Knowledge Base	See current documentation	See versioned documentation	See versioned documentation
	Types of addons	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	Addons API	See current documentation	See versioned documentation	See versioned documentation
API	Stories/Component Story Format	See current documentation	See versioned documentation	Non existing feature or undocumented
	Stories/MDX syntax	See current documentation	See versioned documentation	Non existing feature or undocumented
	Stories/StoriesOF format (see note below)	See current documentation	See versioned documentation	Non existing feature or undocumented
	Frameworks	See current documentation	Non existing feature or undocumented	Non existing feature or undocumented
	CLI options	See current documentation	See versioned documentation	See versioned documentation

With the release of version 5.3, we've updated how you can write your stories more compactly and easily. 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.

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

accessibility	accessibilityalt	add	admin	alert
arrowdown	arrowleft	arrowleftalt	arrowright	arrowrightalt
arrowup	back	basket	batchaccept	batchdeny
beaker	bell	bitbucket	book	bookmark
bookmarkhollow	bottombar	box	branch	browser
button	calendar	camera	category	certificate
check	chevrondown	chromatic	circle	circlehollow
close	closeAlt	cog	collapse	comment
commit	compass	component	contrast	copy
cpu	credit	cross	dashboard	database
delete	discord	docchart	doclist	document
download	edit	ellipsis	email	expand
expandalt	eye	eyeclose	facebook	facehappy
faceneutral	facesad	filter	flag	folder
form	gdrive	github	gitlab	globe
google	graphbar	graphline	graphql	grid
grow	heart	hearthollow	home	hourglass
info	key	lightning	lightningoff	link
listunordered	location	lock	markup	medium
memory	menu	merge	mirror	mobile
nut	outbox	outline	paintbrush	paperclip
paragraph	phone	photo	pin	play
plus	power	print	proceed	profile
pullrequest	question	redirect	redux	reply
repository	requestchange	rss	search	share
sharealt	shield	sidebar	sidebaralt	speaker
star	starhollow	stop	structure	subtract
support	switchalt	sync	tablet	thumbsup
time	timer	transfer	trash	twitter
undo	unfold	unlock	upload	user
useradd	useralt	users	video	watch
wrench	youtube	zoom	zoomout	zoomreset

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 to 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:

Terminal

Suppose 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, with the release of version 6.2, Storybook now includes support for Vue 3. See the install page for instructions.

Is snapshot testing with Storyshots supported for Vue 3?

Yes, with the release of version 6.2, the Storyshots addon will automatically detect Vue 3 projects.

If you run into a situation where this is not the case, you can adjust the config object and manually specify the framework (e.g., vue3).

See our documentation on how to customize the Storyshots configuration.

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.

Why are my mocked GraphQL queries failing with Storybook's MSW addon?

If you're working with Vue 3, you'll need to install @vue/apollo-composable. With Svelte, you'll need to install @rollup/plugin-replace and update your rollup.config file to the following:

rollup.config

With Angular, the most common issue is the placement of the mockServiceWorker.js file. Use this example as a point of reference.

Can I use other GraphQL providers with Storybook's MSW addon?

Yes, check the addon's examples to learn how to integrate different providers.

Can I mock GraphQL mutations with Storybook's MSW addon?

No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the MSW addon repository and follow up with the maintainer.

Why aren't my code blocks highlighted with Storybook MDX

Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:

💡 Check react-syntax-highlighter's documentation for a list of available languages.

Applying this small change will enable you to add syntax highlight for SCSS or any other language available.

How can my code detect if it is running in Storybook?

You can do this by checking the value of process.env.STORYBOOK, which will equal 'true' when running in Storybook. Be careful — process may be undefined when your code runs outside of Storybook.

This works because Babel replaces process.env.STORYBOOK with the value of the STORYBOOK environment variable. Because this is done through a Babel plugin, the following will NOT work:

Why is Storybook's source loader returning undefined with curried functions?

This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a working reproduction so that it can be triaged and fixed in future releases.

Why are my args no longer displaying the default values?

Before version 6.3, unset args were set to the argTypes.defaultValue if specified or inferred from the component's properties (e.g., React's prop types, Angular inputs, Vue props). Starting with version 6.3, Storybook no longer infers default values but instead defines the arg's value as undefined when unset, allowing the framework to supply its default value.

If you are using argTypes.defaultValue to fix the above, you no longer need to, and you can safely remove it from your stories.

Additionally, suppose you were using argTypes.defaultValue or relying on inference to set a default value for an arg. In that case, you should define the arg's value at the component level instead:

MyComponent.stories.js

For Storybook's Docs, you can manually configure the displayed value by configuring the table.defaultValue setting: