Cursor 2.2: The Visual Editor That Changes Everything

The team at Cursor has just released something that could fundamentally change how we build web interfaces: a visual editor integrated directly into their AI-powered code editor.

This isn't just another design tool. It's a bridge between visual design and production code, all in the same window.

What's New in Cursor 2.2

The visual editor brings together your web app, codebase, and powerful visual editing tools. You can drag elements around, inspect components and props directly, and describe changes while pointing and clicking.

Rearrange with Drag-and-Drop

The visual editor lets you manipulate your 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 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.

Visual Controls for Styles

The 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

This is where it gets interesting. 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.

Why This Matters

Cursor's visual editor unifies work across design and code, helping developers better articulate what they want so that execution isn't limited by mechanics.

For agencies like ours, this represents a significant shift in how we approach frontend development. The gap between a designer's vision and the developer's implementation is now smaller than ever.

Our Take

We see a future where AI 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 visual editor is a step in that direction, and we're excited to integrate it into our workflow.

---

Want to leverage the latest AI tools for your project? Let's talk.