See your site in the preview before publishing

What the preview shows

The preview sits to the right of the chat, in the Preview tab. It shows the project's current version, including changes that haven't been published yet. Visitors only see what you publish.

In the preview the site really works: links, menus and buttons respond to clicks. In code projects with a database, the preview uses the project's real data, so whatever you add while testing is saved.

Screen sizes

The desktop, tablet and phone buttons at the top of the editor change the preview's width:

The site reacts to the width as it would on a real device: at phone size you see the phone layout, not a shrunken desktop one. Refresh preview rebuilds the preview, in both the visual editor and code mode.

Preview tools in the visual editor

• Select elements (S): click a block to select it; the chat starts talking about it and the Edit tab shows its fields.
• Edit the selected block: opens the chosen block's fields.
• Attach a screenshot to the chat: takes a picture of the preview and attaches it to your next request.
• Hide toolbar hides these tools; Show preview toolbar brings them back.
• The page selector at the top switches the page shown.

Switch pages and select a component in code mode

Above the preview, the button with the current address (like /) lists every page of the site. Pick one or type an address to open it. Clicking a link inside the site also updates the button, and what you ask in the chat is about the open page.

Select component, next to it, turns on component mode: move the mouse over the site to see each part outlined with its name, and click the one you want to change. It becomes the chat's selection, and the next request changes only that part. Esc leaves the mode. See Add context.

Open the site in a new tab and share it

• In the visual editor, Open in a new tab appears once the site is published and opens the live version, not your unpublished changes.
• Share and then Copy link copies the published site's address. Before the first publish, it says Publish first to get a link you can share.
• In code mode, after publishing, the Live at … notice takes you to the site. In My projects, the View site button does too.
• There is no preview link yet for showing the site to someone before publishing.

Preview a proposal before applying it

In code mode, when a change arrives as a proposal, Preview shows the site as it would look. A banner says Previewing the proposal — it isn't applied yet., with the Apply and Back to the current site buttons.

When the preview doesn't show up