# How OfficeCLI Watch Mode Provides Real-Time Browser Preview Updates > Discover how OfficeCLI's watch mode delivers real-time browser preview updates via SSE connections and targeted DOM mutations. Experience instant feedback for your development workflow. - Repository: [OfficeAI/OfficeCLI](https://github.com/iofficeai/OfficeCLI) - Tags: how-to-guide - Published: 2026-07-08 --- **OfficeCLI's watch mode establishes a persistent Server-Sent Events (SSE) connection between a local HTTP server and your browser, streaming JSON patch instructions that trigger targeted DOM mutations while preserving UI state through a hook-based decoration system.** OfficeCLI, the open-source command-line tool maintained by iOfficeAI, enables developers to preview Word, Excel, and PowerPoint documents directly in the browser. The watch mode creates a live editing environment where changes made via the CLI or API calls reflect instantly in the preview without full page reloads, leveraging a tightly-coupled client-server architecture defined in the `src/officecli/Core/Watch/` directory. ## Architecture Overview The system operates through three distinct layers that coordinate to deliver seamless real-time updates: - **Server Layer**: An embedded HTTP server ([`WatchServer.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/WatchServer.cs)) that serves the initial HTML preview and manages the `/events` SSE endpoint - **Core DOM Layer**: The [`watch-sse-core.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/watch-sse-core.js) script that parses incoming messages and executes surgical DOM mutations - **Overlay Layer**: The [`watch-overlay.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/watch-overlay.js) script that maintains selections, marks, and UI decorations across mutation cycles This separation ensures that structural document updates and decorative UI elements remain synchronized without interfering with each other. ## The Server Layer When you invoke `officecli watch `, the CLI launches a `WatchServer` instance bound to a random local port (e.g., `http://127.0.0.1:49712`). Located at [`src/officecli/Core/Watch/WatchServer.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Core/Watch/WatchServer.cs), this server performs two critical functions: it generates the initial preview page embedding your rendered document, and it opens an **EventSource** stream at `/events` that pushes JSON messages to connected browsers. The server communicates with the CLI process through [`WatchNotifier.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/WatchNotifier.cs). When the CLI re-renders part of a document after an edit, it calls `WatchNotifier.Notify()` with a JSON payload. The notifier opens a TCP client to the watch server, writes the message, and closes the connection. The server then broadcasts this payload to every connected browser via the SSE stream, ensuring all preview clients remain synchronized. ## Client-Side Script Layers The browser preview loads two embedded JavaScript resources as base64-encoded data URIs, creating a two-tier handling system for updates. ### Core DOM Handling The [`src/officecli/Resources/watch-sse-core.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Resources/watch-sse-core.js) script establishes the SSE connection to `/events` and defines the primary mutation logic. Upon receiving a message, it parses the `action` field and executes the appropriate DOM operation: - **`full`**: Replaces the entire `` content for non-incremental document types - **`replace`**, **`add`**, **`remove`**: Target specific slide containers using `.slide-container[data-slide]` selectors - **`word-patch`**: Applies block-level diff patches to Word documents using `` and `` markers - **`excel-patch`**: Updates table rows or swaps style sheets for Excel workbooks - **`scroll`**: Jumps to specific selectors or slide numbers without DOM manipulation After every mutation, the script calls `window._watchReapplyHook()`, allowing secondary layers to restore UI state. ### Overlay Persistence The [`src/officecli/Resources/watch-overlay.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Resources/watch-overlay.js) script manages transient UI elements like text selections, highlights, and rubber-band boxes. It registers itself as the reapply hook via `window._watchReapplyHook = reapplyDecorations`. The `reapplyDecorations()` function executes two primary operations after each DOM mutation: 1. **`applySelectionToDom()`**: Re-applies CSS classes like `officecli-selected` and positions an absolutely-positioned overlay (`officecli-sel-overlay`) to highlight the current selection 2. **`applyMarks()`**: Walks the stored `_marks` array to inject `` wrappers around matched text and adds block-level outlines for shape-based marks This hook system ensures that user selections and annotations persist even as the underlying document structure changes dramatically. ## The Real-Time Update Flow The complete update cycle follows this precise sequence: 1. **CLI detects change** and re-renders the affected document portion 2. **`WatchNotifier.Notify()`** sends a JSON payload via TCP to the running server 3. **Server broadcasts** the message through the SSE `/events` stream to all browsers 4. **[`watch-sse-core.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/watch-sse-core.js)** receives the message and identifies the action type 5. **DOM mutation** occurs using methods like `el.parentNode.replaceChild(newEl, el)` or `innerHTML` replacement 6. **`_executeScripts()`** re-runs any `