patterns / 07Responsive preview
Inspect a study at a different viewport without changing its document values.
Live interface previewSession only Try the controlsUsage
- Keep device fit, zoom and guide visibility in viewport state.
- On narrow screens replace an open editing panel rather than stacking panels.
Variants
DesktopTabletMobileGuidesPreview
Preview states
Device changedGuides on/offCanvas fitPreview controls hiddenMobile panel
Integration boundary
- No breakpoint override document, drag-resize canvas or exact pixel export is connected.
Source modules 4
conceptualize/components/studio-v2/studio-library-patterns.tsxconceptualize/components/studio-v2/studio-toolbar.tsxconceptualize/components/studio-v2/studio-canvas.tsxconceptualize/components/studio-v2/studio-prototype.tsx