Skip to main content
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

​
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.Edit button clicked in the preview toolbar showing a dropdown with Visual edits and Theme options.

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.

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.

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.

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.

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.

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.

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

​
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.