# A library similar to notebook kit

**URL:** <https://talk.observablehq.com/t/a-library-similar-to-notebook-kit/10719>\
**Category:** Show and tell\
**Created:** [June 24, 2026, 1:35pm UTC](https://talk.observablehq.com/t/a-library-similar-to-notebook-kit/10719 "2026-06-24T13:35:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nxrix](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nxrix/32/9852_2.png) [@nxrix](https://talk.observablehq.com/u/nxrix)\
**Post date:** [June 24, 2026, 1:35pm UTC](https://talk.observablehq.com/t/a-library-similar-to-notebook-kit/10719/1 "2026-06-24T13:35:56Z")

</div>

I made a small library that can dynamically render OJS cells in the browser.

> **[GitHub - nxrix/observable-renderer: A unofficial lightweight, client‑side library to...](https://github.com/nxrix/observable-renderer/)**
>
> A unofficial lightweight, client‑side library to render raw Observable Javascript cells

> **[Notebook In Notebook](https://observablehq.com/@nxrix/notebook-in-notebook)**
>
> Core

---

<div class="post-metadata">

**Author:** ![nxrix](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nxrix/32/9852_2.png) [@nxrix](https://talk.observablehq.com/u/nxrix)\
**Post date:** [August 8, 2026, 8:42am UTC](https://talk.observablehq.com/t/a-library-similar-to-notebook-kit/10719/2 "2026-08-08T08:42:29Z")

</div>

Now using it, you can load notebooks directly in the browser by adding

```html
<script type="module" src="https://cdn.jsdelivr.net/gh/nxrix/observable-renderer/src/loader.js"></script>

```

It doesn’t support JS and TS cell types yet.

[Example](https://nxrix.github.io/observable-renderer/examples/0)  
[Source](https://github.com/nxrix/observable-renderer/blob/main/examples/0.html)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 8, 2026, 10:39am UTC](https://talk.observablehq.com/t/a-library-similar-to-notebook-kit/10719/3 "2026-08-08T10:39:50Z")

</div>

Did you consider using Notebook Kit for this? It’s intended to support this type of usage. Here’s an example:

> **[Notebook Kit in a Notebook](https://new.observablehq.com/@observablehq/notebook-kit-in-a-notebook)**
>
> An Observable notebook by Observable

---

<div class="post-metadata">

**Author:** ![nxrix](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nxrix/32/9852_2.png) [@nxrix](https://talk.observablehq.com/u/nxrix)\
**Post date:** [August 8, 2026, 10:56am UTC](https://talk.observablehq.com/t/a-library-similar-to-notebook-kit/10719/4 "2026-08-08T10:56:24Z")

</div>

Yes, but it was loading all the dependencies at start, while I expect it to only load them when a cell is using one.

I will later try to see if I can change it to be this way.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 8, 2026, 12:21pm UTC](https://talk.observablehq.com/t/a-library-similar-to-notebook-kit/10719/5 "2026-08-08T12:21:29Z")

</div>

Yes, please let us know if you find a bug. I don’t see it loading any unnecessary dependencies in the example notebook I linked above. (I do see it loading multiple copies of Acorn at different versions, but this is an unfortunate consequence of how jsDelivr’s module bundling is designed; you’d need an import map to coalesce the different versions into a single request.)

---

<div class="post-metadata">

**Author:** ![nxrix](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nxrix/32/9852_2.png) [@nxrix](https://talk.observablehq.com/u/nxrix)\
**Post date:** [August 9, 2026, 1:59pm UTC](https://talk.observablehq.com/t/a-library-similar-to-notebook-kit/10719/6 "2026-08-09T13:59:42Z")

</div>

I started using notebook-kit and I have a few questions.

## 1. Updating a cell

I don’t know if this way is correct or not.

```javascript
const createCell = (cell) => {
  const id = nextId++;

  const select = document.createElement("select");
  for (const type of ["ojs", "js", "ts", "html", "md", "tex", "dot"]) {
    const option = document.createElement("option");
    option.value = type;
    option.textContent = type;
    select.appendChild(option);
  }
  select.value = cell.mode;

  const textarea = document.createElement("textarea");
  textarea.value = cell?.value ?? "";

  const run = document.createElement("button");
  run.textContent = "Run";

  const del = document.createElement("button");
  del.textContent = "Delete";

  const container = document.createElement("div");
  const output = document.createElement("div");
  container.appendChild(output);
  const editor = document.createElement("div");
  editor.append(select,textarea,run,del);
  container.appendChild(editor);
  main.appendChild(container);

  const state = {
    root: output,
    variables: []
  };

  const execute = async () => {
    cell.value = textarea.value;
    cell.mode = select.value;
    state.variables.forEach(v => {
      v._observer = {};
      v.delete();
    });
    state.variables = [];
    try {
      const definition = Kit.transpile(cell);
      const body = compile(definition.body);
      await runtime.define(
        state,
        {
          ...definition,
          body
        }
      );
    } catch (error) {
      showError(output, error);
    }
  }
  run.onclick = execute;

  del.onclick = () => {
    state.variables.forEach(v => {
      v._observer = {};
      v.delete();
    });
    container.remove();
    cells.delete(id);
  };

  cells.set(id, {
    state,
    container
  });

  execute();
  return id;
}

```

## 2. How can I build a fully offline version of notebook-kit?