> ## Documentation Index > Fetch the complete documentation index at: https://dhiwisepvtltd-5e04e6a4.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Visual edit > Click any element in the Rocket.new preview to update text, spacing, images, or styling without manual code. > [!NOTE] > > Visual edit is accessed via the **web browser**, but you can use it to edit both web app and mobile app build tasks. Visual edit lets you click directly on any element in your preview and change it on the spot. No prompts, no guessing selectors. Select something, adjust it, and save. ## When to use visual edit | Use visual edit when | Use chat instead when | | :- | :- | | You can see and click the element | You need changes across multiple pages | | Quick text, style, or spacing tweaks | Complex layout restructuring or new sections | | You want immediate visual feedback | You are adding new features or logic | ## How to use **1. Open the Edit menu** In the preview toolbar, click **Edit**. A dropdown appears with two options: **Visual edits** and **Theme**. ![Edit button clicked in the preview toolbar showing a dropdown with Visual edits and Theme options.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/visual-edit/activate-light.webp) ![Edit button clicked in the preview toolbar showing a dropdown with Visual edits and Theme options.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/visual-edit/activate-dark.webp) Edit dropdown showing Visual edits and Theme options **2. Select Visual edits** Click **Visual edits**. The preview becomes interactive and elements highlight as you hover over them. **3. Click an element** Click any element to select it. A floating toolbar appears with editing controls and an **Ask me...** field for quick AI-assisted changes. ![Visual edit mode active in Rocket with a selected element and the editing toolbar showing Ask me field and controls.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/visual-edit/content-light.webp) Visual edit toolbar on a selected element **4. Make your changes** Use the toolbar controls to adjust style, spacing, text, or images. You can also type a change in the **Ask me...** field and Rocket applies it to just that element. **5. Save** Click **Save changes** to write all pending changes to code. You can edit multiple elements before saving and they all apply at once. ## Editing tools ### Edit style Adjust colors, fonts, weight, and alignment directly in the toolbar. **1. Select an element** Click the element you want to style. **2. Adjust style controls** Use the font size, weight, color, or alignment controls in the toolbar. Changes apply immediately in the preview. **3. Save changes** Click **Save changes**. ![Visual edit toolbar showing font size set to 20, Normal weight, color picker, text edit, spacing, italic, underline, align, go to code, and delete controls on a selected paragraph.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/visual-edit/edit-style-light.webp) Style controls on a selected element ### Edit spacing Adjust margin and padding values on any element. **1. Select an element** Click the element you want to adjust. **2. Open spacing controls** Click the spacing icon in the toolbar. **3. Set values** Enter values for each side of the margin and padding. **4. Save changes** Click **Save changes**. ![Spacing panel expanded showing individual margin and padding numeric inputs for a selected element.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/visual-edit/edit-spacing-light.webp) Spacing panel with margin and padding controls ### Edit image Replace or update an image without touching code. **1. Select an image** Click an image element to select it. **2. Open image controls** Click the image icon in the toolbar. **3. Choose update method** Choose how to update it: * **Import** a URL from the web * **Upload** a file from your device (PNG, JPG up to 1MB) * **Auto** to regenerate the image with AI * **Instruction** to describe what you want **4. Apply the update** Click **Update**. ![Update image panel showing Import URL, Upload file, Auto AI regenerate, and Instruction options for a selected image element.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/visual-edit/update-image-light.webp) Update image panel ### Delete an element Remove an element from the page. **1. Select the element** Click the element you want to remove. **2. Delete it** Click the **Delete element** icon at the end of the toolbar. **3. Save changes** Click **Save changes**. ![Visual edit toolbar with the delete element icon highlighted showing a Delete element tooltip.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/visual-edit/delete-element-light.webp) Delete element highlighted in the toolbar ### Go to code Jump directly to the element's source code for changes beyond what the toolbar offers. **1. Select an element** Click the element whose code you want to view. **2. Open code view** Click the **``** icon in the toolbar. The code view opens with the element highlighted. ![Visual edit toolbar with the Go to code icon highlighted showing a Go to code tooltip on a selected heading element.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/editor/visual-edit/go-to-code-light.webp) Go to code highlighted in the toolbar ### Ask for a quick change Every selected element has an **Ask me...** field at the top of the toolbar. Type a change in plain language and Rocket applies it to just that element. **Examples:** * `Make this button orange with white text and rounded corners` * `Set this heading to bold, center aligned, 32px` * `Add 24px padding and a subtle box shadow to this card` * `Change the background to a gradient from blue to purple` ## Toolbar reference | Tool | What it does | | :- | :- | | Ask me... | Apply a plain-language change to the selected element | | Font size | Set the size numerically | | Font weight | Toggle Bold, Semibold, Normal, etc. | | Color | Change the text or fill color | | T | Edit the text content inline | | Spacing | Adjust margin and padding | | I / U | Italic and underline | | Align | Change text or element alignment | | Image | Replace or regenerate an image | | `` | Jump to the element's source code | | Delete | Remove the element from the page | | **Save changes** | Write all pending changes to code | ## What's next? > **[Theme](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/theme.md)** > > Update your site's fonts, colors, logo, and images from one place. > **[Commands](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/commands.md)** > > Use slash and @ commands for precise, targeted edits. > **[Chat](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/chat.md)** > > Use chat for bigger changes, new sections, or logic updates. > **[Code tab](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/code.md)** > > Browse and edit your task source files directly. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.