Skip to content
Cursor Handbook

Visual editor

A layout and style editor that sits over your running app and hands its changes to the agent to write into code.

  • Agent modes
  • Every plan, inside the Cursor browser. Shipped December 2025.

Checked against cursor.com on 25 September 2026

What it does

The visual editor puts the running web app, the codebase, and a set of direct manipulation tools in one window. You drag rendered elements around the DOM tree to reorder buttons, rotate sections, or try a different grid, then tell the agent to apply it and the agent finds the components and updates the source.

For React applications the sidebar surfaces component props, so you can flip a component between its variants and see each state without writing a story or a test harness. Style controls cover the rest: sliders, live colour pickers wired to your own tokens and design system, and precise controls for grid, flexbox and typography.

Point-and-prompt still works alongside the controls. Click one element and say make this bigger, click another and say turn this red, click a third and ask to swap their order. Those agents run in parallel rather than queueing.

Worth knowing

  • Prop inspection depends on a React fiber tree being present, so the sidebar is richest on React apps and thinner elsewhere.
  • Changes are previewed live but only become code when the agent applies them, which means an unapplied experiment costs nothing and leaves no diff.

Checked against A visual editor for the Cursor Browser on 25 September 2026.

Frequently asked questions

Does the visual editor edit my code directly?
Not on its own. You manipulate the rendered page, and when the arrangement is right the agent locates the relevant components and writes the change into source. That keeps an approval step between a drag gesture and a commit.
Can it use my design tokens?
Yes. The style sidebar reads your own colour tokens and design system so picker choices stay inside the palette the project already uses.
How is this different from Design Mode?
Design Mode is about conveying intent by pointing, drawing, or speaking, and letting the agent decide the implementation. The visual editor gives you direct controls, drag-and-drop, sliders, prop toggles, so you set the result yourself and the agent transcribes it.

Keep reading