Appearance
User Interface ProPart of the Pro plan and up
A User Interface object is a 2D panel you design yourself – buttons, labels, images, sliders, toggles, text fields and more, laid out with stacks. You can place the panel in the scene like any other object, or pin it to the screen as an overlay. Its controls fire events, so a tap on a panel button can start the same actions a tap on a 3D object can.
Typical uses:
- an info card next to a product or exhibit
- a control panel that switches between variants of a model
- a heads-up display with a score, a timer or a restart button
- a short form or quiz answered inside the experience
User Interface is part of the Pro plan and up. On a free account the insert menu still lists it, marked Pro, and choosing it opens the plan offer.
Add a panel
- Open the + (Insert) menu and choose Add User Interface. To put a panel inside a container, right-click the container and pick Insert → User Interface.
- The new object starts as a small panel with one "Hello World" label in a vertical stack.
- In the object's inspector, click Edit Interface to open the UI editor.
- Build the panel, then close the editor with the checkmark button to save it back to the object.
Like any new object, the panel starts with a Position anchor at the scene origin, so it stands in the world. To pin it to the screen instead, change its anchor to Screen Space – see where a panel appears below.
The UI editor
The UI editor opens on top of the main editor, at the size of the editor window. It has three columns and a toolbar.
| Area | What it does |
|---|---|
| Toolbar | + adds a view, grouped as Layout, Controls and Display. The sidebar button shows or hides the inspector, and the checkmark saves and closes. |
| Hierarchy (left) | The panel's tree. The Panel row at the top holds the panel's own settings; below it are the root view and its children. Drag rows to reorder or move views into another stack. Hidden and disabled views show an icon on their row. |
| Canvas (middle) | A live preview of the panel, drawn the same way it renders in the experience. Click a view to select it. |
| Inspector (right) | The settings of whatever is selected: the panel itself, or one view. |
The navigator and inspector can be resized by dragging their edges, the same as in the main editor.
Adding views
+ inserts the new view next to the current selection:
- with a stack selected, the view is added as its last child
- with any other view selected, the view is added right after it
- with the Panel row or the root view selected, the view is added at the end of the root stack
A panel holds up to 50 views. When it is full, +, paste and duplicate stop adding views.
The hierarchy's context menu
Right-click a row for:
- Copy, Cut, Paste – paste lands inside a selected stack, or after any other view, with fresh copies of every view
- Copy Style, Paste Style – copy one view's look onto another (see Styling)
- Duplicate
- Wrap into… – put the view inside a new VStack, HStack or ZStack
- Dissolve Stack – replace a stack that holds exactly one child with that child
- Replace with… – change the view's kind while keeping its name, style, padding and state; replacing a stack with a non-stack asks before removing its children
- Delete
- Copy Development ID – the view's ID, for scripts
The root view can't be cut, duplicated or deleted, because a panel always needs one.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| ↑, ↓ | Select the previous, next row |
| ↩ | Rename the selected view |
| ⌫ | Delete the selected view |
| ⌘C, ⌘X, ⌘V | Copy, cut, paste a view |
| ⌘D | Duplicate |
| ⌘⌥C, ⌘⌥V | Copy, paste a style |
| ⌘Z, ⌘⇧Z | Undo, redo |
| Tab, ⇧Tab | Move to the next, previous field in the inspector |
Undo inside the UI editor covers everything you did since you opened it. Saving with the checkmark records the whole edit as one step in the main editor.
Where a panel appears
A panel is placed by its object's anchor, like any other object. Two kinds of placement behave differently:
- In the world – with a Position, Plane, Image or any other spatial anchor, the panel is a flat surface in the scene. People walk up to it, it can be partly hidden behind other objects, and it is in photos and videos taken in the experience.
- On the screen – with the Screen Space anchor, the panel is pinned to the display as an overlay that stays put while the camera moves. You set its alignment (centre, an edge or a corner), its distance from the screen edges, and whether it keeps clear of the notch and home indicator. On Apple Vision Pro, a screen-space panel sits in a layer about 60 cm in front of the viewer that follows their head.
Screen Space is offered only for a User Interface object with no nested content.
One panel, a different placement per device
With per-device anchoring, the same panel can sit on the screen on one kind of device and in the world on another. A common setup is Handheld → Screen Space, so the panel stays flat and readable on a phone or tablet whatever the camera does, and Spatial → Position, so on Apple Vision Pro it stands in the room where people can walk up to it and touch it. Pick the anchor for each category under Device Configuration in the object's anchor settings.
How the panel's size, background and touch handling change between these two placements is covered in Panels.
Where to go next
- Panels – size, background material, corner radius, scrolling, and how panels render on each device
- Layout & Sizing – stacks, spacers, alignment, sizing, padding
- Views – every view kind and its settings
- Styling – style presets, colours, fonts, borders, shadows, and on/off states
- Text & Variables – markdown in labels and live variable values
- Interaction – reacting to taps, toggles, sliders and text input
- Design Guidelines – text sizes, touch targets, spacing and contrast that work in AR, with a checklist
To build or change panels from a script, see the scripting guide's User Interface page.