Does Cursor Copy Trae? Inside the New Visual Editor Turning IDEs into Full‑Featured Browsers

Cursor Visual Editor: Not Just a Preview

According to Cursor's official blog, the Visual Editor aims to "bring the distance between design and code to zero" by embedding a reinforced browser that lets users drag, drop, and edit elements directly in the preview window.

Core Features

What‑You‑See‑Is‑What‑You‑Get Dragging : Drag DOM elements in the preview and Cursor automatically updates the code structure.

Visual Property Editing : Adjust colors, spacing, and Flex layout in a side panel without writing CSS, similar to design tools.

Point and Prompt : Click any element and tell the AI (e.g., "make this red" or "enlarge that"), and Cursor locates the corresponding code and applies the change.

To test the feature, the author used a prompt from ChatGPT‑5.2 to generate an interactive holiday card.

Create a single-page app, in a single HTML file, that demonstrates a warm and fun holiday card! The card should be interactive and enjoyable for kids!
- Have variety of items kids can drop in the UI; a few should be already placed by default
- Also have fun sound interactions
- Place many cute and fun stuff as much as possible
- Animation like snowdrop should be used nicely

writefile card-gpt5-2.html

Cursor's Performance

After feeding the prompt to Cursor with the GPT‑5.2 model, code was generated but the preview window did not open automatically; the author had to request it. The preview works only over HTTP, not local file URLs.

The generated page includes snowflake effects and draggable gift elements, delivering a pleasant visual result.

The most surprising part was the editing experience. Clicking an element brings its properties into the right‑hand panel, where computed styles can be inspected and margins or padding adjusted via sliders; the underlying code updates instantly.

Dragging is not perfectly smooth, but an undo feature allows reverting unwanted changes.

Cursor also integrates Network and Console panels, eliminating the need to Alt‑Tab between an IDE and Chrome DevTools.

This all‑in‑one window is convenient for debugging API requests, viewing errors, and fine‑tuning styles, though a larger monitor is advisable.

Comparison with Trae: Which Is Better?

Trae's SOLO mode focuses on a "preview + conversation" workflow: open a preview, select an element, send a chat command to the AI, and the change is applied. It supports opening previews via the file protocol.

Cursor builds on this foundation with deeper functionality:

Drag‑and‑Drop Layout : Reposition elements directly.

CSS Property Editor : Change colors and spacing in the side panel without touching code.

Chrome DevTools Integration : View network requests and console errors inside the IDE.

In short, Trae saves the "switch window to see the effect" step, while Cursor also removes the "switch window to debug or design" steps.

Cursor's ambition is to close the entire front‑end development workflow inside the IDE.

Conclusion

Trae was the early mover that first let developers preview without leaving the editor. Its later focus appears to remain on refining the SOLO conversational mode rather than expanding browser capabilities.

Cursor takes the next step: it not only replicates Trae's preview features but also attempts to embed full design‑dragging, CSS editing, and DevTools debugging, aiming to make the IDE a "Browser for Coding".

Although the experience still has rough edges, the direction is compelling, especially for front‑end developers or full‑stack engineers who enjoy tinkering with UI.