Inspect Elements and Preview Data

Select an element in Hierarchy or Preview. Inspector shows its source link, attributes, bindings, size, and interaction state. Open the source link to edit the element or its CSS. Inspector does not edit CSS appearance properties.

The source link at the top jumps straight to the element's declaration; the element type, its static attributes, and the layout engine's computed position and size follow below. Use the measured layout numbers when a control looks the wrong size in Preview: they come from the same WASM layout pass that renders the canvas, not from the CSS source alone.

When connected to Unreal, select the running View to inspect information from that game instance. If an element belongs to a different component, Owned by links to that component's source.

View configuration

Selecting a View in Explorer opens the VIEW panel. It edits Name, Entry, Layer, Input Policy, Retention, Show Mouse Cursor, and opening/closing settings. Save to rebuild the package and update connected Unreal.

See View settings for what each setting does.

Preview prop values

1. Double-click a component to preview it by itself.
2. In Inspector, fill the props.* values that component expects.
3. Finish editing the field to save it. Boolean choices save immediately.
4. Check the updated Preview.

These are example values for Preview. They do not become default props in the component or overwrite real game data. When a View uses the component, it still supplies its own props.

Studio stores the examples in the project's configured preview-data file. Nested values such as props.player.name remain nested data.

Inspect Store-bound values

A bound element's value comes from the Store, not from a prop. Open Store in the Activity Bar to see and edit the preset backing what Inspector shows for that element.

Each row is a Store field path with its current preview value, such as showcase.holdPercent. Editing a value here updates every bound element in Preview immediately, which is the fastest way to confirm that an element is actually reading the field you expect. See Game Data in the Store for how these fields and presets are defined.

Preview-only slot content

1. Preview the component by itself.
2. Drag a project component, Lucide icon, or SVG icon onto its slot row in Hierarchy.
3. Select the slot to inspect its assignment. For an icon, adjust Size as needed.
4. Use Remove from Preview or the slot row's remove action to clear it.

This lets you test a panel with different headers or icons. The assignment only affects this component's Preview; it does not add content to Views or Unreal packages. To place permanent content, edit the parent View's slot usage.