Modulify
Dashboard

Use the preview

Read the live preview, move between pages, and change the viewport.

On this page

The Preview tab runs your working copy of the site in a real browser frame. It is the site itself, not a screenshot, so links work, forms render and scripts run. It updates as chat makes changes, and none of it is public until you publish.

Wait for the preview to start

The first time you open a project the preview has to boot. A status pill sits above the frame and names the current step: Resuming preview..., Provisioning preview..., Booting preview... and Syncing your files.... While AI is applying changes the same pill reads Applying changes..., and while your work is being saved it reads Saving your changes....

If a step fails the pill turns into Could not load your files with a Retry next to it.

The buttons on the address pill stay disabled until the preview is up. Refresh and full screen say The preview is still starting while you wait.

It updates itself

You do not have to press anything to see a change. Once a saved file compiles, the preview hot-reloads and the frame catches up on its own, so Refresh is an escape hatch rather than a step you take after every edit.

When a change from chat touched files and the preview does not hot-reload, Modulify reloads the panel for you about five seconds later. A restored version is covered the same way. The automatic reload leaves a warning in the API Logs stream reading Preview did not hot-reload. Refreshed automatically, so a reload you did not ask for always has a record. Logs covers reading that stream.

You can also tell chat the preview looks stale and it will reload the panel for you. The transcript shows a Refreshing preview step that settles to Refreshed preview, and the API Logs stream gets a Preview refreshed line. Chat does this only when you raise it, so a reply that says nothing about refreshing is working as intended.

A reload is not a rebuild. It redraws the frame from the site already running, so it cannot rescue a preview that is blank because the code will not compile. That needs the code itself fixed, which is what chat is for.

Connect a domain from the preview

Once your site has been published, a strip can appear between the toolbar and the frame. It carries a globe, your full https://my-site.modulify.website address, and an orange Connect domain button with a crown.

The strip is only for the person who can act on it, so it shows when you own the workspace that pays for the project, that workspace is on the Free plan, and no custom domain is attached yet. Custom domains need a paid plan, so Connect domain opens the plan and credits modal. The strip goes away once the workspace is paying or a domain is connected. See Connect a custom domain.

Move between pages

The address pill in the centre of the header shows the current path. Click it and a menu opens listing your pages in three groups:

  • Static Routes, which you can open
  • Dynamic Routes, which are listed for reference and cannot be opened directly
  • Utility Routes

Type into the pill to filter that list. If what you type is not one of your pages, a Go to row appears so you can open the path anyway. Press Enter to navigate, Escape to close.

Hover the page tab at the left of the pill and a card shows what that page reports about itself: favicon, title, meta description, tags, and the social preview image. When there is no image it reads No preview image.

You can also just click links inside the page. An internal link navigates the preview, and the address pill follows, so the path updates without you touching the selector. A link pointing anywhere else opens in a new browser tab instead of loading inside the frame. Neither is a fault to chase.

Refresh, full screen and viewport

Three controls sit at the right of the address pill.

The circular arrow reloads the frame. Its tooltip is Refresh.

The expand arrows open Full screen. The site fills the window, the toolbars disappear, and an Exit button with the Esc shortcut appears in the top right. Full screen is disabled while an unfixed runtime error is showing, with the tooltip Fix the runtime error to open full screen.

The device icon switches the viewport. Desktop uses the full width, Tablet renders at 768px wide and Mobile at 375px. The choice is yours alone and does not change the site.

Switch language

If your site has more than one language, the two-letter code next to the device icon switches which one the preview renders, and the CMS tab follows the same choice. Pick a language from the menu, or click the small cross on the code to go back to the default. When there is only one language the menu reads No other languages and offers Ask AI to add a language, which drops that request into chat for you. Multiple languages covers how a site gains a second language in the first place.

When something breaks

If the page throws at runtime, the frame is replaced by a Runtime error panel that reads Your site hit a runtime error. The Fix with AI button attaches the error to chat and sends you to the conversation. Under it sits an Error details toggle, which opens the raw error text with a copy button in the corner.

The same panel covers a page that fails on the server rather than in the browser. When nothing more specific was captured it reads The page failed to render on the server.

Some pages cannot host the editing tools. On those you get a small Editing tools unavailable here notice with a Retry, and selecting, inline editing and commenting are unavailable until the connection comes back.

Next