Cursor just changed how developers build web interfaces. The AI-powered code editor released a visual editor in December 2025 that lets you drag, resize, and style elements on screen while AI automatically updates your code.
No more switching between design tools and your IDE. No more copying hex codes from Figma and hunting through CSS files. The new visual editor brings everything into one window—your running web app, your codebase, and powerful visual controls that write code for you.
What the Visual Editor Does
The visual editor brings together your web app, codebase, and powerful visual editing tools in the same window, letting you drag elements around, inspect components and props directly, and describe changes while pointing and clicking.
Think of it as Chrome DevTools meets Figma, powered by AI. You see your web app running live. Click any button, heading, or section. Then drag it to a new spot, change its color with a picker, or simply tell the AI what you want. The code updates automatically.
The editor lets you manipulate your site's layout and structure directly by dragging and dropping rendered elements across the DOM tree. Want to swap two buttons? Just grab one and move it. Testing different grid layouts? Drag sections around until they look right. The AI agent watches your changes and modifies the underlying code to match.
For React developers, the visual editor surfaces component props in a sidebar. It automatically detects React component props and displays them in a sidebar panel, allowing you to change component variants like primary or secondary button styles from a dropdown without editing code manually.
How It Works Behind the Scenes
The visual editor sits inside Cursor Browser, which is built into the Cursor IDE. When you open your project, you can launch your web app in this browser alongside your code files.
The browser includes a sidebar packed with visual controls. Click on any element, and the sidebar shows you:
- Color pickers with live previews
- Sliders for spacing, sizing, and opacity
- Font controls for typography
- Flexbox and grid layout options
- Component state toggles for React apps
Every adjustment you make triggers Cursor's AI agent. The agent finds the relevant code—whether that's a CSS file, a React component, or a style object—and updates it. Your changes persist because they're written directly into your codebase.
Once the visual design matches what you had in mind, you tell the agent to apply it, and the agent locates the relevant components and updates the underlying code.
Point and Prompt: Natural Language Design
The most striking feature is what Cursor calls "point and prompt." Click on an element, then describe what you want in plain English.
"Make this heading bigger." "Turn this button red." "Add 20 pixels of spacing below this section."
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 approach speeds up small tweaks dramatically. Instead of opening a CSS file, finding the right selector, and typing new values, you just point and speak. The AI handles the rest.
Who Benefits Most
Web developers gain the most obvious advantage. The visual editor cuts down context switching. You no longer need to jump between your IDE, browser, and design tools just to adjust a margin or test a color.
Frontend teams working on React apps get extra value. The component props feature lets you test different states without touching code. Want to see how your button looks in its disabled state? Just toggle it in the sidebar.
Designers can now make changes directly to production code. If you understand basic web concepts but don't write CSS regularly, the visual controls let you adjust typography, colors, and spacing without learning specific syntax.
Product managers and founders building MVPs can prototype faster. Combined with Cursor's AI code generation, you can create a basic structure with prompts, then polish the visual details using the editor.
Real-World Speed Gains
Jason Ginsberg, Cursor's Head of Product Engineering, demonstrated this capability at a WIRED office presentation, clicking on elements and dictating changes while the code updated in real-time.
Early users report significant time savings. One developer mentioned redoing a pricing page in 11 minutes instead of 90 using the drag-and-drop features. The visual editor works best with straightforward layouts using margin-based spacing and vanilla CSS.
The tool particularly shines for iteration. Need to show your team three different layout options during a meeting? Make the changes live, take screenshots, and you have concrete proposals instead of abstract descriptions.
Technical Details and Compatibility
The visual editor ships with Cursor version 2.2 and later. It works best with React-based web apps, though it supports other frameworks.
To use it:
- Install or update Cursor from cursor.com
- Open your web project in Cursor
- Launch the Cursor Browser
- Enable visual editing mode
- Start clicking, dragging, and styling
The editor integrates with your existing design system. If you use design tokens or CSS variables, the visual controls can work with them, though some users note that hex codes produce more reliable results than CSS variables.
All code changes happen locally in your project files. The AI doesn't send your code to external servers during visual editing—it processes changes using Cursor's built-in AI capabilities.
Current Limitations
The visual editor excels at layout and style changes but has rough edges. Some developers report bugs with certain CSS features, particularly complex grid layouts and custom font handling.
The tool works best with simpler layout systems. If your project uses advanced CSS Grid with fractional units or complex flexbox patterns, you may encounter issues where the drag-and-drop doesn't behave as expected.
Every change involving the AI agent consumes usage credits. This matters because Cursor's pricing is based on credits that vary by your subscription plan. Making dozens of tiny visual tweaks could add up if you're relying on AI prompts instead of manual slider adjustments.
Some developers in online discussions questioned whether AI agents are necessary for small design changes, pointing to cost concerns.
The visual editor primarily handles one-way updates—from visual changes to code. It doesn't yet support pulling in designs from external tools like Figma, though Cursor does integrate with Figma through its MCP protocol for design tokens.
The Bigger Design-to-Code Shift
Ryo Liu, Cursor's Head of Design, explained that designers used to live in their own world of pixels and frames, and that didn't translate directly to code, creating friction in handoff processes. The visual editor aims to unify these worlds in a single interface with a single AI agent.
This represents a broader industry trend. Multiple companies are building tools that blur the line between design and development. Replit and Lovable let users build apps through natural language. Shuffle provides visual editing for component libraries. Onlook offers similar visual-to-code features for designers.
Cursor's approach differs by focusing on existing codebases. Rather than generating new code from scratch, the visual editor modifies what you've already built. This matters for professional teams working on established projects.
Pricing and Availability
The visual editor is available now to all Cursor users with version 2.2 or later. Cursor offers several plans:
- Free Hobby plan (limited features, no visual editor)
- Pro plan at $20 per month (includes visual editor)
- Business plan at $40 per user per month (adds team features)
The visual editor uses your plan's AI credits. Different AI models consume different amounts of credits, and the exact cost per operation depends on which model you choose and how complex the change is.
Developer Reactions and Feedback
Response from the developer community has been mixed. Many praise the speed and convenience of visual editing. The ability to see changes instantly while the code updates in the background reduces friction significantly.
Others raise concerns about the rapid pace of feature releases. Some users noted that developers are obsessed with shipping new features while critical bugs introduced by updates are completely ignored. These critics point to issues with chat management, navigation, and code integrity that emerged with recent updates.
Cursor's developers stated that they don't really have a roadmap because the world is changing faster and faster, with new models dropping every day. This fast-moving approach attracts developers who want cutting-edge features but frustrates those who value stability.
Best Practices for Using the Visual Editor
Start with simple layouts when learning the tool. Test it on a basic page with straightforward CSS before applying it to complex components. This helps you understand what works reliably.
Use the visual controls for colors, spacing, and typography rather than AI prompts when possible. These direct manipulations don't consume AI credits and provide more precise control.
For React developers, consider prefixing your component props with a consistent pattern. Some users found that using specific prefixes helps the visual editor detect and display props more reliably.
Review the code changes the AI makes. While the visual editor usually produces clean updates, AI agents can sometimes generate verbose or redundant code. A quick check ensures your codebase stays maintainable.
Save your work frequently. As with any beta feature, occasional bugs may cause unexpected behavior. Regular commits give you a safety net.
Comparing Cursor Visual Editor to Other Tools
Figma remains the standard for creating design mockups, but it lives in a separate world from your code. You design in Figma, then developers implement those designs manually. Cursor's visual editor works in reverse—you edit existing code visually.
Webflow and similar website builders let you design visually but generate their own code structures. Cursor works with your existing codebase, preserving your architecture and design system.
Chrome DevTools lets you experiment with styles in the browser, but changes disappear when you refresh. Cursor's visual editor writes changes directly to your source files, making them permanent.
The visual editor positions itself as a middle ground—more powerful than DevTools for persistent changes, more integrated than Figma for developers, and more flexible than website builders for professional projects.
What This Means for AI-Assisted Development
The visual editor represents what Cursor calls "vibe coding"—describing what you want rather than typing exact syntax. The term was coined by OpenAI co-founder Andrej Karpathy and named Word of the Year 2025 by Collins Dictionary.
This interaction model represents what Cursor calls moving up the abstraction hierarchy, where developers express intent rather than manually coding every detail.
We're seeing a shift in how people interact with code. Traditional programming requires learning syntax, language rules, and framework patterns. AI-assisted tools like Cursor's visual editor let you focus on outcomes instead.
You don't need to remember whether a CSS property uses dashes or camelCase. You don't need to look up flexbox syntax. You just say what you want, or drag things around, and the AI handles the technical details.
This doesn't replace programming knowledge for complex features. But it removes friction for routine visual tasks, letting developers spend mental energy on harder problems.
Getting Started Today
If you're curious about the visual editor, the easiest way to try it is downloading Cursor and opening a simple web project. The Pro plan ($20/month) gives you full access to visual editing features.
The learning curve is gentle if you're already familiar with web development concepts. The interface resembles Chrome DevTools, making it immediately recognizable to most developers.
For teams considering adoption, start with a low-stakes project. Use the visual editor for UI polish after you've built the core functionality. This approach lets you evaluate the tool's strengths and limitations without risking production code.
The Future of Visual Coding
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.
The visual editor is part of a larger transformation in software development. As AI capabilities improve, tools will increasingly understand intent and handle implementation automatically.
We're moving toward a world where building software looks more like conversation and manipulation than typing. The visual editor is one step in that direction—combining familiar visual design patterns with AI-powered code generation.
Whether this vision fully materializes remains to be seen. But Cursor's visual editor demonstrates that the technology already exists to blend visual design and code editing in ways that weren't possible even a year ago. For developers willing to adopt new workflows, the productivity gains are real and measurable.