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 Elements panel on the left side
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

• Unsaved changes show a yellow indicator
• Click Save to apply changes to your code
• Click Discard to undo your edits
• You'll see a credit cost estimate before saving