Editor and Preview

The website builder workspace is where you view, edit, and preview your website. It combines a code editor, a live preview, a file browser, and viewport controls into a single interface. This page explains each part of the workspace and how to use it effectively.

Workspace Layout

The workspace is divided into three main areas:

• Top bar — Project name, navigation tabs, viewport controls, sync status, and the Publish button
• Left panel — The AI chat sidebar (for editing with AI) and the file browser
• Main area — The code editor and live preview, displayed side by side or individually

You can switch the main area between three view modes:

• Code — Shows only the code editor
• Preview — Shows only the live preview
• Split — Shows the code editor on the left and the live preview on the right (default)

File Browser

The file browser on the left shows every file in your project. Click any file to open it in the code editor. The currently open file is highlighted in the list.

For most users, the AI chat editor is the faster way to make changes. The code editor is available when you want precise, manual control — fixing a typo, adjusting a specific value, or adding custom code.

Code Editor

The built-in code editor provides syntax highlighting, line numbers, and bracket matching. When you edit a file, changes are reflected in the live preview within seconds.

Live Preview

The live preview shows your website exactly as it will appear to visitors. It runs entirely in your browser, so changes appear within one to two seconds without a full page refresh.

Preview Loading

When you first open a project, the preview goes through a brief startup:

1. Booting — The runtime initializes
2. Installing — Dependencies are set up (cached for speed)
3. Starting — The dev server starts
4. Ready — Your site appears in the preview

The first load takes 10 to 20 seconds. After that, file changes update almost instantly.

Preview Navigation

The preview behaves like a real browser. You can click links in the preview to navigate between pages. When you select a different page file in the file browser, the preview automatically navigates to that page's route.

Viewport Controls

The top bar includes viewport controls that let you preview your site at different screen sizes:

• Desktop — Full-width preview (default)
• Tablet — Preview at tablet width
• Mobile — Preview at mobile width

These controls resize the preview, letting you check responsive layouts without resizing your browser window.

Undo and Redo

The workspace tracks a history of your file changes. You can undo and redo changes using keyboard shortcuts:

• Undo — Cmd/Ctrl + Z
• Redo — Cmd/Ctrl + Shift + Z

The history stores up to 50 snapshots. This means you can freely experiment with changes and roll back if something does not look right.

Search

The workspace includes a search feature that lets you find text across all files in your project. This is useful for locating where a specific piece of content or element is used.

Click a search result to open the file at the matching line in the code editor.

Version History

The version history panel lets you save snapshots of your project at any point and roll back to a previous state if needed.

Saving a Version

1. Open the version history panel from the top bar
2. Click Save Version
3. Optionally add a label to describe this version (for example, "Before redesigning the hero section")

Each version is automatically numbered and timestamped. The snapshot captures the complete state of all files in your project.

Rolling Back

1. Open the version history panel
2. Browse the list of saved versions
3. Click the version you want to restore
4. Confirm the rollback

Rolling back replaces all current files with the files from the selected version. The preview updates immediately to show the restored state. You can save up to 50 versions per project. Versions are stored in the cloud and persist across sessions.

Tip: Save a version before making major changes so you have a clean restore point.

Terminal

The workspace includes a terminal panel that shows output from the underlying development process. You can toggle the terminal from the top bar. The terminal displays installation progress, server messages, and any build warnings or errors. It is primarily useful for debugging when something is not rendering correctly in the preview.

Keyboard Shortcuts

Browser Requirements

The live preview works best in these browsers:

• Chrome (recommended)
• Edge
• Brave
• Firefox (supported with some limitations)

Safari is not currently supported for the live preview. The code editor and AI chat work in all modern browsers, but the live preview requires one of the browsers listed above.

Troubleshooting

Preview Not Loading

If the preview is stuck on a loading screen:

• Refresh the page — This restarts the preview runtime. Your files are saved and will reload.
• Check your browser — Make sure you are using Chrome, Edge, Brave, or Firefox.
• Check available memory — The preview needs approximately 2 GB of free memory. Close other tabs if your device is running low.
• Try a different browser — If the preview fails in one browser, try Chrome.

Preview Shows Errors

If the preview displays an error message instead of your site:

• Read the error — The error message usually identifies the file and issue. Common causes are missing imports, syntax errors, or broken references.
• Ask the AI to fix it — Open the chat panel and describe the error. The AI can read error messages and apply fixes.
• Check the terminal — Toggle the terminal for more detailed error output.
• Undo recent changes — If the error appeared after a specific edit, use Cmd/Ctrl + Z to undo and try a different approach.