Visual Editing: Edit Directly in Preview
Visual Editing: Edit Directly in Preview
Visual Editing makes writing faster, simpler, and more intuitive. Instead of jumping back and forth into file-based editors, you can see your changes immediately, directly in the preview, while the content is rendered.
How to edit
Start editing.
First, click Edit in the toolbar when you open a Visual Editing page.
Then, hover over an element, then click to open the editor.
Edit different elements
Text
Click directly on the text you want to edit, and you can edit the text directly.
The toolbar allows you to adjust font size, color, style (bold, italic, underline), and alignment. You can also modify spacing with padding and margin controls, and add hyperlinks to any text element.
Images
Images can also be edited directly.
You can also adjust the image's corner radius, padding, and margin. Like text elements, images can be made interactive by adding hyperlinks.
Other elements (links, buttons, icons)
For other page elements, you can visually inspect and edit attributes such as:
- Button labels
- Link destinations
- Icon styles
- Layout alignment
Everything updates in real time, giving you confidence before publishing.
Removing unwanted elements is straightforward—just select the element and click Delete in the toolbar to remove it from your page.
Undo & redo
If you make a mistake, don’t worry.
You can undo or redo changes at any time. This allows you to experiment freely without fear of breaking your page.
- Undo recent edits
- Redo reverted changes
- Move quickly between versions
Apply your edits
When you're ready, click the send arrow or press Enter to apply your edits. This sends the changes to the AI, which applies them and refreshes the preview.
Edits are not saved until you send them. Credit usage is shown after each edit is applied (for example: Credits used: 20). Sometimes you may not even need to consume credits, depending on the complexity of your code.
Leave editing
If you want to exit Visual Editing: First, select Apply changes to save your edits, it will automatically exit. The second option is to click Edit again in the bottom left of the chatbot, then in the popup select Discard changes to leave without saving.
Wrap-up
Visual Editing helps you edit faster, reduce context switching, and stay focused on content instead of tooling.
Whether you’re polishing copy, adjusting layouts, or experimenting with visuals, you can do it all directly in the preview with confidence.
