Using the Website Editor

The editor is your workspace for building and designing pages. It combines a code editor, live preview, and AI assistant in one interface.

Editor Layout

• Top Bar — Project name, page tabs, device preview toggles (desktop/tablet/mobile), and action buttons
• Left Panel (AI Chat) — Conversational AI assistant that can generate and modify code
• Center Panel (Code Editor) — Tabbed code editor for HTML, CSS, and JavaScript with syntax highlighting
• Right Panel (Live Preview) — Real-time preview of your page that updates as you type

Working with Code

The code editor supports three tabs:

• HTML — Page structure and content
• CSS — Styling and layout
• JS — Interactive behavior and scripts

Changes are saved automatically. You can also use Ctrl+S to save manually.

Device Preview

Use the device toggle buttons in the top bar to preview your site at different screen sizes: Desktop, Tablet, and Mobile.

Top Bar Actions

• Help (?) — Open the help center
• Settings (⚙) — Open project settings
• Edit Layout — Drag and drop sections to reorder
• Sections — Browse and insert pre-built sections
• Rebuild — Regenerate the page using AI
• Open — View published site in a new tab
• Publish — Make your site live