Cursor Browser Visual Editor — Design Mode for Your Live App
Cursor Team · Cursor Blog ·
Cursor's official Visual Editor turns the in-browser preview into a design surface: drag-and-drop layout edits across the DOM, a Figma-style inspector for spacing, color, typography and design tokens, React state toggles, and a point-and-prompt flow that an agent commits back to real code.
Publisher summary
The visual editor brings web app, codebase, and visual editing into one window — edit your live app directly, then let the agent persist the changes as real, reviewable code.
In this article
- Drag-and-drop layout editing across the DOM tree
- Visual style controls: spacing, color, typography, shadows, radius
- Design tokens and design-system integration
- React component state testing (loading, error, disabled)
- Point and prompt: describe a change in natural language
- The Apply step: client-side overrides become real code
Source: Cursor Blog
Read original ↗ Content lives on the original publisher's site.
Curated for the Cursor-Design community as a first-party reference on designing with Cursor.