PanoramicData.MicrosoftWhiteboardExport

Export your Microsoft Whiteboard boards to durable, self‑contained files — a high‑resolution screenshot and a true vector SVG reconstruction — before they are gone.

Microsoft is retiring the consumer/free Whiteboard experience and has announced that personal boards will be deleted. Once that happens the content is unrecoverable. This tool lets you bulk‑export all of your boards to your own disk so you keep a faithful, openable copy of every board.

TL;DR

cd src
dotnet run ListBoards.cs   -- --install          # one‑time: fetch the browser
dotnet run ListBoards.cs                          # sign in once, list + download raw data
dotnet run ExportBoards.cs -- --both              # screenshots + vector SVG for every board

Your exported boards land in ./output/boards/<board-id>/.

---

Table of contents

• What you get
• How it works (the approach)
• Security & privacy ← please read this
• Prerequisites
• Installation
• Usage
• Output file formats
• How the vector SVG is reconstructed
• Limitations
• Troubleshooting
• Licence

---

What you get

For every board, the tool produces a self‑contained folder (output/boards/<board-id>/) containing:

File	What it is
board-screenshot.png	Full‑fidelity raster snapshot of the board at 2× device‑pixel ratio, with app chrome removed and white margins trimmed. This is the pixel‑perfect record.
<board-id>.whiteboard.svg	The portable vector export: the reconstructed vector canvas wrapped with embedded metadata. Opens in any browser.
board-canvas.svg	The raw reconstructed vector canvas (the inner SVG that *.whiteboard.svg wraps).
board-thumbnail.png	Small preview thumbnail (as shown in the Whiteboard board picker).
board-fluid-ops.json	The raw source data: the Fluid Framework operation batches that describe the board (ink strokes, sticky notes, shapes, text, images…). This is Microsoft's own vector data straight from the API.
board-metadata.json	Board id, title, timestamps, extraction statistics, an inventory of ink groups, and a manifest of the files produced.
board-compare.html	A side‑by‑side PNG ↔ SVG comparison viewer for quickly checking fidelity.

The tool is deliberately belt‑and‑braces: you keep a raster snapshot (always correct), a vector reconstruction (scalable/editable), and the original raw op data (so a better converter can be written later). Nothing about your board is thrown away.

---

How it works (the approach)

Microsoft Whiteboard is a web app backed by a REST API and the Fluid Framework real‑time data model. There is no official "export everything" button, so this tool combines two complementary techniques, split across two small programs:

1. ListBoards.cs — enumerate & pull raw data (REST)

1. Launches a real browser (Microsoft Edge, or Playwright's bundled Chromium) using a persistent local profile, so you sign in only once.
2. Navigates to https://whiteboard.cloud.microsoft, which triggers the normal Microsoft sign‑in flow in the browser (see Security).
3. Watches the app's own network traffic and captures the Bearer token the web app uses, plus the board‑list JSON responses.
4. Calls the same public REST API the web app uses to enumerate all your boards and download each board's raw Fluid op batches and thumbnail.

2. ExportBoards.cs — render & reconstruct (browser automation)

1. Re‑uses the signed‑in profile, opens each board in the browser, and lets it fully render and settle.
2. Captures a clean, high‑resolution screenshot (removing the app toolbar, banners and floating controls, then trimming white margins).
3. Reconstructs a vector SVG by reading the live DOM: pen/highlighter ink is copied as real SVG vector paths, while sticky notes, text boxes, shape labels, reaction pills and images are rebuilt as HTML inside SVG <foreignObject> elements. The dot grid is synthesised as a toggleable layer.
4. Assembles the per‑board archive and a comparison viewer.

Keeping the two phases separate means you can re‑enumerate quickly, re‑render a single board, or point the renderer at a previously‑downloaded catalogue — without repeating the whole run.

---

Security & privacy

This section matters — please read it before running the tool.

Sign‑in: interactive, in a real browser, never handled by this tool

• Authentication happens entirely inside a normal browser window, on Microsoft's own sign‑in pages. You type your credentials (and complete MFA) directly into Microsoft's UI.
• This tool never sees, requests, stores, or transmits your username or password. There is no place in the code that reads a password. It only automates navigation and reading what the signed‑in web app already loaded.

The login sound (the beep)

While the tool waits for you to finish signing in, it emits a short beep (Console.Beep(880, 200)) roughly once a minute and brings the browser window back to the foreground. This is purely a local convenience cue so you don't miss the fact that a browser window is waiting for you in the taskbar — especially handy on the first run. It sends nothing anywhere and has no security function; it's just an audible "your attention is needed here" nudge. If sign‑in doesn't complete within 10 minutes, the tool gives up cleanly.

The persistent browser profile

• To avoid making you sign in for every board, the browser uses a persistent user profile stored locally in your operating‑system temp directory (%TEMP%\wb-exporter-profile on Windows).
• This is exactly like a normal browser "remembering" your login: it holds session cookies on your machine only. It is not part of this repository and is covered by .gitignore.
• To sign out / wipe the session, delete that folder. The next run will prompt for a fresh sign‑in.

The access token

• The app's Bearer token is captured in memory at runtime from the browser's own outgoing requests, and is used only to call the same Microsoft Whiteboard REST API that the web app itself calls.
• The token is not written to disk and is discarded when the program exits. It is short‑lived and issued by Microsoft to the web app, not by this tool.

Where your data goes

• Everything runs locally. Your board content is written only to the output folder you choose (default ./output). Nothing is uploaded anywhere, and there is no telemetry of any kind.
• The exported files (board-fluid-ops.json, screenshots, SVGs) contain your board content — treat them as you would any sensitive document. The .gitignore in this repo deliberately excludes output/ so you never accidentally commit board data.

Your responsibilities

• Only export boards from your own account, and only where you're permitted to.
• Make sure exporting complies with your organisation's data‑handling policies.
• The software is provided as‑is, without warranty (see Licence).

---

Prerequisites

• .NET 10 SDK or newer. The tools are file‑based C# apps run with dotnet run <file>.cs.
• A Microsoft account with Whiteboard boards to export.
• One of:
  • Microsoft Edge installed (used by default, no download needed), or
  • Playwright's bundled Chromium (installed on demand — see below).

The tools are developed and tested on Windows. The screenshot cropping uses System.Drawing.Common, which is fully supported on Windows; on other platforms you may need the appropriate native libraries.

---

Installation

git clone https://github.com/panoramicdata/PanoramicData.MicrosoftWhiteboardExport.git
cd PanoramicData.MicrosoftWhiteboardExport/src

# One-time: download the Playwright browser (only needed if you don't have Edge,
# or the first time you use the bundled Chromium fallback)
dotnet run ListBoards.cs -- --install

NuGet packages (Playwright, System.Drawing.Common, Snappier) are restored automatically by dotnet run — they are pinned in the #:package directives at the top of each file.

---

Usage

The export is a two‑step pipeline. Run both from the src/ folder.

Step 1 — list & download raw data

dotnet run ListBoards.cs

• On the first run, a browser window opens — sign in with your Microsoft account. (Listen for the beep; check your taskbar.)
• Enumerates every board and downloads each board's raw Fluid op data and thumbnail into ./output/boards/<board-id>/ and ./output/thumbnails/.

Options:

Option	Effect
-- --list-only	Just print the board list; download nothing.
-- --id <guid>	Only this board.
-- --out <dir>	Output root (default ./output).
-- --redo	Re‑download boards already present.
-- --install	Download the Playwright browser, then exit.

Step 2 — screenshots + vector SVG

dotnet run ExportBoards.cs -- --both

• Opens each board, captures the screenshot, reconstructs the vector SVG, and writes the full per‑board archive.

Options:

Option	Effect
-- --both	Produce both the screenshot and the vector *.whiteboard.svg (recommended).
(no --both)	Screenshots only.
-- --id <guid>	Only this board.
-- --redo	Re‑generate boards already exported.
-- --boards <dir>	Read the board catalogue from a custom folder (default ./output/boards).
-- --out <dir>	Write the per‑board archive folders to a custom location (default: the catalogue folder).

Example — export everything into a synced folder:

dotnet run ExportBoards.cs -- --both --out "C:\Users\me\OneDrive\Whiteboards"

Example — test a single board first:

dotnet run ExportBoards.cs -- --both --redo --id 00000000-0000-0000-0000-000000000000

Open the generated board-compare.html to eyeball the screenshot against the SVG.

---

Output file formats

board-fluid-ops.json — the raw source

A JSON array of the Fluid Framework operation batches captured from the Whiteboard API. Each entry records the source URL, the originating file, and the decoded data payload. This is the authoritative vector description of the board as Microsoft stores it, and is preserved verbatim so the board can be re‑rendered by future/better converters.

board-metadata.json — the manifest

{
  "id":            "<board-guid>",
  "title":         "My board",
  "exportedUtc":   "2026-07-27T12:34:56Z",
  "extraction":    { "paths": 79, "htmlElements": 20, "inkGroups": [ /* … */ ] },
  "files":         { "svg": "board-canvas.svg", "screenshot": "board-screenshot.png", /* … */ }
}

Includes the board id/title, timestamps, extraction statistics, an inventory of ink groups (with their bounding boxes and classes), and a manifest of the files produced.

board-canvas.svg / <board-id>.whiteboard.svg — the vector export

A standards‑compliant SVG that opens in any modern browser. Structure:

<svg viewBox="0 0 W H" preserveAspectRatio="xMidYMid meet">
  <style>…</style>
  <defs>… drop-shadow filter + dot-grid pattern …</defs>
  <rect …/>                       <!-- board background colour -->
  <g id="grid-layer">…</g>        <!-- synthesised dot grid, toggle with display:none -->
  … sticky notes &amp; images …      <!-- HTML in <foreignObject>, under the ink -->
  … ink strokes …                 <!-- real vector <path> data -->
  … text labels &amp; reaction pills <!-- HTML in <foreignObject>, over the ink -->
</svg>

The *.whiteboard.svg variant additionally embeds board metadata inside the SVG's <metadata> element, making it a single portable file that carries its own provenance. ViewBox units map 1:1 to on‑screen CSS pixels.

board-screenshot.png — the raster record

A viewport screenshot at 2× device‑pixel ratio. Before capture, the tool hides the app shell (top bar, retirement banner, tool dock, and the floating zoom control) and then crops any fully‑white margins, so you get just the board.

board-compare.html — QA viewer

A tiny self‑contained page that shows the PNG and the SVG on top of each other. Press Space to toggle PNG ↔ SVG and O to overlay them, so you can verify fidelity at a glance.

---

How the vector SVG is reconstructed

Microsoft Whiteboard renders different element types in different ways, so the reconstruction treats each appropriately:

• Ink (pen & highlighter) is genuine SVG in the app's DOM. It is copied out as real vector <path> data, preserving colours and stroke widths. Each stroke group is wrapped in a correctly‑scaled <svg> viewport so it renders at its true size.
• Sticky notes are rebuilt as HTML in <foreignObject>, with a synthesised top‑to‑bottom gradient and border matching the note colour.
• Text boxes preserve line breaks and are prevented from re‑wrapping (the app font is tighter than common SVG fallbacks).
• Shapes (rectangle, ellipse, connectors) are vector paths. Because the app's shape SVGs omit an intrinsic viewBox, the tool synthesises one from each shape's geometry so it scales to its true size instead of overflowing.
• Shape labels (text inside a shape) are matched to their containing shape and centred within the shape's bounds, not the text's own box.
• Reaction pills (e.g. 👍 with a count) are redrawn as rounded badges.
• Images are fetched and embedded as base64 data URIs, so the SVG is fully self‑contained and works offline.
• The dot grid is drawn by the app on a canvas (not in the DOM), so it is re‑created as an SVG pattern in a toggleable <g id="grid-layer"> layer.
• Screen‑reader‑only text is detected and omitted so accessibility helper text doesn't leak into the visible output.

---

Limitations

• Reconstruction fidelity is very high but not guaranteed pixel‑perfect for every exotic element; the board-screenshot.png is always the ground‑truth raster, and board-fluid-ops.json preserves the raw data for future re‑rendering.
• The tools drive a visible browser and are designed for interactive use on a desktop, not headless CI.
• Developed and tested on Windows. The white‑margin crop relies on System.Drawing.Common.
• Microsoft may change the Whiteboard web app or API at any time, which could require updates here. Export sooner rather than later.

---

Troubleshooting

• "Sign‑in timed out" — you have 10 minutes to complete sign‑in; re‑run and watch for the browser window (listen for the beep).
• Wrong account / want to switch users — delete %TEMP%\wb-exporter-profile and run again.
• No browser launches — install Microsoft Edge, or run dotnet run ListBoards.cs -- --install to fetch Playwright's Chromium.
• A board looks off in the SVG — open board-compare.html to compare; the PNG is always faithful, and the raw ops are preserved in board-fluid-ops.json.

---

Licence

MIT © 2026 Panoramic Data Limited.

Provided as‑is, without warranty. You are responsible for ensuring your use complies with Microsoft's terms and your organisation's data‑handling policies. This project is not affiliated with or endorsed by Microsoft.