# Select to edit

***

{% embed url="<https://vimeo.com/1097293557?share=copy#t=0>" %}

### How It Works

{% stepper %}
{% step %}

#### **Activate Select to Edit**

Click the 🎯 “Select to Edit” icon in the prompt box toolbar.
{% endstep %}

{% step %}

#### **Pick an Element**

Click the element in the preview pane you want to modify. Maker highlights it and inserts a reference placeholder (e.g. `[selected element]`) into the prompt.
{% endstep %}

{% step %}

#### **Write Your Prompt**

Describe the change you’d like to make to that element. For example: Change the selected element’s background to a glassmorphism blur and set its border-radius to 12px.
{% endstep %}

{% step %}

#### **Run & Apply**

Press **Enter** (or click on the arrow). Maker updates only that element’s code, leaving the rest of your project untouched.
{% endstep %}
{% endstepper %}

***

### Examples

<table data-card-size="large" data-view="cards"><thead><tr><th>Change</th><th>Step 1</th><th>Step 2</th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Styling</strong></td><td>Select a button.</td><td>Prompt: “Make the selected element’s text uppercase”</td><td><a href="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2Fh71QjZCRNrxzAQbMaJeT%2FSelecttoedit.gif?alt=media&#x26;token=ce8a5a6e-115f-4b45-be5c-2aa916b7f2bc">Selecttoedit.gif</a></td></tr><tr><td><strong>Content</strong></td><td>Select a paragraph.</td><td>Prompt: “Update the selected text to ‘Welcome to Our Platform!’ and center-align it.”</td><td><a href="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2FQJqQrlQCiytVoAVR9Lek%2Fselecttoedit-paragraph.gif?alt=media&#x26;token=331388a2-ccad-4915-a26d-ec58113e0394">selecttoedit-paragraph.gif</a></td></tr><tr><td><strong>Behavior</strong></td><td>Select a link.</td><td>Prompt: “Wrap the selected element in a tooltip that says ‘Click here to learn more.’”</td><td><a href="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2FMhB2ljPpKtSOhvenk0kR%2Fselcttoedit-behavior.gif?alt=media&#x26;token=f01f5555-dea2-4d53-8d2d-db97108dc72f">selcttoedit-behavior.gif</a></td></tr></tbody></table>

***

### Tips & Best Practices

* **One element at a time**: activate Select to Edit for each distinct change.
* **Chaining edits**: after one change, re-activate and select another element to continue refining.
* **Undo & History**: if you mis-select, cancel the prompt, or revert via the **Version** **History** panel found in the "Publish" drop-down.

***

Harness “Select to Edit” to make pixel-perfect tweaks in seconds—no CSS selectors required!

***