Learn the Subframe editor interface and navigate between editing modes.
The Subframe editor is where you design pages, build components, and export production-ready code. Switch between all four modes, depending on your task.
Toggle left panel buttons with Cmd + \. You have the following panels available to you:Pages — Switch between pages and flows in your project. Navigate to different designs or subcomponents when editing components.Layers — View and organize the element hierarchy for the current page. Select, reorder, or group elements. Shows the complete component tree.Insert — Browse and insert components and snippets. Search or drag elements onto the canvas. Switches between snippet and component libraries.
Your design surface where elements appear at their actual rendered size. The canvas shows exactly how your design will look at the current breakpoint (desktop or mobile).Unlike infinite canvas tools, Subframe uses flexbox for layout (not absolute positioning). Elements flow and arrange using Stacks, resize responsively, and adapt to different screen sizes automatically. If you’re familiar with Figma, this works similarly to auto-layout.
This is the context-aware properties panel that changes based on editor mode and selected element.For example, in design mode, you’ll see layout, sizing, colors, backgrounds, borders, shadows, padding, overflow, and component properties. In code mode, you’ll see the Inspect tab, which shows the code for the selected element.
Switch between desktop (default) and mobile views using the device selector in the Inspector panel.
Desktop view (default) — Design for desktop and tablet screens. Elements use their base flex properties.Mobile view (768px) — Add mobile-specific overrides for properties that need different values on small screens.We recommend you design for desktop first, then add mobile overrides only where needed.
