Feature request for product/service
Cursor IDE
Describe the request
When building frontends, it would be extremely helpful to have a “click-to-source” or “inspect-to-code” feature that bridges the Cursor Browser / Visual Editor directly to the code editor.
The desired workflow:
- Run the app in the Cursor Browser or Visual Editor.
- Click an element (or use an inspect tool) in the rendered UI.
- Cursor automatically opens the file and scrolls to the exact line (or closest definition) that renders that element in the editor.
This is similar to how some visual tools (like Figma’s Make (screenshot below) mode or certain design-to-code tools) let you select an element in a live preview and instantly jump to the underlying source for fast, precise edits.
Why this is useful:
- Avoids hunting through component trees or doing text searches just to find where a specific button, section, or text is defined.
- Great for quick copy edits, style tweaks, and layout adjustments when you already know exactly what you want to change.
- Makes Cursor feel like a truly bidirectional UI–code environment: not only can the agent change code based on UI context, but the UI can act as a precise navigator back into code.
Potential behavior details:
Clicking an element in the Browser/Visual Editor could:
- Open the primary React/Vue/Svelte component (or template) responsible for that DOM node.
- Highlight the JSX/HTML block or styled component that maps to the selected element.
- Optionally show a small overlay with “Open source” / “Reveal in editor” / “Jump to component” actions.
If there are multiple candidate sources (e.g., higher-order components, wrappers), Cursor could:
- Pick the most specific component by default, and
- Offer a small dropdown or quick-pick list to jump to parent/child components.
How this differs from current behavior
- Right now, selecting or inspecting an element in the Cursor Browser/Visual Editor mainly feeds that element into the AI context so the agent can infer and apply code changes. That is powerful, but:
– Sometimes the user wants to manually make small edits (e.g., tweak logic, refactor code, adjust a complex style) directly in the file.
–A deterministic “inspect → open file and line” action would complement the AI-driven flow and give more control to users who prefer editing code themselves.
Request
Please add a native feature that allows:
- Selecting/inspecting an element in the Cursor Browser or Visual Editor.
- Triggering a command like “Open Source for Selected Element” that opens the corresponding file and positions the cursor at the relevant line.
Even an initial version that is “best effort” (with a quick-pick when ambiguous) would dramatically improve the frontend dev workflow and make Cursor’s visual tools even more powerful.
