Visual Editor

Edit your generated code visually — no coding required. Use the element browser to find and edit any text, image, or style on your page.

Two Ways to Select Elements

You don't have to click on the preview to edit elements. There are two ways:

Option 1: Click in Preview

1. Hover over elements to see a blue outline
2. Click to select (purple dashed outline)
3. Edit in the panel on the right

Option 2: Use the Element Browser (Recommended)

1. Open the page outline in the inspector on the right
2. Browse elements organized by section (Hero, Features, Footer, etc.)
3. Use the search bar to find specific elements
4. Click any element in the list to select it
5. Edit in the panel — no need to find it in the preview!

The Edit Panel

Once an element is selected, you'll see two tabs:

Content Tab

• Text elements: Edit the text directly in a text area
• Images: Upload a new image or enter a URL
• Buttons/Links: Change the button text
• Alt text: Edit image descriptions for accessibility

Style Tab

• Colors: Text color and background color with color picker
• Spacing: Margin and padding (top, right, bottom, left)
• Border: Width, color, and style (solid/dashed/dotted)
• Effects: Border radius and shadow options

Element Browser Features

• Search: Find elements by name, type, or section
• Categories: Elements grouped by page section
• Edit indicators: Green checkmark shows unsaved changes
• Element counts: See how many images, text, and other elements exist
• Breadcrumb navigation: Jump to parent elements easily

Saving Your Changes

• Text, image, and style updates are previewed immediately
• Keep making changes across the page; they collect in one draft
• Click Review to compare all pending changes
• Click Save changes once to apply the entire batch atomically
• If any item is stale or unsafe, nothing is saved until it is resolved