Studio Interface Tour

​

Overview

When you open a project, Studio takes you to one screen where all of the building happens. It is a single layout built around five regions:

• a Canvas in the centre, showing a live preview of the screen you are building
• an AI Assistant panel on the left, for generating UI from a prompt
• a Component Tree, also on the left, listing every page and the selected page’s nested components
• a Properties panel on the right, for configuring whatever is selected
• a top bar for project level controls such as undo, redo, preview and save status

It is worth knowing what each region is for before diving into any one workflow. To follow along, open any project from https://getnativeflow.com/projects by clicking its card. A project that already has screens and components on them shows more than an empty one. The editor is a fixed three column layout with a top bar spanning the full width: a narrow icon rail plus a content panel on the left, the Canvas filling the centre, and the Properties panel on the right. The left rail is icons only, with no separate labels. In the BUILD section it offers a chat bubble icon for the AI Assistant, a grid icon for the component catalog, which is the searchable list you add new components from, and a stacked layers icon for the Component Tree.

​

Canvas

The centre of the screen. It renders the currently selected page as a live, scrollable device frame, phone shaped in Mobile mode, with all of that page’s real components. It is not a static mockup. Above the canvas frame sits a small toolbar:

• a row of three device preset icons.
• zoom controls: zoom out, a percentage readout, zoom in.
• a “fit to screen” icon.

The recording above is a real, unscripted session — it runs at automation speed with no narration. Project Type is switched to Web app and back to Mobile app, each transition going through Studio’s own confirmation dialog rather than skipped, and confirmed reverted afterward with a completely fresh session. Clicking any component on the canvas selects it. The same node highlights in the Component Tree and its fields appear in the Properties panel. Empty containers show a green dashed “Drop components here” placeholder.

​

Overlay components

Some components do not render inline. Modal, Drawer, AlertDialog and Actionsheet appear instead as a small tab strip below the canvas frame, alongside a Page tab, so you can preview each one on demand. Selecting an overlay’s tab renders it over the canvas. A Drawer, for example, shows its semi transparent backdrop covering the rest of the page.

​

AI Assistant

The left panel’s default view, labelled “AI Assistant” in the UI with a BUILD badge next to the label. It shows four suggestion cards:

• Build a page, “Login, profile, settings…”
• Add components, “Buttons, inputs, cards”
• Add API, “Connect a REST endpoint”
• Add validation, “Email, required, length”

At the bottom is an “Ask AI…” text input with a + attach control, a Plan toggle, and a send button. The recording above is a real, unscripted session — it runs at automation speed with no narration. On a project with existing history, the four suggestion cards give way to the real conversation instead; a draft prompt is typed into the input to show what that looks like, then cleared without ever being sent, since submitting a real prompt would generate unpredictable content on a shared project rather than something safely revertible.

​

Component Tree

Reached by clicking the stacked layers icon in the left rail. It replaces the AI Assistant in the same panel slot. It is split into two stacked sections. Pages lists every screen in the project, with a count badge, a search box and an + Add Page control. Clicking a page swaps the Canvas to that page. The selected page’s tree lists every component already on that page, indented to match the real container nesting. In the project shown above that is Page → Box 1 → Text 1, Modal (→ Heading, Text 2), Drawer, AlertDialog, Actionsheet, Table, Badge 1, Row 6, Card (→ Badge 2, Column (→ Badge 3, Text 6), Row 7, ...). Container rows have an expand and collapse arrow and, on hover, a + to add a child directly from that row. Clicking any row selects that node, highlighting it on the canvas and loading its fields into the Properties panel.

​

Properties panel

Shows the fields for whatever is currently selected: a component, or the page itself when nothing else is selected. With a component selected, three tabs are always present.

• Style holds the component’s own fields plus universal Layout and Style sections. For a Badge the component’s own fields were Text content with a Bind shortcut, Variant with Solid and Outline, an Action dropdown, and Size with SM, MD and LG. Layout covers padding, margin and sizing. Style covers background, text colour, border and opacity. Selecting a different component type changes only the top part. A Drawer, for instance, showed Anchor with Left, Right, Top and Bottom, Size with SM, MD, LG and Full, and a Backdrop toggle, with the same Layout and Style sections underneath.
• Data holds a Data Bindings section. With no API connected it showed the guidance “Add API calls in the API panel to bind data to this component” alongside the field it can bind, for example a Text row accepting Text or @column.
• Actions holds grouped Event Actions. For the Badge, a Touch Events group listed On Tap, On Double Tap, On Long Press, On Touch Start and On Touch End, each with a + to attach an action.

​

Top bar

Spans the full width above the other three regions. On the left: a back arrow that returns to the projects list, and the project name. On the right, left to right: undo and redo icons, a play icon for preview, a Platform review icon, a ··· overflow menu, a save status indicator that reads Saved once changes are persisted, a notifications bell with an unread count badge, and the signed in user’s avatar.

​

Where to go next