Skip to content

Using Storybook

See YouTube channel

Top Toolbar

image

Canvas

  • play around with one story
  • width:800px

Docs

width:800px

Add-ons (Bottom toolbar)

image

Controls 🕹️

  • replaces the knobs add on
  • width:1000px

Actions

image

Accessibility

  • runs some a11y tests
  • recommends some manual checks image

Troubleshooting

Storybook is stuck loading locally!

If you're getting this error in the browser console: Singleton client API not yet initialized

Reinstall your node_modules

rm -f package-lock.json && rm -rf node_modules && npm i

The bottom controls bar disappeared! What do I do?

You may have pressed S, A, T or F which toggle the visibility of the controls

width:250px

  • I don't see the add-ons toolbar!
    • Keyboard shortcut: Press S A T

Why isn't my story showing up?

  1. Did you name it *.stories.tsx?
  2. Is there a syntax/runtime error in your story? (check the browser console)
  3. Is the default export's title unique?

How do I change the order of stories?

Modify the order in .storybook/preview.js


Last update: 2022-11-04