Visual edit is accessed via the web browser, but you can use it to edit both web app and mobile app build tasks.
When to use visual edit
How to use
1
Open the Edit menu
In the preview toolbar, click Edit. A dropdown appears with two options: Visual edits and Theme.
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.
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.
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.
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.
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.
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.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 cornersSet this heading to bold, center aligned, 32pxAdd 24px padding and a subtle box shadow to this cardChange the background to a gradient from blue to purple
Toolbar reference
What’s next?
Theme
Update your site’s fonts, colors, logo, and images from one place.
Commands
Use slash and @ commands for precise, targeted edits.
Chat
Use chat for bigger changes, new sections, or logic updates.
Code tab
Browse and edit your task source files directly.