Builder Redesign: Canvas + Sidebar
The builder is the most-used tool for customizing Swifty applications. It shapes how quickly you can make changes, how clearly you can see what you're doing, and how confidently you can explore without fear of breaking things. Getting the builder experience right matters more than almost anything else.
We've redesigned it.
Canvas on the Left, Controls on the Right
The new builder layout is a classic two-panel design: the page canvas occupies the majority of the screen, and a configuration sidebar sits on the right. Select any component on the canvas — click on it — and its configuration options appear in the sidebar.
This separation is deliberate. When editing, your eye stays on the canvas. You can see the actual page, in its actual layout, at actual scale. The sidebar holds controls without obscuring what you're editing.
Why This Approach Works
Inline editing — where configuration controls appear directly over the component being edited — can feel fast initially. But it has problems. Controls overlay the content they're supposed to be shaping. Making configuration changes to a selected element while seeing how it affects the layout requires constant eye movement between a small control and its effect. On dense pages, controls overlap neighboring components.
The canvas-plus-sidebar model avoids all of this. The canvas shows the truth; the sidebar holds the controls. You can see both simultaneously because they don't compete for space.
Inspired by Tools That Got This Right
Monitoring and analytics tools pioneered this pattern for dashboard building. The principle translates directly to page building: a stable canvas where you see the result, a sidebar where you control the configuration. The pattern works for the same reasons in both contexts.
Component Selection and Hierarchy
The sidebar includes a component hierarchy panel that shows the structure of the current page as a tree. Click a component in the tree to select it on the canvas. Click a component on the canvas to highlight it in the tree. Both representations stay in sync.
The hierarchy panel is particularly useful on complex pages where nested components can be hard to click precisely. Selecting through the tree is always exact.
Live Preview
Changes made in the sidebar reflect on the canvas immediately. Add a column to a table, and the table on the canvas gains the column. Change the layout from two columns to three, and the grid rearranges. You see the result of each change as you make it — no "preview" button required.
The canvas is always the current state of the page. What you see is what will be published.