# How to Perform Element-Level Manipulation in OfficeCLI Using DOM Operations > Learn element-level manipulation in OfficeCLI with DOM operations. This guide explains how OfficeCLI uses SSE for targeted DOM mutations like adding paragraphs or replacing slides. - Repository: [OfficeAI/OfficeCLI](https://github.com/iofficeai/OfficeCLI) - Tags: how-to-guide - Published: 2026-07-28 --- **OfficeCLI uses a two-layer JavaScript architecture that receives Server-Sent Events (SSE) to perform targeted DOM mutations—such as adding Word paragraphs or replacing PowerPoint slides—then re-applies UI decorations via `window._watchReapplyHook()`.** The **iOfficeAI/OfficeCLI** repository renders Microsoft Office documents as a live browser DOM, enabling real-time document editing through programmatic **element-level manipulation**. By leveraging the patch system in [`watch-sse-core.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/watch-sse-core.js) and the decoration layer in [`watch-overlay.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/watch-overlay.js), developers can insert, update, or delete specific document fragments without full page reloads. ## Understanding the Two-Layer Architecture OfficeCLI’s browser preview relies on two distinct JavaScript layers that separate data mutation from UI decoration. ### Layer 1: Core Rendering and SSE Listener Located in [[`src/officecli/Resources/watch-sse-core.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Resources/watch-sse-core.js)](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Resources/watch-sse-core.js), this layer opens an `EventSource` connection to `/events` and listens for update messages from the server. It parses incoming HTML and performs direct DOM mutations including full-body swaps, block-level patches, and slide add/replace/remove operations. ### Layer 2: Overlay and Decoration Implemented in [[`src/officecli/Resources/watch-overlay.js`](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Resources/watch-overlay.js)](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Resources/watch-overlay.js), this layer registers `window._watchReapplyHook()` to re-apply selection highlights, text marks, and UI decorations immediately after Layer 1 completes any DOM mutation. ## SSE Update Message Format The server streams JSON-encoded SSE events containing an `action` field. For **element-level manipulation**, the relevant actions include: - **`replace`**: Replace an entire slide or document block. Payload includes `slide` (number) and `html` (new markup). - **`add`**: Insert a new slide or block. Requires `slide` and `html`. - **`remove`**: Delete a slide or block. Requires `slide` only. - **`full`**: Replace the entire `` as a fallback when the client has missed messages. Requires `html`. - **`word-patch` / `excel-patch`**: Apply granular block patches. Payload contains `patches: [{op, block, html?, scrollTo?}]` where `op` can be `add`, `replace`, `remove`, or `style`. The core message handler resides in **watch-sse-core.js** at lines [17-48](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Resources/watch-sse-core.js#L17-L48), with per-action logic beginning at line [317](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Resources/watch-sse-core.js#L317). ## Performing DOM Mutations ### Full-Body Replacement When the client receives a `full` action or detects a missed message, Layer 1 executes `_replaceDocumentBody()`: ```javascript function _replaceDocumentBody(msg) { fetch('/').then(r => r.text()).then(html => { const doc = new DOMParser().parseFromString(html, 'text/html'); document.body.innerHTML = doc.body.innerHTML; _callReapplyHook(); }); } ``` This approach creates a fresh document using `DOMParser`, swaps the existing `` content in a single operation to preserve scroll position, then triggers the overlay hook to refresh decorations. ### Block-Level Patches for Word and Excel For `word-patch` or `excel-patch` actions, the `wordPatchUpdate()` function manipulates content between invisible marker spans (`` for begin, `` for end): ```javascript function wordPatchUpdate(msg) { msg.patches.forEach(patch => { const start = document.querySelector(`.wb[data-block="${patch.block}"]`); const end = document.querySelector(`.we[data-block="${patch.block}"]`); if (patch.op === 'remove') { /* remove nodes between start and end */ } else if (patch.op === 'replace') { /* replace inner range */ } else if (patch.op === 'add') { const tmp = document.createElement('div'); tmp.innerHTML = '' + patch.html + ''; prevEnd.parentNode.insertBefore(tmp.firstChild, prevEnd.nextSibling); } else if (patch.op === 'style') { /* replace ' }] }) }); ``` The `style` operation (lines [40-46](https://github.com/iOfficeAI/OfficeCLI/blob/main/src/officecli/Resources/watch-sse-core.js#L40-46)) updates the document's `