Skip to main content
What you’ll learn:
  • Edit individual elements by clicking on them.
  • Select and update multiple elements at once.
  • Apply scoped changes using natural language.

​
Before you begin

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

​
Edit visually in the preview

Click the Visual edit button in the top-right corner of the preview panel to activate edit mode. Once active, you can click on any element and instantly update its properties. No manual digging required.

​
Edit a single element

Click an element to open its property editor in the chat panel. You can adjust:
  • Padding and layout spacing
  • Text and background colors
  • Font size, alignment, and weight
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.

Edit a single element

Success check: The property editor opens in chat for the selected element.

​
Edit multiple elements at once

To update multiple elements in one flow:
  1. Select the first element and make your changes.
  2. Before clicking Save, select another element and edit it.
  3. Repeat as needed, then press Save once to apply all edits together.
You can mix and match different updates. For example:
  • Change a card’s background color to gold.
  • Update a heading’s text color to black.
Each element retains its specific changes.
Multiple elements being edited visually, each with different properties, before saving changes.Multiple elements being edited visually, each with different properties, before saving changes.

Edit multiple elements

​
Use natural language to make scoped changes

With elements selected, you can use the natural language (NLC) bar to apply changes directly—no panel toggles or dropdowns required. Try commands like:
  • Make the selected button orange with white text.
  • Set this heading to bold and center-aligned.
  • Add 16px margin to the selected card.
Rocket turns plain language into structured design updates, instantly and accurately.
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.

Use natural language while editing

Visual edit, leveled up.

You’re ready to style, align, and modify multiple 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 support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.