Editor basics

How to preview your site before publishing

September 15, 2026
How to preview your site before publishing

In TeleportHQ, click Preview in the floating toolbar at the bottom of the editor. A new browser tab opens with a working version of your whole site: links go to your other pages, and interactions work. Forms aren't sent from Preview: test them on your published site. Use the Viewport buttons at the top to check desktop, tablet and mobile sizes. Nothing is published.

Before you start

  • The preview is private: it needs you to be signed in with access to the project. To show a work-in-progress site to someone outside your team, use a staging site instead. See How to test changes on a staging site.
  • On a trial, the preview shows the TeleportHQ watermark, like a site published on a trial. Pro and Premium workspaces don't get the watermark.

Steps

  1. Open the page you want to start from.
  2. In the floating toolbar at the bottom center of the editor, click Preview. A new tab opens and shows Loading Preview... while TeleportHQ builds your site. This can take up to a few minutes.
The TeleportHQ bottom toolbar with the Preview button highlighted
  1. When it loads, click around your site as a visitor would.
  2. To check other screen sizes, at the top of the preview tab next to Viewport, click the tablet or mobile icon (tooltips Tablet view and Mobile view). Click the desktop icon (Desktop view) to go back.
The TeleportHQ preview tab with the project name, the Viewport buttons highlighted, and the site shown in mobile view

See your latest changes in the preview

The TeleportHQ preview doesn't refresh by itself while you keep editing.

  1. Make your changes in the editor tab.
  2. Switch to the preview tab. A card shows Project changes detected.
  3. Click Update Preview. The card shows Updating preview... and the page refreshes, staying on the page you were viewing.

Check that it worked

The preview tab's top bar shows your project name followed by (Preview). Your site is fully clickable. Editor-only helpers, such as Grayscale Structure Mode, guide lines and hidden-element outlines, don't appear, because the preview shows your site as visitors will see it.

Troubleshooting

"Preview has expired" / "Reload to spin it back up." The TeleportHQ preview keeps running while its tab is open and on screen. When you switch to another tab, minimize the window or close the preview, it stops a few minutes later. Click Reload to start it again.

"Preview Failed" Something went wrong while building the preview, and the message below the title says what. Click Retry. If it keeps failing, contact support from the Support button in the bottom toolbar. See How to get help.

The preview shows an old version Click Update Preview on the Project changes detected card. If you don't see the card, reload the preview tab.

Try one element without leaving the editor

Some TeleportHQ elements, such as dropdowns, embeds, iframes and rich text, can also be tested right on the canvas. Select the element and click the small green eye button (Preview) next to it. A banner says You are in live preview mode. Click Exit Preview to go back to editing. This is not available for navigation bars, mobile menus, sliders, accordions or component copies.

Good to know

  • Preview isn't publishing. Your live site only changes when you publish. See How to publish your site.
  • Starting page. The preview opens on the page you had open, in the language you were editing.
  • Drafts show in the preview. Content you haven't published yet, such as a draft blog post, shows in your preview so you can check it. Visitors to your live site don't see it.
  • Tablet and mobile sizes. Tablet view is 768 × 1024 pixels and Mobile view is 395 × 767 pixels.
  • Command palette. You can also open a preview with the Preview component command. See How to use the command palette.
Share

Related Articles

How to publish your site

In TeleportHQ, click Publish at the top right of the editor, keep Production selected, and click Publish to Production; a progress bar beside the button shows each step, and after a few minutes your site is live on a free TeleportHQ address that you can share.

How to test changes on a staging site before going live

In TeleportHQ, open Publish → Staging and click Publish to Staging to put your changes on a private test address; when you are happy, go back to Production and click Make it live to serve that exact build on your live site without rebuilding.

How to zoom and move around the canvas

In the TeleportHQ editor, use the − and + buttons at the top right of the canvas (or Ctrl/Cmd + and −) to zoom, click the percentage to go back to 100%, and hold Space and drag to move around the page.

How to preview your site as a signed-in user

In TeleportHQ, you preview your web app as a signed-in member by clicking the padlock button at the top left of the canvas, choosing Act as User and picking a user; the canvas then shows that user's details and warns with Access Restricted on pages they can't open, and Act as Logged Out shows the site as a guest again.

Why don't my changes show on my live site?

TeleportHQ doesn't publish design and page changes by itself, so they reach your live site only after you click Publish to Production; blog posts, help center articles and database records go live without a publish, usually within seconds, while cached lists and API answers can lag until their cache time runs out (5 minutes by default).

How to make your site look good on phones and tablets

TeleportHQ sites are designed on a large screen first, and you adjust how they look on smaller screens by switching the canvas to a breakpoint (Tablet, Mobile Landscape or Mobile) and changing styles there; smaller screens inherit everything you don't change.