Observable Notebooks 2.0 export

A bookmarklet that downloads the source of any Observable Notebooks 2.0 notebook as a self-contained Observable 2.0 .html file. Useful for editing with Observable Desktop.

Overview

Observable ships each notebook's source inside the page as a Next.js data payload. This bookmarklet reads that payload, reconstructs the notebook, and serializes it back into the Observable 2.0 file format — a single <notebook> document with one <script> element per cell. The result is a portable file you can version-control, edit locally, or re-import.

The output is byte-for-byte identical to what Notebook Kit's own serialize() produces, so Observable Desktop and notebooks build read it without complaint.

Everything runs client-side against the notebook you're viewing. Nothing is sent anywhere.

Install

Open the tool page.
Drag the Observable Notebooks 2.0 export button onto your browser's bookmarks bar (or right-click it and choose Add to bookmarks).

If dragging doesn't work in your browser, create a new bookmark by hand and paste the bookmarklet source (shown on the tool page) as its URL.

Usage

Open a Notebooks 2.0 notebook on observablehq.com.
Click the Observable Notebooks 2.0 export bookmarklet.
A small panel appears in the top-right of the page showing the notebook title, cell count, and file size. Click:
- Download to save the .html file (named after the notebook title), or
- Copy to put the source on your clipboard.

Output format

The exported file is a standard Observable 2.0 notebook:

<!doctype html>
<notebook theme="air">
  <title>My notebook</title>
  <script id="1" type="module" pinned>
    display(1 + 2);
  </script>
  <script id="2" type="text/markdown">
    # Hello
  </script>
</notebook>

Cell modes are mapped to their Observable 2.0 script type (js → module, ts → text/x-typescript, md → text/markdown, sql → application/sql, and so on), and cell attributes id, pinned, hidden, database, output, and format are preserved.

Notes & limitations

Works on Notebooks 2.0 only. Classic notebooks use a different format and are not supported; the bookmarklet says so rather than silently producing an empty file.
Notebooks 2.0 moved from new.observablehq.com to observablehq.com. The old address redirects, and the bookmarklet works on either.
The bookmarklet re-requests the notebook at the URL you're on rather than scraping the rendered page. That's what makes it work after clicking through from a listing — Observable navigates client-side, so the page's own embedded data still describes the page you came from.
Because it reads the saved notebook, uncommitted edits open in the editor are not included.
Only the notebook source is exported. Attached file data and runtime state are not — file attachments stay as FileAttachment() references and will need the files alongside the notebook.
If Observable changes how it embeds notebook data in the page, the bookmarklet may need updating. It fails with a clear alert rather than writing a broken file.