Components & Styling
Inspect and refine the visual hierarchy, layout, typography, and appearance of a screen
Design mode lets you inspect the real visual structure of each screen and make precise changes after Nuxie creates it.
Select what you want to edit
Select a screen or component on the canvas, or choose it from the hierarchy. The inspector changes to the selected subject.
When elements overlap or nest deeply, use the hierarchy to select the exact element. Multi-select is useful for shared alignment or appearance changes, but the inspector only shows controls that can be applied safely to the whole selection.
Frames and components
A screen is composed from frames and leaf components such as text, images, controls, and other supported elements.
- Frames own layout, size, alignment, spacing, clipping, fills, and child order.
- Text owns its content and typographic properties.
- Images and assets reference Project or Library assets rather than embedding arbitrary remote UI.
- Interactive elements can have Flow actions in addition to their visual properties.
The available inspector controls depend on the selected type. Nuxie does not expose implementation-only properties that the native runtime cannot publish.
Layout
Prefer responsive layout relationships over positioning every child by hand. Use frame direction, alignment, gap, padding, size rules, and constraints so the design remains coherent across the selected device size and safe area.
Preview the Experience after structural edits. A canvas that looks correct while static may still expose overflow, clipping, focus, or transition problems during a real run.
Typography and appearance
Use the inspector to adjust text style, color, fills, borders, radius, opacity, and supported effects. Reuse named styles and Project-level design values when a choice should remain consistent across screens.
The Editor and device runtime share the ProductHost model. The published result is compiled for the native runtime rather than converted into a web page.
Structural changes
You can add, remove, reorder, group, and duplicate supported elements. Structural changes participate in Project history and collaborative updates.
After changing hierarchy, check:
- The element remains reachable and visible in Design.
- Interactive actions still point at the intended element or screen.
- Bindings still resolve.
- The path works in Preview.