Understanding the Site Editor

The Framekit site editor is where you'll spend most of your time building and customizing your website. Here's an overview of the main areas and features.

Editor Layout

Top Header Bar

The header bar at the very top contains:

Left Side:

• Back Arrow - Return to your dashboard
• Undo Button - Click to undo changes (with history dropdown)
• Settings Button - Open site settings
• Pages Button - Open the pages drawer
• Styles & Fonts Button - Open theme/typography settings

Center:

• Project Name - Your site's project name
• Plan Badge - Shows your subscription status

Right Side:

• Device Preview Buttons - Switch between Desktop, Tablet, and Mobile views
• Theme Toggle - Switch editor between light and dark mode
• Publish/Update Button - This button changes based on your site's state:
• "Publish" - First time publishing your site
• "Update" - Push changes to your already-published site

Site Navigation Bar

Below the header is your site's navigation bar (as visitors will see it):

• Paintbrush Button (left) - Opens page and header styling options
• Logo/Avatar Area - Click to edit your site's logo, title, and description
• Page Tabs - Switch between pages; click to edit each page
• CTA Buttons (right) - Add up to 2 navigation buttons

Main Canvas

The central area displays your site as you build it. Click on any element to select and edit it.

Working with Content

Adding Content

Click the "+" button that appears between components, or use the components modal to add new content. You can choose from:

• Basic Blocks: Text, images, buttons, columns, video
• Sections: Pre-built sections (hero, features, pricing, etc.)
• Components: Reusable AI components from libraries
• Pages: Full page templates

Editing Content

Click on any element to select it. You'll see:

• Selection outline around the component
• Toolbar with options (AI chat, settings, menu)
• Context menu (right-click) for more options

Rearranging Content

• Drag handle - Drag to move components
• Menu options - Move Up, Move Down, Move to Hero, Move to Footer
• Right-click - Full width toggle, duplicate, delete

Device Preview

Use the desktop/tablet/mobile buttons in the header to preview your site on different screen sizes. This helps ensure your site looks great on all devices.

Undo and Redo

Made a mistake? No problem!

• Ctrl+Z (Cmd+Z on Mac) to undo
• Click the Undo button to see your change history
• Select any previous state to jump back to it