A visual editor for Cursor, and what changed in 2026

The short history

Dates are from Cursor’s changelog and forum as of 6 October 2026. Cursor ships often; check the changelog for anything newer.

What Design Mode does today

Design Mode lives in the browser inside Cursor’s Agents window, not in the code editor. Open a browser tab, load your dev server, and toggle it with ⌘⇧D. Then, per Cursor’s docs, you can:

• click an element, or several;
• Shift-drag to box an area of the page;
• type or speak what you want changed.

The agent receives the element’s xpath, its React component, attributes, computed styles, props from the fiber tree and a screenshot, then edits your source. It works on your real running app, which is its big advantage: there is nothing to sync, because the thing you point at is the thing you ship.

Every change is a prompt, though. Making the heading 4 pixels smaller is a round trip through a model, with the cost and variance that comes with it.

What people are missing

The forum threads that rank for this search are mostly people asking for the direct editor back. From the thread about the inspector:

• “Making small tweaks is now a HUGE headache.”
• Prompting for every tweak “eat[s] into token usage.”

And on 27 September 2026 a Cursor staff member wrote that “designers and front-end developers regularly ask to bring back direct visual editing in Design Mode.” There has been no announcement that it is coming back.

The underlying point is fair. Some changes are judgement calls and an agent is the right tool. Others are a value: this colour, that size, these words. Sending a value through a model adds cost and a chance of getting something slightly different back.

Editing directly, beside Cursor

Caret is a free, open-source (Apache-2.0) desktop app that keeps your project’s design in the repo as real React, in a .caret/ folder next to your app. It is a separate app, not a Cursor extension, and it opens the same folder Cursor does.

The split is the one the forum keeps asking for:

• Values are direct. Retype a headline, pick a colour, swap an image, drag an edge to resize. Caret writes the change into the page’s .tsx file by editing its syntax tree. No model is involved, so it costs nothing and comes back exactly as you set it. A picked colour close to one of your tokens is written as the token, not a hex code.
• Judgement goes to an agent. For a change too fiddly to click, paint over the region and describe it. The agent gets the exact elements you marked.

The trade-off is honest to state: Caret edits the design layer, not your app. Your src/ is untouched until you sync, at which point Caret works out which design files changed and an agent makes the app match, in whatever framework the app uses. If you want to point at your live app and have it changed in place, that is what Design Mode is for. If you want a place to get the design right first, with every change as a reviewable diff, that is what Caret is for. They work together.

Using Caret with Cursor

Your tokens, in Cursor’s rules

Caret writes a rule file at .cursor/rules/caret-design-layer.mdc with alwaysApply: true in its frontmatter. Cursor applies always-apply rules to every chat session, so when you ask Cursor to build something, it already has your colours, type scale, spacing and radius. Caret rewrites that file whenever a token changes. It also keeps the same block in AGENTS.md, which Cursor reads too.

Cursor talking to Caret over MCP

Caret runs a local MCP server per open project, so an agent can read your pages and tokens and run the design-to-app sync. Caret generates the config for you (open a project, then Backend → Connect your own agent), because the port and token change every launch. For Cursor it goes in .cursor/mcp.json:

{
  "mcpServers": {
    "caret": {
      "type": "http",
      "url": "<URL from Caret>",
      "headers": { "Authorization": "Bearer <TOKEN from Caret>" }
    }
  }
}

MCP runs one way here. Cursor can call into Caret, but Caret cannot push work out to Cursor, so designing itself happens in Caret’s window, on Caret’s own backend. You sign that backend in with a provider you already have, such as a ChatGPT plan, GitHub Copilot, or an API key. The sync is the part you can hand to Cursor.

Questions

• Does Cursor still have a visual editor?

  It has Design Mode, which lets you select elements and areas in the built-in browser and describe changes for the agent. The direct CSS inspector panel was removed in 2026.

• Is Caret a Cursor extension?

  No. It is a standalone desktop app for macOS, Windows and Linux. It works alongside Cursor by sharing the repo, the rules file and an MCP connection.

• Does it work if my app is not React?

  The design layer in .caret/ is always React. The app it syncs into can be whatever you already ship: Next, Remix, Vue, Svelte, Rails.

• What about Onlook or Stagewise?

  Onlook (Apache-2.0) is a open-source visual editor for Next.js and Tailwind apps; the team is now building a hosted product, in early access. Stagewise (AGPL-3.0) describes itself as an open-source agentic IDE. Both edit your app directly; Caret keeps a separate design layer you sync from.