Select an Element: Click any element in your app’s preview to start editing.
Edit Element: Directly edit text if it’s a string in your source code, right from the preview. Or use the editor pane in the chat to update more properties like padding, margin, color, etc.
Preview Changes: Changes are previewed live in the preview.
Save: Hit save to update the source code instantly. If it’s a simple change, your edits will directly update the source code without consuming AI credits. If there’s uncertainty or hidden complexity involved in the edit, Visual Editor seamlessly sends targeted metadata to Agent for accurate assistance.
The Visual Editor is currently available only on web browsers. It is not supported on mobile or desktop applications.
The Visual Editor is useful for a variety of UI modifications:
Text Edits in Preview: Click, type, done. Edit text directly in the Preview tool.
Perfect Color Updates: Use the color picker to adjust text and backgrounds.
Try alternative input methods, such as typing a color name like ‘purple’ in the input field, or the eyedropper to pick a color from anywhere on your screen.
Style Changes Across Elements: Adjust padding, margins, and more.
Image Updates: Select images to swap URLs or upload your own with instant previews.
Select the most precise element possible for your intended change
Selecting an element rendered in a loop or used in multiple places will highlight and update all instances of it
Updating text of composite elements which are made up of multiple sub elements is disabled in Visual Editor, but you can ask Agent to make changes like this in chat
Clicking on the top left label will take you to the element in the source code
Escape key can be used to dismiss the Visual Editor when inside the preview