Storybook Playgrounds

Storybook is the interactive UI playground for docs. We build a static Storybook bundle and embed stories directly in MDX pages.

Where Storybook lives

Storybook lives in the dapp workspace. The docs site consumes its built output for embeds.

- - main.ts
  - preview.tsx

Build pipeline

Step 1: Build Storybook for docs

pnpm —filter ritoswap run build-sb:docs writes to docs/public/storybook-static.

Step 2: Docs build

The docs site pulls Storybook from /storybook-static during build and runtime.

The docs workspace runs Storybook automatically via pnpm prebuild.

⚠️

Keep the build output folder named storybook-static. The embed URLs and the Storybook asset prefix expect /storybook-static, so renaming the folder will break assets unless you update those references too.

Embedding stories

Use docs/app/components/StorybookEmbed.tsx to generate consistent Storybook iframe URLs:


import { StorybookEmbed } from '@components/StorybookEmbed'
 
<StorybookEmbed title="Mint/ButtonSection" story="Playground" />

If you need a custom iframe, you can also embed Storybook directly:


<iframe
  src="/storybook-static/iframe.html?id=mint-buttonsection--playground"
  width="100%"
  height="600"
  style={{ border: '1px solid rgba(255,255,255,0.1)', borderRadius: '10px' }}
/>

References

Storybook overview: /dapp/storybook
Example embeds: docs/content/dapp/smart-contract-ui/button-section.mdx and docs/content/dapp/smart-contract-ui/nftscreen.mdx