Visual edit

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

​

How to use

​

Editing tools

​

Edit style

Adjust colors, fonts, weight, and alignment directly in the toolbar.

1. Select an element.
2. Use the font size, weight, color, or alignment controls in the toolbar.
3. Changes apply immediately in the preview.
4. Click Save changes.

​

Edit spacing

Adjust margin and padding values on any element.

1. Select an element.
2. Click the spacing icon in the toolbar.
3. Enter values for each side of the margin and padding.
4. Click Save changes.

​

Edit image

Replace or update an image without touching code.

1. Click an image element to select it.
2. Click the image icon in the toolbar.
3. 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. Click Update.

​

Delete an element

Remove an element from the page.

1. Select the element.
2. Click the Delete element icon at the end of the toolbar.
3. Click Save changes.

​

Go to code

Jump directly to the element’s source code for changes beyond what the toolbar offers.

1. Select an element.
2. Click the </> icon in the toolbar.
3. The code view opens with the element highlighted.

​

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

​

What’s next?