The Inspector

Select a component on the canvas or in Layers and the Inspector shows it. Toggle Inspector, above the canvas, hides or shows the panel.

Header

Its name, which you can edit, its kind and category, and controls to hide and lock it.

Inspector tab

Its properties, a line on what it is for, setup prompts, a How to use guide, and Arrange controls to move, duplicate or delete it.

Actions tab

What happens when it is tapped. Only components with built-in actions have this tab.

Motion tab

Its animations. Every component, and the page itself, has one.

Select the page itself to rename it under Page name or open its Page settings.

Properties sit in groups: Content, Layout, Size, Spacing, Appearance, Text style, Behaviour, Accessibility and, for code components, Custom properties. Content starts open (Layout for containers); a closed group shows a summary, such as Auto × Auto under Size.

• Find a setting searches names, explanations and earlier names, inside closed groups too. Colour and color both work.
• Show tips adds a short explanation under every field, and Collapse all closes every group.
• Less common settings wait in disclosures such as Adjust each corner, marked Custom once one is set.

Spacing separates Inside space from Outside space. All sides sets every edge; Adjust sides sets pairs or single edges, and a single side wins over shared values.

Type a value, then press Enter or leave the field to apply it; Escape puts the previous value back. A value that does not fit is explained under the field and not applied. Width and height take a number, a percentage such as 50%, or auto.

A reset control appears beside each value you have set. It removes your value, so the component falls back to its default or to what it inherits from its parent. Clearing a number, size or colour field does the same, and menus offer Default.

Colours

Choose one of your Theme colours to link it, shown as Linked, so it follows later theme changes. A Custom colour stays as you set it. Transparent and Use default are there too.

Fonts

Inherit follows the parent's text style, Theme font stays linked to your theme, and any family from the bundled library is a fixed choice.

Theme, fonts and assets covers linking in full.

Select more than one component and the Inspector lists Shared properties: the Size, Layout, Spacing, Appearance and Text style settings that every selected component has in the same form. Where their values differ, a field reads Mixed until you set it.

Batch actions duplicates, deletes, hides or locks the whole selection, and Group components keeps neighbouring layers together. Choose a layer under Selected layers to edit it on its own. Motion works across a selection; actions are set one component at a time.

The Actions tab appears for buttons, tappable containers, list rows, page headers, text links, icon buttons, inline notices, empty states and selectable chips. Its card names the moment, usually When tapped. Choose an Action:

The footer reads Action configured or Finish setup, and Remove clears the action. Test in Preview runs the app to try it; there, a website opens only after you confirm its address. A disabled component runs no action, and a handler you bind in code replaces the built-in one.

A page navigation bar chooses its pages here instead, and a custom component lists its own Component events.

Motion animates how a component or page appears and responds. Under When should it animate?, pick a moment, then choose an effect:

When it appears

As its page or panel opens, or when it becomes visible. Eight effects, such as Fade in and Rise in.

When tapped

While a finger is down, returning on release. It adds feedback without changing what the tap does. Six effects, such as Compress and Lift.

When content changes

When its text or value updates, after it first appears. Six effects, such as Pop and Soft flash.

Keep repeating

While it is on screen, with Keep going or A few times. Six effects, such as Float and Pulse.

Choosing an effect turns it on and, for a single component, plays it on the canvas; Replay on canvas plays it again. Quick, Natural and Slow set its speed, and Fine tune holds exact timing, movement, size, turn and opacity. The canvas otherwise stays still; Preview and your app run every effect you turn on.

Hide component

The eye control. A hidden component disappears from the canvas and from your app, but stays in Layers so you can show it again. A code binding can also hide or show it while the app runs.

Lock component

The padlock. A locked component and everything inside it cannot be edited or deleted, by you or by Sanic AI, until you choose the padlock again. Locking protects your work in the editor and does not change the app.

The page itself cannot be hidden. Layers has both controls on every row, and for a component inside a locked parent, the Inspector names that parent.

Each change you apply in the Inspector is one step in the project's history: a typed value, a reset, a theme link, an action or an animation effect. A change across a selection is still one step. Undo keeps up to 100 steps, and a new change clears anything you could redo.

Searching, tips, switching tabs and replaying an animation add no steps. Dragging through a colour picker applies only the colour you finish on.

Ctrl / Cmd+Z

Undo the last change.

Ctrl / Cmd+Shift+Z

Redo it.