What if... the template could determine where notebook cells were placed?

[olivergeorge]

I think a small change might unlock some interesting use cases.

The vite plugin gets the template, finds the main tag and adds divs for each cell.

https://github.com/observablehq/notebook-kit/blob/c60c10e3bced0091581edf08ae7c6cabeb05a436/src/vite/observable.ts#L93C1-L99C1

        let cells = document.querySelector("main");
        cells ??= document.body.appendChild(document.createElement("main"));
        for (const cell of notebook.cells) {
          const {id, mode, pinned, value} = cell;
          const contents = document.createDocumentFragment();
          const div = contents.appendChild(document.createElement("div"));
          div.id = `cell-${id}`;
          div.className = "observablehq observablehq--cell";

The change would be to check if there is an element with a matching ID already and use that if it is.

The result would be that by adding <div id="cell-101"></div> in the template you can specify where the cell appears in the page.

I can imagine lots of other ways this could be achieved

It's also possible that this approach is only useful for simple use cases and the limitations mean isn't worth supporting (e.g. the CLI encourages one template for all notebooks).

[mbostock]

Hmm, maybe? Your suggestion sounds more like an embed API where you have an existing page and you want to embed cells from one or more notebooks into the page; whereas the current system is designed to build a separate page for each notebook, and where the notebook represents the bulk of the page content (rendered into the <main> element).

Not released yet, but we just added a transformTemplate hook in #30 that lets you rewrite templates dynamically for each notebook. And I recently discovered that Vite’s HTML constant replacement feature works with templates (and notebooks).