Pagesmith
Start building

Using the AI Editor

Build and edit your Pagesmith site by chatting with AI, with a style inspector for fine-tuning.

The AI Editor is your workspace for building and editing your site. Most changes happen through chat — you describe what you want and the AI updates the code. For fine-tuning, you can click any element on the preview to adjust styles directly, or use the right-click menu to add and change sections.

Opening the Editor

  1. Click on a project from your dashboard
  2. The editor opens with your site preview
  3. Start chatting with the AI or click the preview to edit directly

Editor Layout

The editor has three main areas:

Chat panel (left)

The main way you interact with Pagesmith. Type what you want and the AI updates your site. The chat panel also gives you access to workspace panels: Domains, GitHub, Settings, Integrations, SEO, Media, Secrets, Database, History, and the Section Library.

Live preview (center)

The actual rendered site. Updates automatically after every AI change. Includes:

  • Device toggle — desktop, tablet, mobile views
  • Click any element — selects it and opens the style inspector
  • Right-click any element — opens a context menu with quick actions

Style inspector (right, when an element is selected)

Shows the styles for the currently selected element so you can adjust them without going through chat:

  • Font size, weight, line height, letter spacing, text wrap
  • Text color and background color
  • Padding (top, right, bottom, left)
  • Margin (top, right, bottom, left)
  • Border radius

Adjustments are scoped to the current device view, so you can set different values for mobile vs desktop.

Chatting with the AI

Most changes happen through conversation. Be specific.

Adding content

Add a hero section with a "Start free" CTA button.
Insert a three-column feature grid below the hero.
Add a contact form at the bottom of the homepage.

Modifying design

Make the header background dark blue.
Change all buttons to rounded corners with extra padding.
Use a more modern serif font for headings.

Restructuring

Move the testimonials section above pricing.
Split this section into two columns.
Remove the sidebar and make the content full-width.

Content updates

Change the headline to "Welcome to Our Platform".
Update the product description with the copy I'll paste below.
Replace the placeholder images with my uploaded photos.

Visual Editing

For precise control without writing prompts, click directly on the preview.

Selecting elements

  • Click any element to select it — the style inspector opens on the right
  • Double-click text to edit inline
  • Click the breadcrumb trail above the preview to select parent elements (e.g. body > main > section > h1)

Right-click menu

Right-click any element to:

  • 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 to browse pre-designed sections, filterable by category. Click a section to add it to the current page.

Responsive Design

The site automatically adapts to all screen sizes. You can preview and adjust per breakpoint.

Device preview

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

Per-breakpoint editing

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.

Version History

Every AI message and significant edit creates a git commit. You can:

  • See the full history in the History panel
  • Restore to any previous commit
  • Compare what changed between versions

This is your safety net — try things, roll back if they don’t work.

Publishing

When you’re ready, click Publish in the top-right. See Publishing for subdomains, custom domains, and deployment targets.

Keyboard Shortcuts

ActionShortcut
UndoCmd/Ctrl + Z
RedoCmd/Ctrl + Shift + Z

Tips for Best Results

Be specific with AI

Instead of “make it better,” try:

  • “Increase the heading font size to 48px”
  • “Add more space between sections”
  • “Make the call-to-action button more prominent”

Iterate gradually

Make one change at a time. Review the result before continuing. Use the History panel to roll back anything that goes sideways.

Mix chat and visual editing

Use chat for structural changes (add a pricing section, split a layout, change several things at once), and the style inspector for small tweaks (font size, padding, color). Reaching for chat for every minor adjustment is slow.

Preview on mobile

The mobile view often catches layout issues that don’t show up on desktop. Check it before publishing.