Using Storybook

See YouTube channel

Top Toolbar

Canvas

• play around with one story
• 

Docs

Add-ons (Bottom toolbar)

Controls 🕹️

• replaces the knobs add on
• 

---

Actions

• see what parameters are being passed in to event handlers

• MSW (Mock Service Worker)

• Mock query params
• Interaction Testing

Accessibility

• runs some a11y tests
• recommends some manual checks

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

• 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: 2023-04-24