Why use visual edit?Change your app’s design by clicking directly on elements in the preview. No need to write CSS or dig through code files. See changes instantly as you adjust styles, spacing, or content. It’s like using a design tool, but the changes become real code automatically.
- Web Browser
- Mobile App
Before you begin
You’ll need:
- An existing Rocket project with a web app (React, HTML, or Next.js)
- Access to the preview panel
Getting started
Click the Edit design button in the top right corner of the preview panel.Once active, hover over any element in your web app preview and you’ll see it highlight, indicating it’s ready to edit.When you select an element, specific editing tools activate, allowing you to modify different aspects of the web element.Available editing tools
When you select an element, you can use these specific tools to make changes:- Edit text - Modify text content directly
- Edit style - Change colors, fonts, alignment, and other visual styles
- Edit spacing - Adjust padding, margin, and layout spacing
- Edit image - Replace or modify images
- Delete element - Remove elements from your design
- Go to code - Jump to the code view for the selected element
- Ask for quick changes - Use natural language to make modifications
Edit individual elements
Click any element in the web app preview to select it. The editing tools appear, allowing you to modify different aspects of the element.Edit text
Modify text content directly in the web app preview.- Select an element containing text.
- Click Edit text.
- Type your new text content.
- Press Enter for new line, Save changes, or click outside to close the text editor.
Success check: The text updates immediately in the preview.
Edit style
Change colors, fonts, alignment, weight, and other visual styles for elements.- Select an element.
- Click Edit style.
- Adjust the style properties you want to change.
- Changes appear automatically as you adjust them.
- Press Save changes.
Success check: The element’s visual style updates in real-time as you make changes.
Edit spacing
Adjust padding, margin, and layout spacing for elements.- Select an element.
- Click Edit spacing.
- Adjust padding and margin values.
- Changes apply automatically.
- Press Save changes.
Success check: The element’s spacing updates immediately in the preview.
Edit image
Replace or modify images in your web app, website, or landing page.- Select an image element.
- Click Edit image.
- Upload a new image or modify image properties.
- Changes apply automatically.
- Press Save changes.
Success check: The image updates in the preview.
Delete element
Remove elements from your web app.- Select the element you want to remove.
- Click Delete element.
- Confirm the deletion.
- Press Save changes.
Success check: The element is removed from the preview.
Go to code
Jump to the code view for the selected element to make more advanced changes.- Select an element.
- Click Go to code.
- The code view opens showing the React, HTML, or Next.js code for that element.
- Press Save or Discard to apply your changes.
Success check: The code view opens with the selected element’s code highlighted.
Edit multiple elements
Edit multiple elements before saving to batch your changes and apply them all at once.- Click the first element and use the editing tools to make your changes.
- Don’t save yet. Click another element in the web app preview.
- Use the editing tools to make changes to that element.
- Repeat for as many elements as needed.
- All changes are saved together automatically.
Success check: All selected elements update when changes are applied.
Ask for quick changes
With an element selected, use the Ask for quick changes tool to make modifications using natural language.Type what you want to change in any language you want. No need to use specific tools or dropdowns.How to use it:- Select an element in the web app preview (or keep your current selection).
- Click Ask for quick changes.
- Type your change request in plain English.
- Press Enter or click the send button.
Make the selected button element orange with white text.Set this heading element to bold and center aligned.Add 16px margin to the selected card element.Change the background color of this div to blue.
Success check: The preview updates immediately to reflect your changes, and Rocket confirms the update.
You did it!
You can now style, align, and modify elements quickly.Whether you’re refining a section of your website, landing page, dashboard, or internal tool, or redesigning a full page, Visual edit keeps it fast, simple, and focused.