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 your site by clicking directly on elements in the preview. It’s faster than chat for small adjustments — text changes, color tweaks, spacing — while chat is better for structural changes like adding sections or restructuring layouts.

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 (adding sections, splitting columns, restructuring), use AI chat — it’s faster than configuring every property visually.

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

Every AI message and significant edit creates a git commit. You can roll back to any previous version from the History panel. There’s no separate save step — your changes are recorded as you make them.

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

Sites use CSS custom properties for brand colors. Tell the AI “change the primary color to #…” and it updates everywhere — no manual hunt-and-replace through every element.