Skip to main content

Storybook Visual Preview

Use this page when you want the visual companion to the docs portal: inspect overrideable surfaces, compare component treatments, and review package-local guides before you move changes into your app.

What Storybook is for​

The MediaSFU docs portal is the main narrative system.

  • onboarding and beginner flow
  • secure backend guidance
  • UI mode decisions such as returnUI={true} vs returnUI={false}
  • starter tutorials and API lookup

The ReactJS Storybook is the visual companion.

  • inspect cards, controls, whiteboard surfaces, and generated components
  • preview overrideable UI without editing your app first
  • review guide stories such as Documentation Hub and UI Overrides Guide
  • validate branded wrappers before promoting them into tutorials or product code
  • use the SDK docs, not Storybook, for Flutter and Kotlin integration flow

What is already covered well​

  • Guides/Documentation Hub explains how the docs portal and Storybook work together
  • Guides/UI Overrides Guide is the current override playbook for wrappers, uiOverrides, function overrides, and the customComponent escape hatch
  • display component stories give you the fastest preview surface for card-level changes

What Storybook is not​

  • It is not the main beginner entry point.
  • It is not the primary source of truth for integration order.
  • It should not replace the docs portal for backend safety, runtime sequencing, or product-shaped tutorial guidance.

Best way to use it​

  1. Start from Choose your UI mode and Starter screens.
  2. Use Storybook to inspect the surface you want to restyle.
  3. Move back to the docs portal for the final integration path and exact wiring.

Local commands​

Run the live Storybook dev server:

npm --prefix ../MediaSFUReactJS run storybook

Build the static Storybook output:

npm --prefix ../MediaSFUReactJS run build-storybook

Open the built static entry in this workspace:

Start-Process ..\MediaSFUReactJS\storybook-static\index.html

How to map Storybook to docs pages​

If you are doing...Read this docs page firstThen inspect this in Storybook
Choosing returnUI={true} vs returnUI={false}Choose your UI modeGuides/Documentation Hub
Styling cards and compact call surfacesUI overridesdisplay component stories
Planning deeper override workCustom component replacementGuides/UI Overrides Guide
Building product-shaped startersStarter screensmatching cards, controls, and guide stories

Use Storybook when you need to see a React UI surface before choosing an implementation path. It is best for visual inspection and customization decisions; the docs portal remains the place for install steps, backend safety, SDK-specific setup, Flutter/Kotlin guidance, and production sequencing.

  1. Start in the docs portal and choose the SDK or usage path that matches your app.
  2. Open Storybook only for the React UI surface you want to inspect or restyle.
  3. Return to the relevant docs page for the exact integration steps and production guardrails.
  4. Validate the customized room flow inside your app before launch.