Pagesmith
Start building

Visual Editor

Click any element on the preview to edit it. Style inspector, inline text editing, and right-click menu for quick changes.

The Visual Editor lets you edit selected elements in the preview. Use it for text, color, and spacing changes. Chat is often more practical for adding sections or restructuring a layout.

How It Works

  1. Open your project in the AI editor
  2. Click any element on the preview
  3. The element is selected (blue outline) and the style inspector opens on the right
  4. Adjust styles, edit text inline, or use the right-click menu

Editing Text

Inline text editing

  1. Double-click any text element
  2. The text becomes editable
  3. Type your changes
  4. Click outside (or press Escape) to save

Text styles

With a text element selected, the style inspector exposes:

  • Font size
  • Font weight: Thin (100) through Black (900)
  • Line height: Tight, Snug, Normal, Relaxed, Loose
  • Letter spacing: Tight, Normal, Wide, Wider, Widest
  • Text wrap: Normal, Break, Hyphens
  • Text color

Editing Images

Click an image element to select it, then use the upload control to replace it. Images can be:

  • Uploaded from your computer
  • Picked from the built-in Unsplash library

Layout Controls

With any element selected, the style inspector exposes:

  • Padding: top, right, bottom, left
  • Margin: top, right, bottom, left
  • Border radius: for rounded corners
  • Background color

For larger layout changes, such as adding sections or splitting columns, describe the intended structure in AI chat and review the result.

Right-Click Menu

Right-click any element on the preview to open the context menu:

  • Add heading above: insert a heading before this element
  • Add paragraph below: insert a paragraph after
  • Add button below: insert a button after
  • Duplicate: copy the element
  • Delete: remove it
  • Edit with AI…: open a focused chat scoped to this element

Adding Sections

Open the Section Library panel from the workspace to browse pre-designed sections. Sections are filterable by category. Click any section to add it to the current page.

Selecting Parents

Sometimes you want to select the section a clicked element is inside: to set its background, padding, or layout. Use the breadcrumb trail above the preview:

body > main > section > div > h1

Click any level to select that container.

Responsive Editing

Device preview

Toggle between desktop, tablet, and mobile views from the device selector in the preview toolbar.

Per-breakpoint styles

When you change a style in the inspector while a specific device view is active, the change applies only to that breakpoint. So you can set the heading to 48px on desktop and 32px on mobile, and both stick.

Saving and Undo

Supported AI and editor changes create project history entries. Use the History panel to inspect and restore an available earlier version.

When to Use Visual vs AI Chat

The Visual Editor is best for:

  • Text content changes
  • Image replacements
  • Color and spacing tweaks
  • Small, scoped adjustments to a specific element

Use AI chat for:

  • Adding or removing whole sections
  • Restructuring layouts
  • Changing several elements at once
  • Anything you’d describe in a sentence faster than configuring it manually

Tips

Quick text edits

Double-click text to immediately start editing: no need to use the inspector for content changes.

Scoped AI edits

Right-click → Edit with AI… opens a chat scoped to the selected element. Useful when you want to change one specific component without affecting the rest of the page.

Use color variables

Generated sites commonly use CSS custom properties for brand colors. Ask the AI to update the relevant property, then review components that use direct color values.