Cursor has been one of the pioneers of the vibe coding revolution, but it’s now taking things a step further.
The AI code editor has introduced a visual editor for its Cursor Browser that bridges the gap between design and development. The new tool enables developers to manipulate web interfaces through drag-and-drop interactions while AI agents automatically update the underlying code.
The visual editor represents a significant evolution beyond simple text-based AI coding assistants. Rather than just generating code from prompts, developers can now directly interact with rendered web applications, rearranging layouts, adjusting properties, and testing component states through an intuitive visual interface—all while Cursor’s AI handles the code modifications in the background.
Direct Manipulation of Web Interfaces
The centerpiece of the new visual editor is its ability to let developers drag and drop rendered elements across the DOM tree. This means users can swap button orders, rotate sections, and test different grid configurations by physically moving elements on screen. Once the visual design matches their vision, they can instruct the AI agent to apply the changes, which then locates and updates the relevant components in the codebase.
This approach eliminates the traditional context-switching between design tools, browsers, and code editors. The visual editor operates within the same window as the codebase and web application, creating what Cursor describes as a more immediate and intuitive interface development experience.
Component State Testing and Property Controls
For React applications, the visual editor surfaces component properties directly in a sidebar, making it easy to modify different component states and variants. This is particularly useful for testing how components behave across different configurations without diving into code.
The sidebar also provides visual controls for fine-tuning styles, including sliders, color palettes, and integration with existing design tokens and design systems. All adjustments are interactive, with live color pickers and controls for manipulating grids, flexbox layouts, and typography with precision.
Point-and-Prompt Interaction Model
Perhaps the most innovative feature is the “point and prompt” capability. Developers can click on any element in their interface and describe desired changes in natural language. Multiple prompts can be issued simultaneously—asking to make one element bigger, turn another red, and swap the order of a third—with AI agents executing these changes in parallel within seconds.
This interaction model represents what Cursor calls moving “up the abstraction hierarchy,” where developers express intent rather than manually coding every detail. It’s a natural evolution of the vibe coding approach that has made Cursor popular among developers who prefer describing outcomes rather than writing every line of code.
The Broader Vision
The visual editor is part of Cursor 2.2 and builds on the company’s existing browser control capabilities. Cursor’s browser feature already enables AI agents to take screenshots, debug client-side issues, and test applications. The visual editor extends these capabilities into the realm of active design manipulation.
In the announcement, Cursor positioned the visual editor as a step toward 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.” This vision aligns with the broader industry trend of AI tools that reduce the technical barriers between conceptualization and implementation.
The release comes as Cursor and similar tools like Replit and Lovable have been enabling designers, artists, and non-traditional coders to build applications through natural language prompts. The visual editor adds a visual manipulation layer on top of this prompt-based approach, potentially making interface development accessible to an even wider audience.
For developers already using Cursor’s browser features, the visual editor is available now as part of the platform’s continuous evolution toward more intuitive, AI-assisted development workflows. The company has published full documentation for the browser capabilities and the new visual editing features as part of the Cursor 2.2 release.