Any plans for notebook-kit to build notebooks to a javascript package/use in react?

[RobinL]

On my blog, I have a react component that allows me to render Observable 1.0 notebooks, and intersperse them in .mdx.

This relies on the ability to export an observable 1.0 notebook as code (in particular I can npm install the notebook into my gatsby

So for instance:
https://www.robinlinacre.com/computing_fellegi_sunter/
is derived from
https://observablehq.com/@robinl/computing-the-fellegi-sunter-model
via this mdx:
https://github.com/RobinL/robinl.github.io/blob/dev/src/mdx/computing_fellegi_sunter.mdx?plain=1

where within my mdx i can do:

import notebook from "@robinl/computing-the-fellegi-sunter-model";
import {ObservableCell, WithObservableProvider}   from '../components/ObservableCells';

<WithObservableProvider notebook={notebook}>
   # Some markdown
<ObservableCell cellName="input_table_l" className="observableTableWithScrollbar"/>
  *other markdown*
</WithObservableProvider>

I'd like to migrate everything over to notebook-kit and notebooks 2.0. I've been hacking around a bit and have a semi-working solution that uses notebook-kit to transpile the html to a .js file in a similar way to 1.0, but I wondered if there were any plans to support this kind of thing more officially?

This may take the form of a command that ingests a .html notebook (in the format produced by the editor with the <notebook> tag, and outputs an installable javascript package, in the same way that can be done with 'export' in notebooks 1.0. Or there may be a better approach.

Thanks so much!

[bullybutcher]

may I try out your semi-working solution?

[RobinL]

I'm hesitant to post it because it's entirely vibe coded and I think it's almost certainly hacky/bad. I ran into issues with dependencies and the recommendedLibraries.js, no double mainly because I didn't really understand what I was doing

So I really don't recommend you actually use this, especially since Mike says they're likely to implement this properly. But it does work.

I think my main takeaway is that it is not trivial to do this!

vite.config.mjs

// vite.config.mjs
import { defineConfig } from "vite";
import path from "node:path";
import { stat, readdir } from "node:fs/promises";
import { execa } from "execa";
import { viteSingleFile } from "vite-plugin-singlefile";

/** Posix-style URL from a file path, rooted at project root. */
function toUrlFromAbs(abs, root) {
    const rel = path.relative(root, abs).split(path.sep).join("/");
    return rel.startsWith("/") ? rel : `/${rel}`;
}

/** Absolute path for dist output from a notebook file. Mirrors pack.mjs name logic. */
function outAbsFromNotebook(absFile, root) {
    const dir = path.resolve(root, "dist");
    let name = path.basename(absFile);
    name = name.replace(/\.nb\.html$/i, "");
    if (name === path.basename(absFile)) name = name.replace(/\.[^.]+$/, "");
    name = name.replace(/\.nb$/i, "");
    return path.resolve(dir, `${name}.js`);
}

/** Invalidate a ModuleNode (and importers) safely. */
function invalidateModuleDeep(server, mod, seen = new Set()) {
    if (!mod || seen.has(mod)) return;
    seen.add(mod);

    server.moduleGraph.invalidateModule(mod);

    const importers = mod.importers;
    if (importers && typeof importers[Symbol.iterator] === "function") {
        for (const imp of importers) invalidateModuleDeep(server, imp, seen);
    }
}

/** Invalidate a module by file/id/url, if present. */
function invalidateFile(server, absFile) {
    const root = server.config.root;
    const url = toUrlFromAbs(absFile, root);

    const candidates = new Set();

    // Modules keyed by file (can be multiple)
    const byFile = server.moduleGraph.getModulesByFile(absFile);
    if (byFile && typeof byFile[Symbol.iterator] === "function") {
        for (const m of byFile) candidates.add(m);
    }

    // By id and by url (if present)
    const byId = server.moduleGraph.getModuleById(absFile);
    if (byId) candidates.add(byId);

    const byUrl = server.moduleGraph.getModuleByUrl(url);
    if (byUrl) candidates.add(byUrl);

    for (const mod of candidates) invalidateModuleDeep(server, mod);
}

/** Invalidate all modules under /dist (useful after shim/packer changes). */
async function invalidateAllDist(server) {
    const root = server.config.root;
    const dist = path.resolve(root, "dist");
    let files = [];
    try {
        files = (await readdir(dist)).filter((f) => f.endsWith(".js"));
    } catch {
        return;
    }
    for (const f of files) {
        invalidateFile(server, path.resolve(dist, f));
    }
}

function notebookPackPlugin({ glob = "notebooks/*.nb.html" } = {}) {
    return {
        name: "notebook-pack",

        async configureServer(server) {
            const root = server.config.root;

            const runAll = async () => {
                await execa("node", ["pack.mjs", glob], { stdio: "inherit", shell: true });
            };
            const runOne = async (file) => {
                await execa("node", ["pack.mjs", file], { stdio: "inherit", shell: true });
            };

            // Initial pack on server start
            await runAll().catch(console.error);
            await invalidateAllDist(server);
            server.ws.send({ type: "full-reload" });

            const extraWatch = ["templates/nb-shim.mjs", "pack.mjs"];
            server.watcher.add(glob);
            server.watcher.add(extraWatch);

            const onChange = async (p) => {
                try {
                    const abs = path.isAbsolute(p) ? p : path.resolve(root, p);

                    if (p.endsWith(".nb.html")) {
                        await runOne(p);

                        const outAbs = outAbsFromNotebook(abs, root);
                        invalidateFile(server, outAbs);

                        try {
                            await stat(outAbs); // ensure it exists
                            server.watcher.emit("change", outAbs);
                        } catch {
                            /* ignore */
                        }

                        server.ws.send({ type: "full-reload" });
                    } else if (extraWatch.some((x) => p.endsWith(x))) {
                        await runAll();
                        await invalidateAllDist(server);
                        server.ws.send({ type: "full-reload" });
                    }
                } catch (err) {
                    console.error(err);
                }
            };

            server.watcher.on("add", onChange);
            server.watcher.on("change", onChange);
            server.watcher.on("unlink", () => server.ws.send({ type: "full-reload" }));
        },

        // Pack before production builds too
        async buildStart() {
            await execa("node", ["pack.mjs", "notebooks/*.nb.html"], {
                stdio: "inherit",
                shell: true
            });
        }
    };
}

export default defineConfig({
    server: { open: "/test.html" },
    plugins: [
        notebookPackPlugin(),
        // ⬅️ single-file HTML output
        viteSingleFile()
    ],
    build: {
        outDir: "site",
        emptyOutDir: true,
        rollupOptions: {
            // build test.html directly
            input: path.resolve(process.cwd(), "test.html")
        }
    },
    optimizeDeps: {
        include: [
            "@observablehq/runtime",
            "@observablehq/plot",
            "@observablehq/inputs",
            "@observablehq/inspector",
            "@observablehq/stdlib",
            "diff"
        ]
    },
    resolve: {
        alias: {
            my_package: path.resolve(process.cwd(), "my_package")
        }
    }
});

pack.mjs

/* ----------------------------------------------------------
 * pack.mjs — Compile <notebook> (Observable 2.0) ➜ strict ESM module
 * Emits a tiny module that imports a shared helper (nb-shim.mjs)
 * and installs the transpiled cells.
 * Also exports a light 'cells' metadata array for host-side introspection.
 * ---------------------------------------------------------- */

import { readFile, writeFile, mkdir, copyFile } from "node:fs/promises";
import { basename, join } from "node:path";
import { deserialize, transpile } from "@observablehq/notebook-kit";
import { DOMParser } from "linkedom";
import { fileURLToPath } from "node:url";

/* ---------- paths ---------- */
const cwd = fileURLToPath(new URL(".", import.meta.url));
const outDir = join(cwd, "dist");
const templatesDir = join(cwd, "templates");
const shimSrc = join(templatesDir, "nb-shim.mjs");
const shimDst = join(outDir, "nb-shim.mjs");

/* ---------- drop pinned CDN-style imports (e.g. "npm:diff@8") ---------- */
const CDN_IMPORT_RE = /["']npm:([^"']+)["']/;

/* ---------- emit one transpiled cell as literal ---------- */
function serialise(def) {
    const { body, ...rest } = def;
    const lines = [];
    lines.push("  {");
    if (rest.id != null) lines.push(`    id: ${JSON.stringify(rest.id)},`);
    if (rest.name != null) lines.push(`    name: ${JSON.stringify(rest.name)},`);
    lines.push(`    body: ${body},`);
    for (const [k, v] of Object.entries(rest)) {
        if (k === "id" || k === "name") continue;
        lines.push(`    ${k}: ${JSON.stringify(v)},`);
    }
    lines.push("  }");
    return lines.join("\n");
}

/* ---------- build one notebook ➜ dist/<name>.js ---------- */
async function buildOne(htmlPath) {
    let name = basename(htmlPath);
    name = name.replace(/\.nb\.html$/i, "");
    if (name === basename(htmlPath)) name = name.replace(/\.[^.]+$/, "");
    name = name.replace(/\.nb$/i, "");
    const target = join(outDir, `${name}.js`);

    // Ensure dist exists and copy the shared shim
    await mkdir(outDir, { recursive: true });
    await copyFile(shimSrc, shimDst).catch(() => { /* ok if already copied */ });

    const html = await readFile(htmlPath, "utf8");
    const dom = new DOMParser().parseFromString(html, "text/html");

    // Collect the <script> nodes in notebook order so we can read optional DOM ids/names
    const scriptEls = Array.from(dom.querySelectorAll("notebook > script"));

    const notebook = deserialize(html, { parser: new DOMParser() });

    const defs = [];
    for (let i = 0; i < notebook.cells.length; i++) {
        const cell = notebook.cells[i];
        const def = await transpile(cell.value, cell.mode);
        def.id = cell.id; // internal numeric id

        // Optional friendly name from DOM attribute id/name (if not purely numeric)
        const el = scriptEls[i];
        if (el) {
            const domName = el.getAttribute("name") || el.getAttribute("id");
            if (domName) def.name = domName; // keep even if numeric
        }


        defs.push(def);
    }

    // Drop pinned npm: import cells; host page provides those names (e.g. Diff)
    const kept = [];
    for (const d of defs) {
        const bodySrc = String(d.body ?? "");
        if (CDN_IMPORT_RE.test(bodySrc)) continue;
        kept.push(d);
    }

    // Optional: export a small metadata object for host-side discovery
    const cellsMeta = kept.map(d => ({
        id: d.id,
        name: d.name ?? null,
        inputs: d.inputs ?? [],
        outputs: d.outputs ?? [],
        autodisplay: !!d.autodisplay
    }));

    // Assemble final module source
    const moduleSrc = [
        `// 🔒 AUTO-GENERATED — DO NOT EDIT`,
        `import { createDefine } from "./nb-shim.mjs";`,
        ``,
        `const defs = [`,
        kept.map(serialise).join(",\n"),
        `];`,
        ``,
        `export const cells = Object.freeze(${JSON.stringify(cellsMeta, null, 2)});`,
        `export default createDefine(defs);`,
        ``,
    ].join("\n");

    await writeFile(target, moduleSrc, "utf8");
    console.log(`✓  Built ${target}`);
}

/* ---------- CLI ---------- */
if (process.argv.length < 3) {
    console.error("Usage: node pack.mjs notebooks/FILE.nb.html [more files …]");
    process.exit(1);
}

for (const file of process.argv.slice(2)) {
    await buildOne(file);
}

templates/nb-shim.mjs

// templates/nb-shim.mjs
import { Inspector } from "@observablehq/inspector";
import { Library } from "@observablehq/stdlib";

// Use the real Generators.input for view(el)
const { Generators } = new Library();

/**
 * Factory: returns a define(runtime, selectorOrOptions?, maybeOptions?)
 *
 * Modes:
 *  1) define(runtime, options)
 *     - options.mountAll? (default: true when no selector/targets; false when selector/targets provided)
 *     - options.targets?: Record<string, Element|string|Inspector|(Element|string|Inspector)[]>
 *       keys can be:
 *         - variable names (mirror a variable)
 *         - "cell:<id>" (numeric id)       → mount that cell
 *         - "name:<name>" (string name)    → mount that cell by name
 *         - "cell:<name>" (alias for name) → mount that cell by name
 *     - options.library?: Record<string, any>  // module-scoped helpers (e.g., FileAttachment, helllo)
 *
 *  2) define(runtime, selector, options)
 *     - selector(key) -> Element | Inspector | true | false | null/undefined
 *       where key is one of:
 *         - "cell:<id>", and if the cell has a name also "name:<name>"
 *         - each produced variable name
 *       (true = mount under default root; false = compute silently)
 */
export function createDefine(defs) {
    return function define(runtime, selectorOrOptions, maybeOptions) {
        const isFn = typeof selectorOrOptions === "function";
        const selector = isFn ? selectorOrOptions : null;
        const options = (isFn ? maybeOptions : selectorOrOptions) || {};

        const root =
            options.root ??
            (typeof document !== "undefined"
                ? (document.querySelector("main") ?? document.body)
                : null);

        const hasExplicitSelection =
            isFn || (options.targets && Object.keys(options.targets).length > 0);
        const mountAll = options.mountAll ?? !hasExplicitSelection;

        const main = runtime.module();

        // Build name → id map once.
        const nameToId = new Map();
        for (const d of defs) {
            if (d && typeof d.name === "string" && d.name) {
                if (!nameToId.has(d.name)) nameToId.set(d.name, d.id);
                else console.warn(`[nb-shim] duplicate cell name "${d.name}"`);
            }
        }

        // Per-define state
        const cellRootMap = new Map(); // id -> Element|null
        const inspectors = new Map();  // id -> Inspector

        function toElement(x) {
            if (!x) return null;
            if (x instanceof Element) return x;
            if (typeof x === "string") return document.querySelector(x);
            return null;
        }
        function toObserver(target) {
            if (
                target &&
                typeof target.pending === "function" &&
                typeof target.fulfilled === "function"
            ) return target; // already an Inspector/Observer
            const el = toElement(target);
            return el ? Inspector.into(el)() : undefined;
        }
        function toObserverList(value) {
            const arr = Array.isArray(value) ? value : [value];
            return arr.map(toObserver).filter(Boolean);
        }

        function pickCellTarget(def) {
            const idKey = `cell:${def.id}`;
            const nameKey = def.name ? `name:${def.name}` : null;

            // 1) selector function
            if (selector) {
                if (nameKey) {
                    const sel = selector(nameKey);
                    if (sel === true) {
                        if (!root) return { observers: [], element: null };
                        const el = root.appendChild(document.createElement("div"));
                        return { observers: [Inspector.into(el)()], element: el };
                    }
                    if (sel) return { observers: toObserverList(sel), element: toElement(sel) || null };
                    if (sel === false) return { observers: [], element: null };
                }
                const selById = selector(idKey);
                if (selById === true) {
                    if (!root) return { observers: [], element: null };
                    const el = root.appendChild(document.createElement("div"));
                    return { observers: [Inspector.into(el)()], element: el };
                }
                if (selById) return { observers: toObserverList(selById), element: toElement(selById) || null };
                if (selById === false) return { observers: [], element: null };
            }

            // 2) targets map
            if (options.targets) {
                if (nameKey && nameKey in options.targets) {
                    const t = options.targets[nameKey];
                    return { observers: toObserverList(t), element: toElement(t) || null };
                }
                const directCellKey = (() => {
                    if (idKey in options.targets) return idKey;              // cell:<id>
                    if (def.name && `cell:${def.name}` in options.targets)   // cell:<name>
                        return `cell:${def.name}`;
                    return null;
                })();
                if (directCellKey) {
                    const t = options.targets[directCellKey];
                    return { observers: toObserverList(t), element: toElement(t) || null };
                }
            }

            // 3) fallback: mount under default root only if mountAll=true
            if (mountAll && root) {
                const el = root.appendChild(document.createElement("div"));
                return { observers: [Inspector.into(el)()], element: el };
            }
            return { observers: [], element: null };
        }

        function definePerCellHelpers(id) {
            const dispName = "_display$" + id;
            const viewName = "_view$" + id;

            // display(): render via Inspector if a target is registered; otherwise no-op
            main.variable().define(dispName, [], () => (v) => {
                const el = cellRootMap.get(id);
                if (!el) return; // not mounted
                let insp = inspectors.get(id);
                if (!insp) {
                    insp = new Inspector(el);
                    inspectors.set(id, insp);
                }
                insp.fulfilled(v);
            });

            // view(el): render and stream values using Generators.input
            main.variable().define(viewName, [dispName], (display) => (el) => {
                display(el);
                return Generators.input(el);
            });

            return { dispName, viewName };
        }

        function installCell(def) {
            if (!def) return;

            const { observers, element } = pickCellTarget(def);

            // If the cell references display/view, define helpers regardless; they no-op if not mounted.
            const inputs = (def.inputs || []).slice();
            if (inputs.includes("display") || inputs.includes("view")) {
                const { dispName, viewName } = definePerCellHelpers(def.id);
                for (let i = 0; i < inputs.length; ++i) {
                    if (inputs[i] === "display") inputs[i] = dispName;
                    if (inputs[i] === "view") inputs[i] = viewName;
                }
            }

            // Remember the root for this cell id (used by display())
            cellRootMap.set(def.id, element || null);

            // Decorate the element if we created one
            if (element) {
                element.className = "observablehq observablehq--cell";
                if (def.id != null) element.id = "cell-" + def.id;
            }

            const primary =
                def.output || (def.outputs && def.outputs.length ? "cell " + def.id : null);

            // Only one observer for the cell’s own output (autodisplay). If multiple targets
            // were given, the first one receives autodisplay; others can mirror the output var.
            const observer = observers[0] || undefined;

            main.variable(observer).define(primary, inputs, def.body);

            // Re-export struct outputs as separate variables
            if (!def.output && def.outputs && def.outputs.length) {
                for (const out of def.outputs) {
                    main.variable().define(out, [primary], (_) => _[out]);
                }
            }
        }

        // Seed host utilities (FileAttachment, helllo, etc.) as module vars
        if (options.library) {
            for (const [name, value] of Object.entries(options.library)) {
                if (typeof value !== "undefined") {
                    main.variable().define(name, [], () => value);
                }
            }
        }

        // Install each cell
        for (const d of defs) installCell(d);

        // After cells are installed, mount any targeted **variables** (not cells).
        // targets values may be a single selector or an array of selectors.
        if (options.targets) {
            for (const [key, target] of Object.entries(options.targets)) {
                if (key.startsWith("cell:") || key.startsWith("name:")) continue; // handled above
                const observers = toObserverList(target);
                for (const obs of observers) {
                    main.variable(obs).define(null, [key], (_) => _);
                }
            }
        }

        // If selector function is used, also ask it for each produced variable and mirror it.
        if (selector) {
            const outNames = new Set();
            for (const d of defs) {
                if (Array.isArray(d.outputs)) for (const n of d.outputs) outNames.add(n);
                if (typeof d.output === "string") outNames.add(d.output);
            }
            for (const name of outNames) {
                const res = selector(name);
                if (res === false || res == null) continue;
                if (res === true) {
                    if (!root) continue;
                    const el = root.appendChild(document.createElement("div"));
                    main.variable(Inspector.into(el)()).define(null, [name], (_) => _);
                } else {
                    for (const obs of toObserverList(res)) {
                        main.variable(obs).define(null, [name], (_) => _);
                    }
                }
            }
        }

        return main;
    };
}

test.html

<!doctype html>
<meta charset="utf-8" />
<title>Penguins test — selective mounts only</title>

<body>
    <h1>Selective mounts</h1>

    <div id="mount-hello" style="border:1px dashed #aaa; padding:8px; margin-top:12px;"></div>
    <div id="mount-barWidth" style="border:1px solid #ddd; padding:8px; margin-bottom:12px;"></div>
    <div id="mount-data" style="border:1px solid #ddd; padding:8px; margin-bottom:12px;"></div>
    <div id="mount-cell-7" style="border:1px dashed #aaa; padding:8px; margin-top:12px;"></div>
    <div id="mount-cell-8" style="border:1px dashed #aaa; padding:8px; margin-top:12px;"></div>
    <div id="mount-myplot" style="border:1px dashed #aaa; padding:8px; margin-top:12px;"></div>

    <script type="module">
        // ✅ Import Inspector CSS so Vite can inline it for offline builds.


        import { Runtime } from "@observablehq/runtime";
        import * as Plot from "@observablehq/plot";
        import * as Inputs from "@observablehq/inputs";
        import { Library, FileAttachments } from "@observablehq/stdlib";
        import define from "/dist/penguins.js";           // generated by pack.mjs
        import helllo from "my_package/hello.js";

        // CJS/ESM interop for diff
        import * as DiffNS from "diff";
        const Diff = DiffNS.diffChars ? DiffNS : (DiffNS.default ?? DiffNS);

        import * as eu from "@robinl/energy_usage";

        // md/html from stdlib
        const { md, html } = new Library();

        // Keep helpers in runtime builtins
        const runtime = new Runtime({ Plot, Inputs, md, html, Diff, eu });

        // Only selected names are mounted; others compute silently.
        define(runtime, {
            mountAll: false,
            library: {
                FileAttachment: FileAttachments(name => new URL(`/${name}`, location).href),
                helllo
            },
            targets: {
                "name:hello": "#mount-hello",  // your named markdown cell
                barWidth: "#mount-barWidth",
                data: "#mount-data",
                "cell:7": "#mount-cell-7",
                "cell:8": "#mount-cell-8",
                myplot: "#mount-myplot"
            }
        });
    </script>
</body>

notebooks/penguins.nb.html

<!doctype html>
<notebook>
    <title>Hello, world!</title>

    <script type="text/markdown">
  # Hello, world!
  </script>

    <script type="module" pinned>
        1 + 2
    </script>

    <script type="module">
        const data = FileAttachment("data/alphabet.csv").csv({ typed: "auto" });
    </script>

    <script id="hello" type="text/markdown">
  # Here is a markdown
  here's
  </script>

    <script type="module">
        const barWidth = view(Inputs.range([1, 20], { label: "Bar Width", step: 1, value: 6 }));
    </script>

    <script type="module">
        const myplot = Plot.plot({
            marks: [Plot.barY(data, { x: "letter", y: "frequency", dx: barWidth - 10 })],
            y: { grid: true, label: "↑ Frequency" }
        });
    </script>

    <script id="3" type="module" pinned>
        const one = "robin linacre";
        const other = "roin liinacre";
        const diffy = Diff.diffChars(one, other);
        display(html`${diffy[0].value}`);
    </script>

    <script id="4" type="module" pinned>
        display(html`${eu.utils.format_kwh(0.98734)}`);
    </script>

    <script id="5" type="module" pinned>
        display(html`${helllo(barWidth)}`);
    </script>
</notebook>

package.json

{
  "name": "notebook_kit_to_js_package",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "pack": "node pack.mjs notebooks/*.nb.html",
    "dev": "vite",
    "build:singlefile": "vite build"
  },
  "dependencies": {
    "@observablehq/inputs": "^0.12.0",
    "@observablehq/notebook-kit": "^1.0.1",
    "@observablehq/plot": "^0.6.17",
    "@observablehq/runtime": "^6.0.0",
    "@observablehq/stdlib": "^5.8.8",
    "@robinl/energy_usage": "^0.0.25",
    "@sindresorhus/slugify": "^2.2.1",
    "d3-dsv": "^3.0.1",
    "diff": "^8.0.2",
    "htl": "^0.3.1",
    "markdown-it": "^14.1.0",
    "markdown-it-anchor": "^9.2.0"
  },
  "devDependencies": {
    "execa": "^9.6.0",
    "linkedom": "^0.18.11",
    "vite": "^7.1.2",
    "vite-plugin-singlefile": "^2.3.0"
  }
}

[mbostock]

It should end up being a lot simpler than this by using Notebook Kit’s build and runtime APIs. But I don’t have time to elaborate more now — good luck if you end up taking another crack at it.

[mbostock]

As far as blogging goes, I recommend using Notebook Kit to convert each notebook to a web page (HTML) rather than converting it to a JavaScript library; you’ll want to statically render as much content as possible to improve page load performance and SEO. Ricky Reusser (@rreusser) is now using Notebook Kit for his blog, and posted a write-up; the source is also on GitHub.

But yes, I also see Notebook Kit supporting compiling notebooks to JavaScript libraries. Probably this is how we will implement importing from a 2.0 notebook. Though if you want to maximize compatibility, you should just put your JavaScript code in a vanilla JavaScript module; then you can import it into a 2.0 notebook or any other web application and use it as-is without needing the Observable Runtime.

[RobinL]

Thank you, I appreciate the reply - and yes, that definitely makes sense.

In 1.0, I often ended up with code spread across large numbers of 'sub notebooks' which were then imported into a 'main notebook'.

With 2.0 I more envisage putting most of the logic into standard javascript models/packages (properly tested etc.), and then the notebook itself would import from this, and just handle the inputs, reactivity and display.

Great to hear we may see an option to compile to javascript libraries. Whilst I agree that compiling to html is preferable from a SEO/page performance point of view, my blog is a bit of a Frankenstein in that some posts mix together notebooks, mdx, custom React components and so on, and I think migrating this from 1.0 to 2.0 will be most straightforward if I can use the 'notebook to .js' approach, since the notebook cells are just one part of what's shown on the final page.