Visual Editor

Fine-tune every element on your pages with our visual editor and AI-powered assistant.

Overview

The Visual Editor allows you to select any element on your page and modify its properties directly. It opens as a right sidebar when you click "Edit" in the toolbar and includes both manual controls and an AI assistant for making changes with natural language.

Part of the Page Builder Workflow

The Visual Editor works together with the Page Builder. First, use the Page Builder to manage pages and add components from the library. Then, enter Edit Mode to fine-tune those components with the Visual Editor.

How to Enter Edit Mode

In the Page Builder, click the "Edit" button in the toolbar. A green-bordered sidebar will appear on the right. Click any element in the preview to select it.

Selecting Elements

When in edit mode, hover over elements to see a highlight. Click to select:

Click to Select

Click any text, image, button, or container to select it. The element info appears in the sidebar.

AI Edit Button

A floating "AI" button appears near selected elements. Click it to focus the chat input and describe changes in natural language.

Properties Panel

When an element is selected, the sidebar shows expandable property sections:

Content

Edit text content directly. For images, upload a replacement. For videos, change the source.

Link

For links and buttons, change the URL destination and whether it opens in a new tab.

Spacing

Adjust padding and margin. Use "All sides" for uniform spacing or "Individual" for each side.

Dimensions

Set width and height with various units (px, %, em, rem, vw, vh).

Typography

Font size, weight, alignment. Expand "Advanced" for line height, letter spacing, capitalization, and text decoration.

Colors

Text color and background color. Use the color picker or enter hex values. Background supports transparent.

Border

Border width, color, and border radius for rounded corners.

AI Assistant

At the bottom of the sidebar is the AI chat interface. Use natural language to make changes:

One assistant, no modes

There's no Edit/Create toggle to flip. You just type what you want, and the assistant picks the right action from your message and whatever you have selected: it edits the selected element, edits a section you describe, or creates a new section from scratch. See the AI Assistant page for the full breakdown.

Editing an element

With an element selected, your request applies to it. Try prompts like:

"Make the text larger"
"Change the background to blue"
"Add more padding"
"Make this bold and centered"
"Change the text to say Welcome to our marketplace"

Creating something new

Ask for a section that doesn't exist yet and the assistant generates it:

"Add a testimonials section with 3 customer reviews"
"Create a hero section with headline and CTA button"
"Add a pricing table with 3 tiers"
"Create a features grid with icons"

AI Capabilities

The AI assistant can perform these actions:

✏️ Set Text

Change text content

🎨 Apply Styles

Colors, spacing, typography

🔗 Set Link

Change link URLs

🖼️ Set Image

Change image sources

✨ Create Component

Generate new sections

🔄 Regenerate

Remake a component

📋 Duplicate

Copy components

🔀 Move

Reorder components

💡 Pro Tips

• Be specific about what you want: "Make the padding 24px" works better than "add some padding"
• The AI sees the element's current styles, so it can make relative changes like "make it larger"
• Chat history clears when you switch to editing a different element
• Use the floating AI button for quick access to the chat input

Quick answer