Skip to main content
In this guide, you’ll learn how to:
  • Edit single or multiple elements visually.
  • Apply changes using visual tools or natural language commands.

​
Before you begin

You’ll need:
Access to the Rocket preview panel.

​
Getting started

Click the Visual edit button in the top right corner of the preview panel. This activates edit mode. Once active, hover over any element in your preview and you’ll see it highlight, indicating it’s ready to edit.

​
Editable properties

When editing elements, you can modify:
  • Padding and layout spacing
  • Text and background colors
  • Font size, alignment, and weight and many more
These properties are available whether you’re editing a single element, multiple elements, or using natural language commands.

​
Edit individual elements

  1. Click any element in the preview to select it.
  2. The property editor opens in the chat panel on the left.
  3. Adjust the properties you want to change.
  4. Click Save to apply your changes, or Clear to discard them.
Visual edit mode showing a single element being selected and edited in the preview.Visual edit mode showing a single element being selected and edited in the preview.

Editing individual elements

Success check: The property editor appears in the chat panel, and your selected element is highlighted in the preview.

​
Edit multiple elements

Edit multiple elements before saving to batch your changes and apply them all at once.
  1. Click the first element and make your changes.
  2. Don’t click Save yet. Click another element in the preview.
  3. Make changes to that element.
  4. Repeat for as many elements as needed.
  5. Click Save once to apply all edits together.
Each element keeps its own changes. For example, you can change a card’s background color, update a heading’s text color, and adjust a button’s padding all in one batch.
Multiple elements being edited visually, each with different properties, before saving changes.Multiple elements being edited visually, each with different properties, before saving changes.

Batch editing multiple elements

Success check: All selected elements update when you click Save.

​
Natural language to make scoped changes

With an element selected, use the natural language (NLC) bar at the bottom of the chat panel. Type what you want to change in plain English. No need to use property panels or dropdowns.How to use it:
  1. Select an element in the preview (or keep your current selection).
  2. Type your change request in the NLC bar at the bottom of the chat panel.
  3. Press Enter or click the send button.
Example commands:
  • Make the selected button orange with white text.
  • Set this heading to bold and center aligned.
  • Add 16px margin to the selected card.
  • Change the background color to blue.
Rocket interprets your natural language and applies the changes instantly. You can combine multiple properties in one command.
Typing in the NLC bar to apply style changes to selected elements in preview mode.Typing in the NLC bar to apply style changes to selected elements in preview mode.

Editing with natural language

Success check: The preview updates immediately to reflect your changes, and Rocket confirms the update in the chat.

You did it!

You can now style, align, and modify elements quickly. Whether you’re refining a section or redesigning a full page, Visual edit keeps it fast, simple, and focused.
Need help?
Email us at [email protected] or join our Discord community to get help, share ideas, and connect with other creators.