Using the AI Editor

The PageSmith AI Editor is your creative workspace where websites come to life. Use natural language to build, modify, and perfect your web designs.

Opening the Editor

Access the editor for any project:

1. Click on a project from your dashboard
2. The editor opens with your website preview
3. Start editing with AI commands or visual tools

The Editor Interface

The editor consists of three main areas:

1. AI Command Panel (Left)

• Chat with AI - Describe changes in plain English
• Quick Actions - Common editing commands
• Component Library - Browse and add components
• History - Undo/redo and version history

2. Visual Preview (Center)

• Live Preview - See changes in real-time
• Device Toggle - Preview on desktop, tablet, mobile
• Interactive Elements - Click to select and edit
• Zoom Controls - Adjust preview size

3. Properties Panel (Right)

• Component Settings - Fine-tune selected elements
• Styles - Colors, fonts, spacing
• Content - Edit text and images
• Advanced - Custom CSS and attributes

Using AI Commands

Simply describe what you want to change:

Adding Content

• "Add a hero section with a call-to-action button"
• "Insert a three-column feature grid"
• "Add a contact form at the bottom"

Modifying Design

• "Make the header background dark blue"
• "Change all buttons to rounded corners"
• "Use a more modern font for headings"

Restructuring

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

Content Updates

• "Change the headline to 'Welcome to Our Platform'"
• "Update the product description"
• "Replace the placeholder images with my uploaded photos"

Visual Editing

For precise control, use visual editing tools:

Selecting Elements

• Click any element to select it
• Double-click text to edit inline
• Use the breadcrumb trail to select parent elements

Drag and Drop

• Drag components from the library
• Reorder sections by dragging
• Resize elements by dragging handles

Direct Editing

• Click text to edit content
• Upload images by clicking placeholders
• Adjust colors with the color picker

Component Library

Access pre-built components to speed up your work:

Layout Components

• Sections, containers, grids
• Headers, footers, sidebars
• Flexible layouts and spacing

Content Components

• Text blocks, headings, lists
• Images, galleries, videos
• Icons and dividers

Interactive Elements

• Buttons and links
• Forms and inputs
• Accordions and tabs

Advanced Components

• Navigation menus
• Carousels and sliders
• Pricing tables
• Testimonials

Responsive Design

Your website automatically adapts to all screen sizes:

Device Preview

• Toggle between desktop, tablet, and mobile views
• Test your design at different breakpoints
• Fine-tune layouts for each device

Responsive Controls

• Set different styles per device size
• Show/hide elements on specific devices
• Adjust spacing and sizing responsively

Saving and Publishing

Your work is automatically saved:

• Auto-Save - Changes save every few seconds
• Manual Save - Use Cmd/Ctrl+S to force save
• Version History - Restore previous versions anytime
• Publish - Deploy your website with one click

Keyboard Shortcuts

Work faster with keyboard shortcuts:

• Cmd/Ctrl + S - Save
• Cmd/Ctrl + Z - Undo
• Cmd/Ctrl + Shift + Z - Redo
• Cmd/Ctrl + D - Duplicate element
• Delete/Backspace - Delete selected element
• Esc - Deselect element

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 undo if something doesn't look right

Use Templates

• Start with a template close to your vision
• Customize from there with AI commands
• Faster than building from scratch

Preview Often

• Check mobile view regularly
• Test interactive elements
• Review on actual devices before publishing