Skip to content

Instantly share code, notes, and snippets.

@yannbf
Last active July 6, 2023 14:32
Show Gist options
  • Save yannbf/d7a32cfe697e71489db00bfd50e7ab5c to your computer and use it in GitHub Desktop.
Save yannbf/d7a32cfe697e71489db00bfd50e7ab5c to your computer and use it in GitHub Desktop.
How to use a Storybook template on codesandbox

Howdy!

Storybook is a tool with countless shapes and configurations, and given that we give support to hundreds of people, it's very important to provide a minimal repo that can reproduce your issue/situation. Thanks for your effort! This will help us assist you better and faster.

And now, let's get to it!

Fork a Storybook sandbox

We will be using codesandbox in these instructions, and you will need an account.

Select your template from the currently available list:

You should already see storybook running:

Storybook running on your browser

You will see a prompt in the bottom right corner saying that you need to fork it in order to make changes. Go ahead and do it.

Click on the fork button

Install your Storybook libs

Now, let's suppose that you need to add some addons (we will configure the addon Docs in this example). For that, click on the add dependency button on the left, and that will give you the option to add the dependencies you need, with any version available. Add all the necessary dependencies before moving to the next step.

Select the dependencies to install

Add your Storybook configuration

This is the time to add the configurations for you addons, making changes to main.js or adding files like preview.js or manager.js. Make the necessary changes for all addons before moving to the next step.

Add your addons configuration

Restart Storybook

Files like main.js are only processed once, when Storybook starts. If you make changes on such files, you need to restart Storybook. If you didn't, you may skip this step. Click on the Server control panel on the left and then click to restart your server.

Click on Server Control Panel then Restart Server

Now wait for Storybook to be restarted. Grab a coffee ☕️, this might take a minute or two.

Refresh your sandbox browser

After that is done, you might not see your changes in your Storybook. The reason is because the browser was not refreshed, so go ahead and refresh it by clicking at the button on the top left corner.

Click to refresh your sandbox browser

There you go! Now you should see the addons working with your configuration.

Example of working addon Docs

Share your template with us

Thanks for concluding the steps! Now all you gotta do is share your template with us. This will allow us to quickly review your issue and also to fork your template to provide you a fix when applicable!

Click on share then copy sandbox link

@mahdikhashan
Copy link

Thanks for sharing!

@yannbf
Copy link
Author

yannbf commented Mar 9, 2023

oh wow, how did you find this @mahdikhashan ?

There's a much better way to get a reproduction going nowadays. Just hit https://storybook.new/!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment