Skip to main content

Edit Panel

The edit panel is on the right side of the builder. It shows controls for whatever is currently selected. If the panel is collapsed, press ⌘E / ⌃E or click the arrow on the right edge to expand it.

Page Settings​

When no element is selected, the edit panel shows page-level settings like background color, default typography, and spacing.

Page Settings

Element Selected​

Click any element on the canvas to select it. The edit panel updates with two tabs: Style and Properties.

Style Tab​

The Style tab controls the visual appearance of the selected element. It is organized into collapsible sections.

Style Tab

Layout​

Set the display mode (block, flex, grid, none), overflow, float, and position.

Layout

Size​

Set width and height as fixed (px), percentage (%), or auto. Toggle between horizontal and vertical dimensions. Also set min/max boundaries.

Size

Spacing​

Control padding (inside) and margin (outside) using the visual box model. Switch between the Padding and Margin tabs to set values for each side.

Spacing

Typography​

Control font family, size, weight, line height, letter spacing, color, alignment, style (italic), text transform (uppercase, lowercase, capitalize), and decoration (underline, strikethrough).

Typography

Background, Border, Effects, and More​

Below the main sections, you will find additional collapsible sections. Click the + icon next to each to expand it:

  • Background - solid color, gradient, or background image
  • Border - width, color, style, and border radius
  • Effects - box shadow, text shadow, opacity, blur
  • Transitions - animate property changes
  • Cursor - set the cursor style on hover
  • Advanced - custom CSS classes and attributes

Properties Tab​

The Properties tab shows settings specific to the selected element type. Different elements show different properties.

Properties Tab

For example, a heading element shows:

  • General - element tag (h1, h2, etc.), ID, tooltip, data attributes
  • Accessibility - ARIA attributes
  • Text - font settings and the text content

An image element would show source URL and alt text instead. A link would show href and target. The Properties tab adapts to whatever element type you have selected.

Copy and Paste Styles​

Copy the style from one element and apply it to another:

  1. Select the source element.
  2. Press ⌘⌥C / ⌃⌥C to copy the style.
  3. Select the target element.
  4. Press ⌘⌥V / ⌃⌥V to paste the style.