# How OfficeCLI's Watch Command Live Preview Feature Automatically Refreshes the Browser on Document Edits > Discover how OfficeCLI's watch command live preview automatically refreshes your browser on document edits. Learn how SSE and WatchServer deliver instant HTML updates. - Repository: [OfficeAI/OfficeCLI](https://github.com/iofficeai/OfficeCLI) - Tags: how-to-guide - Published: 2026-07-17 --- **The live preview feature uses a Server-Sent Events (SSE) relay running in a background `WatchServer` process that pushes HTML updates to the browser through a named pipe whenever document edits occur.** The `officecli watch` command provides a live preview feature that automatically refreshes your browser as you edit documents. This capability is implemented in the iOfficeAI/OfficeCLI repository through a lightweight SSE relay architecture that bridges CLI commands with browser updates. Understanding this mechanism reveals how the tool achieves real-time synchronization without requiring a full page reload. ## How the Watch Server Initializes the Live Preview When you execute `officecli watch `, the CLI spawns a dedicated `WatchServer` process that acts as the central hub for the live preview feature. In [`src/officecli/Core/Watch/WatchServer.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Core/Watch/WatchServer.cs), the constructor (lines 31-41) initializes a `TcpListener` on a local port and writes a temporary marker file to `$TMPDIR` (named `officecli-watch-.port`). This marker allows subsequent CLI commands to discover the running server without spawning duplicates. The server embeds two JavaScript resources directly into the preview page: [`watch-sse-core.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/watch-sse-core.js) and [`watch-overlay.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/watch-overlay.js). As implemented in [`WatchServer.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/WatchServer.cs) (lines 90-99), the server injects these scripts as `