# Select to edit

> Select to edit pins your next prompt on code.extension.dev to one element in the running preview, with its selector and the file that probably draws it.

Canonical: https://docs.extension.dev/code/select-to-edit
This page as Markdown: https://docs.extension.dev/code/select-to-edit.md
Section: Code
Siblings: [AI generation](https://docs.extension.dev/code.md) · [Terminal](https://docs.extension.dev/code/terminal.md) · [Chat mode](https://docs.extension.dev/code/chat-mode.md) · [Starters and templates](https://docs.extension.dev/code/starters.md) · [Live preview](https://docs.extension.dev/code/preview.md) · [The Code tab](https://docs.extension.dev/code/code-tab.md) · [Build console](https://docs.extension.dev/code/build-console.md) · [Checkpoints](https://docs.extension.dev/code/checkpoints.md) · [Drafts](https://docs.extension.dev/code/drafts.md) · [Firefox engine](https://docs.extension.dev/code/firefox-engine.md) · [Download and run locally](https://docs.extension.dev/code/download-and-run.md) · [Share links](https://docs.extension.dev/code/share.md) · [Publish and import](https://docs.extension.dev/code/publish.md) · [Generation allowance](https://docs.extension.dev/code/allowance.md) · [Settings and sign-in](https://docs.extension.dev/code/settings.md)
Map of every page: https://docs.extension.dev/llms.txt · Whole corpus: https://docs.extension.dev/llms-full.txt

---

# Select to edit

Select to edit lets you point at an element in the running preview instead
of describing it. Reach for it when a prompt would otherwise start with
"the second button on the left".

## Quick start

Press **Select to edit** in the actions bar above the preview. The label
reads **Picking** while it is active. Click the element you mean, then type
what should change and send it. The prompt arrives with the element's
selector and the file that probably draws it.


## How it works

### What a pick captures

A click records the surface the element is in, a CSS selector, the tag, the
id, the classes and the visible text. It then scores every source file for
those identifiers and names the best match as the probable file. A file
earns points for the element's id, for each class, for the visible text and
for matching the surface, so a popup button usually resolves to the popup's
own script or page.

### How the prompt carries it

In the terminal, the prompt line is prefilled with the element and its file,
such as `button#inc in popup.html - `, and you type the change after it. In
chat mode a chip above the prompt reads **Editing** followed by the element
and its file, and the X button next to it clears the selection. On send, the
answer's context tells the model that the request refers to this element and
names the likely source file.

Picking turns off once the prompt is sent, so the next prompt is about the
whole project again unless you pick again.

## Reference

| Captured | Example |
| --- | --- |
| Surface | `popup` |
| Selector | `button#inc` |
| Tag, id and classes | `button`, `inc`, `primary` |
| Visible text | `Add one` |
| Probable file | `popup.js` |

## When it fails

- **The prompt reads `<element> at <selector>` with no file.** No source file
  scored for the element's identifiers. The selector still reaches the
  model, so name the file yourself in the prompt.
- **The chip or the prefilled line is from an earlier pick.** The selection
  stays until you send a prompt or clear it. In chat mode press the X next
  to the chip. In the terminal clear the line and pick again.

## Next

- [Live preview](/code/preview) for the surfaces you can pick in
- [Terminal](/code/terminal) for the prompt the pick fills
- [Chat mode](/code/chat-mode) for the chip and the structured answer