Preview runs a visual Component or Page through Misaki Studio's interpreter so you can evaluate rendered structure, responsive state, variants, themes, interaction, data, and animation. It answers a different question from the editor canvas: not only “what did I draw?” but “what does this component do when it runs?”
Runtime Preview is available for Pages and visual Components that have a screen list and interpreter surface.
Mockups are static artwork and do not have a runtime Preview. Review a Mockup on the editor canvas; over MCP, capture it with get-preview-screenshot using view: "editor".
Code components can participate when they are rendered through a supported visual host, but their source and diagnostics have additional workflows beyond this introductory page.
Open a Page or visual Component.
Use the play control in the file header to open the movable Preview window.
Interact with the rendered content rather than the design canvas.
Close the window when you are finished, or use the adjacent preview control to open the file in a separate tab or window.
In the browser editor, the separate-preview control also exposes a Preview in Tab context action. Desktop and browser window behavior differ, but both routes open the Component's preview URL rather than exporting it.
The Preview window can expose controls for the current Component's available state:
Test Case supplies stored property values for that preview session.
Variant selects one or more declared style variants.
Theme changes the design-system theme, including themes supplied by linked libraries.
Preview as can run the preview signed out or as a row from the project's Users table when that surface is available.
Test-case selection is local to the Preview window. States still begin from their declared defaults. “Preview as” is editor-only test control and must never be confused with an authentication action a shipped design can call.
For an interactive Component, check at least:
The correct responsive screen or full-width behavior.
Default and meaningful variant combinations.
Default theme and any theme that changes semantic tokens.
Property-driven test cases.
Pointer, keyboard, focus, input, and navigation behavior that the Component declares.
State transitions, conditional rendering, repeated data, API/storage/content results, and timeline triggers.
When a dependency used by an open preview changes, Misaki Studio can offer an Update control instead of immediately discarding the current preview session. Applying it re-renders with the pending file changes.
Coverage: UI + MCP for runtime rendering; MCP adds structured inspection.
Select my project and resolve the target Component file. Capture its runtime preview at the width I specify, then return the screenshot, rendered DOM, computed styles for the named node, and its measured rectangle. Do not change project content.
Relevant production MCP operations include:
get-preview-screenshot for the runtime Preview or static editor canvas;
get-preview-dom for rendered HTML;
get-preview-computed-styles for the resolved runtime styles of a node;
measure-node and get-node-metadata for rendered geometry and structure;
preview-interact for supported runtime interaction;
interpreter inspection and stepping tools for state and action evidence.
testCaseId and themeId affect runtime Preview, not the static editor canvas. An MCP screenshot captures design pixels, not the surrounding editor panels or toolbar.
For interaction verification, ask for before-and-after evidence:
Inspect the target Component's current interpreter state, click the element named
MenuTriggerin Preview, then return the before/after state and screenshots. Stop after one interaction and report any authored API, storage, or navigation side effect.
Opening Preview, reading DOM/styles, measuring a node, or capturing a screenshot does not edit the Component definition.
Interacting with Preview changes runtime state and can intentionally trigger the same authored effects the component is designed to perform, including requests, storage changes, navigation, or focus changes. Use a safe project and test data when those effects matter.
Preview's state is not the Component file's undo history. To change the definition, return to Design, Animate, or Logic—or ask an agent for a bounded file mutation—then use the Component's content undo/redo behavior as appropriate.