We welcome contributions of any type and skill level. As an open-source project, we believe in the power of community and welcome any contributions that help us improve Storybook. Whether you are a developer, designer, writer, or someone who wants to help, we'd love to have you on board. If you are interested in contributing, please read the following guidelines.
Whether you're new to open source or a seasoned contributor, we welcome all contributions. Here are a few ways you can contribute to Storybook:
- Create an RFC for feature requests
- Update our documentation with fixes, improvements, or clarifications
- Add new examples of code snippets for using Storybook with a JS framework
- Integrate Storybook with a JS framework or improve support of existing frameworks
- Write an addon to extend Storybook's functionality
If you're not sure where to start, you can always help us by:
- Reporting a bug
- Answer Help questions on Storybook's GitHub discussions
- Browse
Good First Issues to fix
Note: Before you start contributing, please read the Code of Conduct and reach out to the maintainers if you have any questions or concerns about the project or the contribution process on the
#contributingchannel on Discord.
Storybook is developed against a specific Node.js version specified in the .nvmrc file.
You can use any version manager to install the correct version of Node.js. We recommend using fnm.
- Check if you have the correct version of Node.js installed by running the following command:
# Check which version you're using
node --version
# node version manager
nvm use 22
# pnpm
pnpm env use --global 22-
Install fnm and adjust your shell configuration to include the following parameters:
fnm env,use-on-cd,corepack-enabled, andversion-file-strategy recursive.eval "$(fnm env --use-on-cd --corepack-enabled --version-file-strategy recursive)"
-
If you're a Windows user, you'll need to enable Windows Subsystem for Linux (WSL). You can follow the instructions here.
- All commands should be run in a terminal with administrator privileges in Windows environments.
Storybook uses a monorepo structure to manage the project and its packages. Here's a highlight of notable directories and files:
.
├── CHANGELOG.md # Changelog for current version of Storybook
├── CHANGELOG.prerelease.md
├── CHANGELOG.v1-5.md
├── CHANGELOG.v6.md
├── CODEOWNERS
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING # Info relevant for maintainers
├── CONTRIBUTING.md <--------- You are here!
├── LICENSE
├── MAINTAINERS.md
├── MIGRATION.md # Migration Guide for Storybook
├── README.md
├── RESOLUTIONS.md
├── SECURITY.md
├── code # Codebase for Storybook
│ ├── __mocks__
│ ├── addons
│ ├── bench
│ ├── builders
│ ├── chromatic.config.json
│ ├── core # Core package for UI and API of Storybook
│ ├── e2e-tests
│ ├── frameworks # Different framework-bundler versions of Storybook
│ ├── lib # CLI and plugins
│ ├── node_modules
│ ├── nx.json
│ ├── package.json
│ ├── playwright.config.ts
│ ├── presets # Preset packages
│ ├── prettier.config.mjs
│ ├── renderers # Storybook renderers for different frameworks
│ ├── sandbox # Sandboxes for Bug Reproductions or experimentation
│ ├── tsconfig.json
│ ├── vitest-setup.ts
│ ├── vitest.config.ts
│ ├── vitest.helpers.ts
│ ├── vitest.workspace.ts
│ └── yarn.lock
├── codecov.yml
├── dependabot.yml
├── docs # Documentation
│ ├── _assets
│ ├── _snippets
│ ├── addons
│ ├── api
│ ├── builders
│ ├── configure
│ ├── contribute
│ ├── essentials
│ ├── faq.mdx
│ ├── frameworks.js
│ ├── get-started
│ ├── index.mdx
│ ├── migration-guide
│ ├── sharing
│ ├── versions
│ ├── writing-docs
│ ├── writing-stories
│ └── writing-tests
├── node_modules
├── package.json # Root package.json for Storybook
├── prettier.config.mjs
├── scripts # Build and Helper Scripts
├── test-storybooks
│ ├── ember-cli
│ ├── external-docs
│ ├── portable-stories-kitchen-sink
│ ├── server-kitchen-sink
│ └── standalone-preview
└── yarn.lockIf you plan to contribute to Storybook's codebase, you should fork the repository to your GitHub account. This will allow you to make changes to the codebase and submit a pull request to the main repository when you're ready to contribute your changes. Once you've forked the repository, you should disable Github Actions for your forked repository as most of them (e.g., pushing to sandbox) will fail without proper authorization. In your forked repository, go to Settings > Actions > General > set the Actions Permissions to Disable actions. Additionally, adding our codebase as upstream ensures you can rebase against the latest changes in the main repository. To do this, run the following commands:
git remote add upstream https://github.com/storybookjs/storybook.git
git fetch upstream
git branch --set-upstream-to upstream/main mainIf you're interested in contributing to Storybook's codebase, you can run it locally to get a feel for the codebase and the development environment. To get started with the development environment, you should always run yarn start from the root directory. Running yarn start will install the required dependencies, build the project, including the packages, and generate a sandbox environment using React with TypeScript with a set of test stories to help you get started.
# Navigate to the root directory of the Storybook repository
cd path/to/your/storybook/fork
# Install the required dependencies and start the development environment
yarn startYou don't need to install the dependencies manually to get the project running. The yarn start command will install the required dependencies for you.
If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following:
- In a second terminal, run
yarn build --watch <package-1> <package-2>in thecode/directory.
For example, if you want to build the @storybook/react, @storybook/core-server, @storybook/api, and @storybook/addon-docs packages, you would run:
# Navigate to the code directory
cd path/to/your/storybook/fork/code
# Build the specified packages in watch mode
yarn build --watch react core-server api addon-docs
Most package names can be found after `@storybook/` in the published package.
For instance, to build the `@storybook/react @storybook/core-server @storybook/api @storybook/addon-docs` packages at the same time in watch mode:
```shell
cd code yarn build --watch react core-server api addon-docs -
If you are running the sandbox in "linked" mode (the default), you should see the changes reflected on a refresh (you may need to restart it if changing server packages)
-
If you are running the sandbox in "unlinked" mode, you'll need to rerun the sandbox from the
publishstep to see the changes:
yarn task --task dev --template <your template> --start-from=publish - If you have made any changes inside
/codeor other packages, remember to runyarn testinside the package to ensure that your changes do not break any tests.
If you are working on Angular-specific code, you will need to append --prod to the above mentioned commands to ensure that the Angular compiler is able to pick up the changes appropriately and doesn't fail. This will build all the packages in production mode.
# Starts the build process in production mode
yarn task --prod# Builds the specified packages in production mode
yarn build --prod --watch angular core addon-docsYou can pick a specific template to use as your sandbox by running yarn task, which will prompt you to make further choices about which template you want and which task you want to run.
If you run yarn start and encounter the following error, try rerunning yarn start a second time:
> NX ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json' If you are a Storybook contributor and still experience issues, it is recommended that you verify your local Storybook instance for any unintentional local changes. To do this, you can use the following command:
git clean -dx --dry-run By executing this command, you can see which untracked or ignored files and directories will be removed from your working directory if you run it with the --force flag. Before running the command with the --force flag, please commit any local changes you want to keep. Otherwise, they will be lost.
For further advice on contributing, please refer to our NEW contributing guide on the Storybook website.