> ## Documentation Index > Fetch the complete documentation index at: https://docs.polymet.ai/llms.txt > Use this file to discover all available pages before exploring further. # Edit visually > Change text, colors, spacing, borders and shadows on any element, and see it in the preview as you go. The visual editor lets you change an element's text and styles yourself, with no prompt. Every change shows in the preview at once, and nothing is written to your code until you save. Every plan has it. Saving straight to code is free. **Save with AI** sends your changes to the agent as a generation, which uses credits. ![Focus view with the Visual Edit panel open on the selected headline, showing Text Content, Typography, Layout and Color](https://mintcdn.com/polymet/TfIzLh80_L4bW9xQ/images/docs/canvas/visual-editor-panel.png?fit=max\&auto=format\&n=TfIzLh80_L4bW9xQ\&q=85\&s=ba22d41c39941987b4e5fcbc37de7227) ## Open the visual editor 1. Open a page or component in **Focus**. 2. Click **Edit** in the toolbar above the preview. On a narrow window it shows only its pencil icon. 3. The **Visual Edit** panel opens as a small bar in the corner of the preview. 4. Click an element in the preview. The panel opens with that element's current values. To pick several elements, hold Cmd (Ctrl on Windows) and click each one. The panel shows one element's values, and every change applies to all of them. ## What you can change | Group | Controls | | - | - | | **Image** | **Upload** a new image or **Generate with AI**. Shown only when you pick an image | | **Text Content** | The element's text | | **Typography** | Font, weight, size, **Line height**, **Letter spacing**, **Alignment** | | **Layout** | **Margin** and **Padding**, all sides together or each side on its own | | **Color** | **Text color** and **Background color** | | **Border** | Color, **Style** and **Width**. Add or remove it with the plus and minus buttons | | **Shadow** | A shadow from your theme, or your own. Add or remove it the same way | | **Appearance** | **Opacity** and **Border radius** | Once you change something in a group, an undo arrow appears beside its name. Click it to put the group's original values back. Change text in the **Text Content** box. ## Find an element in the layer tree Click the layers icon at the top of the panel (its tooltip says **Toggle layers**) to see the page as a tree. Click a row to select that element. Shift-click selects a range of rows. The icon beside it, **Expand all layers**, opens every level. ## Save your changes When you change something, the toolbar above the preview shows three buttons: an X to discard, a save icon, and **Save with AI**. * **The save icon** (tooltip "Save changes") writes your changes straight into the code. A dialog lists the files it will update. Click **Save** to confirm. It is instant and costs no credits. * **Save with AI** hands the changes to the agent instead. A **STAGED FOR AI** card appears above the generation input, showing "Visual edits" and the number of changes. Add a note if you like, then send. The agent applies the changes you previewed, in the style of your code. * **The X** throws every change away after you confirm. Sometimes the save icon is dimmed and its tooltip says "Some changes can't be applied automatically. Use Save with AI instead." That happens when one change has no direct code edit, for example styling one card in a list but not the others. Use **Save with AI**. If you stage changes the editor could also save for free, the card says "These edits can also be saved instantly for free." with a **Save now** button.