Visual Editing
Make precise edits to your components and designs using the visual editor.
Visual editing tutorial
Edit Mode
To enter edit mode, click the "Edit" tab in the right side panel of your component, or double click on the component's name.
What you can edit:
- •Text content: Click any text to edit it directly
- •Images: Replace images with your own
- •Styles: Modify colors, spacing, fonts, and more
- •Layout: Rearrange elements with drag and drop
Layers
Once in edit mode (either by clicking the "Edit" panel in the right panel or double-clicking on the component's name), you get access to the layer tree for that component. The layer tree shows you all the elements in your design and lets you select, organize, and navigate through them easily.
Precise AI Edits
This functionality works inside the visual editor. When you select an element, you can ask the AI for a specific change. This is perfect for small, targeted modifications that don't require using the main .
Great for:
- •Adjusting a specific element's color or style
- •Modifying spacing or alignment of an element
- •Quick text or content changes
- •Fine-tuning individual components
Instant Saving
Every edit you make is saved instantly — no need to click a save button or commit your changes. As soon as you modify text, adjust a color, or tweak spacing, the change is live. Just edit and move on.
Pro tip: Every edit creates a new revision automatically, so you can always go back to previous versions from the version history.