Live preview and page structure

Investigate the story behind a screenshot without changing its captured result.

Open Live#

On a supported story, choose Live to interact with the saved build. Test a control, inspect layout behaviour, or reproduce the state you are reviewing. Use the image modes again to make the actual visual decision.

Live availability depends on the build being retained and the story's settings being supported. A story can have a screenshot even when Live is unavailable.

Open Storybook#

Open Storybook opens the uploaded collection. You are looking at that run's build, not the latest source in your working tree. Fonts and remote services still need to be accessible when you browse it.

Only a member with project access can create the link. A created link can be used by anyone holding it for its one-hour lifetime, so treat it as private. Reopen it from Framecheck after it expires. Uploaded builds are retained for 30 days; an older screenshot may remain when its interactive build has expired.

Inspect page structure#

For supported changed web stories, the structure view shows recorded, redacted HTML as text. It can help explain an added wrapper, changed content, or missing element. The screenshot remains the visual result.

Recording is enabled by default where supported. An admin can disable it for the project; a story can opt out with:

export const Example = {
  parameters: { framecheck: { dom: false } },
};

Older results and some stories may not have structure available. Redaction is not a reason to put secrets into Storybook fixtures in the first place.

Custom domains#

Open Storybook does not require you to publish on a custom domain. Custom-domain publishing is a separate preview feature.