Visual Style Editing Is Here, Including Responsive Breakpoints

Changing a font size, adjusting spacing, or reducing a corner radius makes up much of everyday editing. Previously, these changes followed the same workflow as rebuilding an entire section: describe the change to AI and wait. It was slow and used credits.

This release puts those controls back in your hands. The editor now includes visual style editing, so common styles can be adjusted directly with instant feedback and no AI credits.

How to use it

Double-click any element to open the editing panel, then select the palette icon in the top-right corner to enter Design mode. The style controls appear below.

You can currently edit:

• Typography: color, font size, and weight
• Background: background color
• Box model: padding, margin, and border radius
• Layout: gap, including horizontal and vertical values

Each property combines an input with preset choices. Pick a common value or enter a custom one. The remove button clears the class and returns the property to its inherited state, rather than adding another override.

Responsive breakpoints

Properties such as font size, weight, and radius can be configured per breakpoint. Choose default, sm, md, lg, xl, or 2xl and add values as needed, so desktop and mobile no longer have to compromise.

Use this with page canvases for an even clearer workflow. Add multiple viewport canvases from the page title bar and compare several breakpoints side by side while editing.

See where a style comes from

The hard part is often not changing a value but understanding why an edit has no effect. The value may come from a parent or theme. The panel now identifies each source:

• Inherited from an ancestor: click the label to select the element where the style is actually defined.
• From a theme color: the panel explains that changing the variable affects every element using that theme color. Use a specific color instead when you only want to change one element.

Hovering or focusing padding and margin inputs also highlights the corresponding box-model area on the canvas.

Changes write back to source

Style edits update the Tailwind classes in the page source. They use the same code as AI-generated edits, with no hidden override layer. When AI edits the page later, it sees the real state you created.

Additional fixes

• Mixed text can now be selected: double-clicking text mixed with inline elements now falls back to the parent element so size, color, and weight remain editable.
• Title panels now open reliably: fixed validation getting stuck when className contained trailing spaces.
• A smoother editor: moving elements no longer rebuilds the entire structure tree. Selection and hover outlines remain more stable on animated and scrolling pages.

The more routine work direct editing can handle, the more AI credits remain available for meaningful changes such as restructuring layouts, adding sections, and improving content.