A visual editor for the Cursor Browser

Summary

Cursor has released a visual editor for its Browser that combines a web app, codebase, and visual editing tools in one window. Users can drag rendered elements across the DOM tree, inspect React component props, adjust styles and design-system color tokens, and interactively test layout, typography, and component variants. Point-and-prompt interactions let users select interface elements and describe changes such as resizing, recoloring, or reordering; agents run these prompts in parallel and make changes live within seconds. Once a visual arrangement is settled, the agent locates relevant components and updates the underlying code. The release positions the editor as a way to connect visual design and coding more directly, with features documented for Cursor 2.2.

Takeaways

1. 1

   Rendered elements can be rearranged directly across the DOM tree, enabling changes to button order, section rotation, and grid configurations.

2. 2

   The sidebar surfaces React component props and provides controls for color tokens, palettes, grids, flexbox layouts, typography, and live previews.

3. 3

   Users can issue prompts on multiple selected elements, with agents running requests in parallel and applying live changes within seconds.