Preview a View or Component

Choose what to preview

Double-click a View or component in Explorer, or open it and click Show … in Preview in the editor header. The header says Shown in Preview when the current file is the selected target.

Single-clicking a source file does not change the target. You can keep a menu visible while editing one of its imported components.

The toolbar above the canvas holds every Preview control in one row: the Studio / Unreal source switch, the resolution preset, safe area, Fit, theme, and the Localization Test, Interaction Testing, and Layout Debug toggles covered below. The rendered View fills the rest of the pane.

Move around the canvas

• Hold the right mouse button and drag to pan, as in Unreal's Blueprint editor.
• Use Ctrl + mouse wheel to zoom around the pointer.
• Click Fit to center the complete View again.
• Use the named resolution presets to change a View's size.

These controls work in both the main Preview panel and its separate window. Left-click to interact with the displayed UI. The mouse wheel without Ctrl scrolls the displayed UI.

With the canvas focused, the keyboard drives the same navigation a gamepad would: arrows move focus, Tab / Shift+Tab traverse it, Enter or Space is Accept (held for a ui:hold-ms control), Escape is Back, Shift+Enter is the Secondary activation (gamepad X / □, @secondary) and Alt+Enter is the Tertiary activation (gamepad Y / △, @tertiary). The Interaction Testing popover has A, B, X and Y buttons for the same four face buttons.

When previewing a component alone, Studio centers the component and hides the View resolution and Fit controls. Supply missing props or slot examples in Inspector.

Try different conditions

A safe-area preset affects layouts that use the safe-area CSS values. It does not add padding where your CSS has none.

Expanded Text rewrites every $loc default in place, doubling and bracketing it, as in [ Continue - Continue !!! ], so labels that clip, wrap unexpectedly, or push a button off its container are visible without waiting for a real translation. Switch back to Off to see the authored defaults again.

Preview Store data

Use the Store panel's mock values to provide example data without running the game. Main Preview and responsive previews accept arrays, objects and null as well as text, numbers and booleans. For example, the starter Notifications View reads its cards from notifications.entries.

Use finite JSON values. Malformed data or a failed component binding reports an error instead of silently replacing the previous runtime value. Preview mocks do not execute Blueprint responses.

Mock Store values are validated against the project's Store schema, the same way the game validates them: a value whose type doesn't match its field (for example a string for an int field), or a field id the schema doesn't define, is rejected rather than silently applied. A rejected field shows up as a CUI4001 entry in the Problems panel (demo.count: type mismatch: int expected) and the rest of the preset still applies - one bad field does not stop the whole preview. The first rejection in a session also prints a migration hint to the console: re-save the preset from the Store panel, or edit its JSON, so it matches the current schema.

Reuse an unchanged Preview package

Open the same View or component again without editing it. Studio reuses the deterministically cached preview package and does not start the compiler for that package again. Restart Preview can rebuild the Preview runtime and renderer while still reusing the unchanged package.

Studio creates a different cache entry when the selected View or component, project source, project configuration, asset manifest, Preview theme, component slot shape, or bundled compiler changes. The cache is bounded and older entries are removed automatically.

Store mock values, localization values, forced interaction state, animation time, viewport size, and safe-area settings are runtime data. Changing them does not invalidate the compiled package. They are applied to the active or newly loaded Preview instead.

Preview translations offline

Declare text with $loc('GameUI::MainMenu.Continue', 'Kontynuuj'). Without a compatible Unreal connection, Studio displays the authored default. Ordinary preview JSON does not override the project's localized defaults.

When connected, Studio Culture selects a read-only translation batch for the Studio canvas. It never changes the game or Editor language. The Unreal-rendered preview continues to show the game's current language. Use Languages to inspect exact, inherited, source and missing values, and Refresh translations after compiling resources in Unreal.

Use a separate window

Click ↗, labeled Open preview in a separate window. Source edits keep updating the selected target there. Use Reattach Preview in the main window or close the separate window to bring Preview back. If opening fails, Preview stays in the main window.

If Preview stops updating

In Play mode, pending script timers and mapped videos keep the preview clock running even when no CSS animation or transition is active. A static preview without pending work sleeps until input or a state change requests another frame.

Save the file and read Problems. Studio keeps the last working version when a new build fails, so the visible UI may still be the previous version. Fix the reported error and save again. Use Restart Preview if the preview itself failed.

Studio Preview does not execute game Blueprint responses. Test button actions and the final appearance in Unreal.