Skip to main content
Back to Blog
builder editor sidebar configuration

Sidebar Editing Mode

Swifty Team Feb 22, 2026 2 min read

Component configuration needs to happen in context. When you're adjusting a data table's column settings, you want to see the data table while you're configuring it. When you're tweaking a panel's styling, you want to see the panel respond to your changes.

The sidebar editing mode keeps the canvas visible while configuration happens in an adjacent panel.

Select, Configure, See

Click any component on the canvas to select it. The sidebar opens (or updates if already open) to show the settings for that component. Make changes in the sidebar; see them reflected on the canvas.

The canvas and the sidebar occupy the screen simultaneously — the sidebar doesn't cover the canvas, doesn't require a modal, doesn't navigate away from the page you're building. The work context stays intact throughout configuration.

Organized Settings

Component settings in the sidebar are organized into logical groups. A data table's sidebar might have sections for: Data Source (what query provides the records), Columns (which fields to show and in what order), Filters (default filter conditions), Display (row height, striping, borders), and Actions (what row actions to expose).

Settings that don't apply to the current configuration are hidden. If a component doesn't support a particular setting in its current mode, that setting section is absent — no visual clutter from irrelevant options.

Linked Directly to the Selected Component

The sidebar always reflects the currently selected component. Click a different component on the canvas — or in the layer panel — and the sidebar updates to show that component's settings. There's no ambiguity about which component you're configuring.

When nothing is selected, the sidebar shows page-level settings: the page's name, its URL pattern, its layout settings.

Applied Without Saving

Changes made in the sidebar apply to the preview immediately. The page preview updates as you change settings — before you've saved the page. This gives you a genuine preview of the result before committing the change.

Closing the builder without saving discards any unsaved changes. The preview is always clearly marked as unsaved when there are pending changes.

Related posts

Composed Data Sources

Chain and relate data sources for rich dashboards — compose complex data views from simpler sources without writing code.

Computed Expressions

Transform data with template expressions and built-in functions — format, combine, and derive values from your data without code.

Cross-Source Data Joins

Combine data from multiple sources in one view — join records from your database with data from external services using a shared key.