We’re excited to release a visual editor for the Cursor Browser. It brings together your web app, codebase, and powerful visual editing tools, all in the same window. You can drag elements around, inspect components and props directly, and describe changes while pointing and clicking. Now, interfaces in your product are more immediate and intuitive, closing the gap between design and code.
Rearrange with drag-and-drop
The visual editor lets you manipulate a site’s layout and structure directly by dragging and dropping rendered elements across the DOM tree.
This unifies visual design with coding. You can swap the order of buttons, rotate sections, and test different grid configurations without ever context-switching. Once the visual design matches what you had in mind, tell th…
We’re excited to release a visual editor for the Cursor Browser. It brings together your web app, codebase, and powerful visual editing tools, all in the same window. You can drag elements around, inspect components and props directly, and describe changes while pointing and clicking. Now, interfaces in your product are more immediate and intuitive, closing the gap between design and code.
Rearrange with drag-and-drop
The visual editor lets you manipulate a site’s layout and structure directly by dragging and dropping rendered elements across the DOM tree.
This unifies visual design with coding. You can swap the order of buttons, rotate sections, and test different grid configurations without ever context-switching. Once the visual design matches what you had in mind, tell the agent to apply it. The agent will locate the relevant components and update the underlying code for you.
Test component states directly
Many modern apps are built in React, where components have properties to control different component states. The visual editor makes it easy to surface these props in the sidebar so you can make changes across different variants of a component.
Adjust properties with visual controls
The visual editor sidebar lets you fine-tune styles with sliders, palettes, and your own color tokens and design system. Every tweak is fully interactive: live color pickers that preview your choices, as well as controls to rearrange grids, flexbox layouts, and typography with precision.
Point and prompt
The visual editor also lets you click on anything in your interface and describe what you want to change. You could click on one element and say, "make this bigger," while on another you prompt, "turn this red," and on a third you type, "swap their order." The agents run in parallel, and within seconds your changes are live.
Up the abstraction hierarchy
Cursor’s new visual editor unifies your work across design and code, helping you better articulate what you want so that execution isn’t limited by mechanics.
We see a future where agents are even more deeply connected to building apps on the web, and humans express their ideas through interfaces that connect thought to code more directly. These features are a step in that direction.
Read the Browser docs. Learn about all the new features in Cursor 2.2.