Glitch Live Preview: Instant Feedback

Problem: Manual Refresh After Every Change

When tweaking HTML, CSS, or JavaScript, the usual workflow involves saving a file and then clicking the browser’s reload button. That round‑trip breaks focus and slows iteration, especially when you’re experimenting with layout or debugging a client‑side issue.

Thesis: Glitch’s Live Preview Eliminates the Refresh Step

Glitch’s Live Preview feature automatically rebuilds the project and hot‑reloads the running Node process whenever you save a file. The preview URL updates in real time, showing the latest markup without you leaving the editor.

Under the hood

Each Glitch project runs inside a sandboxed Node.js container. A file‑watcher (based on the open‑source chokidar) monitors the project directory. When a file changes, the watcher sends a signal over a WebSocket connection to the running process, which then invokes module hot‑reloading—typically via nodemon or custom middleware. The editor receives the updated HTML/CSS/JS and pushes it to the preview pane instantly.

Worked Example: Adding a Timestamp

1. Create a new Glitch project: glitch new my‑timestamp‑app (run in a terminal with appropriate permissions).
2. In the file explorer, add a new file called index.html with the following minimal markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Glitch Timestamp</title>
  </head>
  <body>
    <p>Current time: <span id="time"></span></p>
    <script>
      function update() {
        document.getElementById("time").textContent = new Date().toLocaleTimeString();
      }
      setInterval(update, 1000);
    </script>
  </body>
</html>

1. Save the file. Glitch’s watcher detects the change, triggers a rebuild, and the preview pane refreshes automatically. You should see the “Current time” line update to the current second without any manual reload.

Verifying the hot‑reload event

Open the browser’s developer console on the preview page. After each save, look for a log message such as [hmr] Applied update. That message confirms the hot‑reload cycle ran successfully.

Trade‑offs and Limitations

• In‑memory state is not preserved. Any server‑side data, caches, or WebSocket connections are lost when the process restarts. If your bug depends on state that survives across edits, you’ll need to restart the project manually or use a persistent storage solution.
• Latency on the free tier. Large projects with many dependencies may exhibit a noticeable delay—sometimes several seconds—between saving a file and the preview reflecting the change. This is more apparent when the project graph includes heavy native modules.

When to fall back to a manual refresh

If you suspect a bug that involves long‑running process state, disable Live Preview temporarily. You can add "install": false to your .glitch.json or stop the file‑watcher via the project’s controls. Once disabled, edits will require a manual browser refresh, giving you a clean state to test.

Actionable Closing

Start a fresh Glitch project, add a simple HTML file that displays a timestamp, and edit the file. Watch the preview update instantly, and open the console to confirm the [hmr] Applied update message. If you need to debug server‑side state, remember to turn Live Preview off and refresh manually. This workflow lets you iterate quickly on client‑side changes while staying aware of the feature’s limitations.