Storybook Share Tool#

Overview#

The Storybook Share Tool encompasses two distinct capabilities in the manager toolbar: isolation mode (opening a story's preview in a new tab without the Storybook UI chrome) and cloud publishing (delegated to the Chromatic addon for one-click shareable links). The core codebase handles the isolation mode button and URL generation; authentication, error handling, and cloud publishing are delegated to third-party addons.

Entry Points#

Isolation Mode Tool#

The isolationModeTool is an Addon_BaseType registered as types.TOOLEXTRA. It renders only in viewMode === 'story' without a tab active 1.

On click, it:

1. Calls api.getStoryHrefs(storyId, { base: 'origin', refId, inheritArgs: true }) to generate the preview URL 2.
2. Opens the previewHref in a new tab via window.open(..., '_blank', 'noopener,noreferrer') 3.
3. Emits the SHARE_ISOLATE_MODE ('shareIsolateMode') event on the channel with the URL 4.

getStoryHrefs returns both a managerHref and a previewHref; the isolation mode tool specifically uses previewHref — the iframe-only URL without the Storybook chrome 5.

Cloud Publishing via Chromatic Addon#

Core Storybook does not implement cloud publishing itself. The onboarding checklist detects whether the Chromatic visual tests addon's share tool (chromaui/addon-visual-tests/share-tool) is registered, and branches accordingly 6:

• Chromatic addon present → shows the shareStorybook checklist item. It tracks completion by listening for experimental_useSharedState_setValue events on the chromaui/addon-visual-tests/shareProgress key. The action button triggers document.getElementById('chromatic-share-button')?.click() — delegating directly to the addon's DOM element 7.

• Chromatic addon absent → shows the publishStorybook item, which guides users to run npx storybook build and deploy to Chromatic, Vercel, or Netlify 8.

Addon detection uses addons.experimental_getRegisteredAddons(Addon_TypesEnum.TOOLEXTRA) 9. This approach means the core checklist has no knowledge of Chromatic's authentication flows, build state, or error handling — all of that lives within the Chromatic addon.

Delegation of Auth & Error Handling#

The share tool in core Storybook has no authentication UI or error handling of its own. This is intentional:

• Authentication: When Chromatic-hosted refs return 401 errors, the refs system extracts a loginUrl from the response and surfaces a login prompt — handled in the refs module, not in the share tool.
• Share progress & errors: The Chromatic addon writes progress state to shared state under chromaui/addon-visual-tests/shareProgress. Core Storybook only reads this key to mark the checklist item complete when status === 'complete' 10. Any error states from the Chromatic addon are displayed by the Chromatic addon's own UI.

QR Code Infrastructure (Removed from Toolbar)#

An earlier version of the share tool included QR code generation (using qrcode.react) and a copy-to-clipboard share link popover. PR #34413 redesigned the share tool and removed the QR code feature from the toolbar to reduce clutter 11. The QRCodeSVG import and styled components (QRContainer, QRRow, QRImageContainer, etc.) remain in share.tsx but are currently unused by the exported isolationModeTool.

References#

• Chromatic sharing docs — external reference for the Chromatic share flow
• Storybook publish docs — official guide for static deployment