Site Designer Guide
live-preview local-server testing php javascript

Live Preview

Live Preview spins up a local HTTP server for your project so you can test your site exactly as visitors will experience it — including JavaScript interactions, form submissions, and server-side PHP scripts.

What is Live Preview?

When you open a file directly in a browser (the file:// protocol), many web features are blocked for security reasons: JavaScript modules, fetch requests, localStorage in some browsers, and PHP do not work correctly. Live Preview solves this by serving your project over http://localhost, giving your pages a proper origin just like a real web server.

Opening Live Preview

Click the eye icon in the toolbar or press Ctrl+L (Windows) / Cmd+L (macOS). Site Designer saves the current page automatically, starts a local HTTP server, and opens the project in your default browser.

The browser address bar shows something like http://localhost:8080 — this is your live local URL.

Why use Live Preview vs. the canvas?

The canvas in Site Designer gives you a visual editing environment, but it is not a browser. Use Live Preview when you need to test:

  • JavaScript interactions — custom scripts, third-party widgets, animations triggered by scroll or click
  • Form submissions — HTML form validation, AJAX submissions, POST handlers
  • PHP scripts — contact forms, server-side includes, dynamic content (requires XAMPP or another local PHP server; see below)
  • External fonts — some Google Fonts and self-hosted fonts load correctly only over HTTP
  • Browser APIs — geolocation, Web Audio, Service Workers, and other APIs gated behind a secure or same-origin context
  • Responsive behavior at real pixel density — test on your actual device or resize the browser window freely

Auto-reload on save

While Live Preview is active, every time you save a page in Site Designer (Ctrl+S / Cmd+S ), the browser tab reloads automatically. This tight loop lets you see changes instantly without switching context.

PHP and XAMPP integration

Site Designer’s built-in server handles static files. For PHP-powered pages:

  1. Install XAMPP (or MAMP/Laragon)

    Download and install XAMPP for Windows or macOS. It provides Apache + PHP locally.

  2. Point your project folder to htdocs

    Move or symlink your Site Designer project folder into XAMPP’s htdocs directory (e.g., C:\xampp\htdocs\my-site\).

  3. Start Apache in XAMPP

    Open the XAMPP Control Panel and click Start next to Apache.

  4. Open via XAMPP URL

    Instead of using Site Designer’s built-in Live Preview, navigate to http://localhost/my-site/ directly in your browser to get PHP processing.

Debugging with browser DevTools

With Live Preview open in Chrome, Firefox, or Edge, you have full access to browser DevTools:

  • Console — view JavaScript errors and console.log output
  • Network — inspect HTTP requests, check for 404 errors on assets
  • Elements — inspect and live-edit the rendered DOM
  • Application — check cookies, localStorage, and IndexedDB

Press F12 or Ctrl+Shift+I in any browser to open DevTools.