Introducing Cursor Browser's Visual Editor: Bridging Design and Code

We are thrilled to announce the release of a visual editor for the Cursor Browser. This innovative tool seamlessly integrates your web application, codebase, and powerful visual editing capabilities within a single window. Users can effortlessly drag and drop elements, directly inspect components and their properties, and articulate changes through simple point-and-click interactions. This enhancement makes product interfaces more immediate and intuitive, effectively bridging the gap between design and code.

Rearrange with Drag-and-Drop

The visual editor empowers you to directly manipulate a site's layout and structure by dragging and dropping rendered elements across the Document Object Model (DOM) tree. This feature unifies visual design with the coding process, allowing you to reorder buttons, rotate sections, and experiment with various grid configurations without any context-switching. Once the visual design aligns with your vision, you can instruct the agent to apply these changes, and it will automatically locate the relevant components and update the underlying code.

Test Component States Directly

Many modern applications are built using React, where components often utilize properties (props) to manage different states. The visual editor simplifies this by surfacing these props directly in a sidebar, enabling you to easily modify and test changes across various component variants.

Adjust Properties with Visual Controls

The visual editor's sidebar offers comprehensive visual controls for fine-tuning styles, including sliders, color palettes, and integration with your custom color tokens and design system. Every adjustment is fully interactive, featuring live color pickers for instant previews and precise controls for arranging grids, flexbox layouts, and typography.

Point and Prompt

With the visual editor, you can click on any element within your interface and describe the desired change. For instance, you might click an element and instruct, "make this bigger," or select another and prompt, "turn this red," or even type, "swap their order" for a third. These commands are processed in parallel by intelligent agents, bringing your changes to life within seconds.

Elevating the Abstraction Hierarchy

Cursor's new visual editor fundamentally unifies the design and code workflows. It facilitates clearer articulation of design intentions, ensuring that execution is not hindered by technical mechanics. We envision a future where intelligent agents are even more deeply integrated into web application development, allowing humans to express their ideas through interfaces that connect thought directly to code. These new features represent a significant stride toward that future.