@jupyter-kit

Framework-agnostic Jupyter notebook renderer for the browser.

@jupyter-kit/* renders .ipynb notebooks in the browser from any host — React, Vue 3, Svelte 5, a Web Component, or plain DOM. Optional packages add in-browser execution (Pyodide / WebR), remote Jupyter kernels, interactive ipywidgets, KaTeX / MathJax, editable CodeMirror cells, and 13 chrome themes × 8 syntax themes.

Formerly react-ipynb-renderer (v1 / v2). v3 is a rewrite into a pnpm monorepo; see the migration guide.

Quick start — React

pnpm add @jupyter-kit/react @jupyter-kit/theme-default

import { Notebook } from '@jupyter-kit/react';
import { python } from '@jupyter-kit/core/langs/python';
import '@jupyter-kit/theme-default/default.css';
import '@jupyter-kit/theme-default/syntax/one-dark.css';

import notebook from './demo.ipynb';

export default function App() {
  return <Notebook ipynb={notebook} language="python" languages={[python]} />;
}

Vue / Svelte / Web Component / vanilla variants + every opt-in (math, executor, widgets, …) are generated by the install wizard.

Features

• Framework wrappers — @jupyter-kit/react, @jupyter-kit/vue, @jupyter-kit/svelte, @jupyter-kit/wc (<jk-notebook> custom element), or @jupyter-kit/core used directly from vanilla JS.
• In-browser execution — @jupyter-kit/executor-pyodide (Python) and @jupyter-kit/executor-webr (R) run cells in a Web Worker, with multi-CDN fallback + per-candidate timeout.
• Remote Jupyter kernels — @jupyter-kit/executor-jupyter talks to any running Jupyter Server / JupyterHub / BinderHub / Enterprise Gateway over the standard kernel WebSocket protocol (Python, R, Julia, …).
• Interactive ipywidgets — @jupyter-kit/widgets hydrates saved widget-state for static notebooks, or drives widgets live over the Jupyter Comm protocol when paired with the Pyodide executor.
• Math rendering — KaTeX or MathJax, bundled or CDN; see @jupyter-kit/katex / -cdn / @jupyter-kit/mathjax / -cdn.
• Themes — 13 chromes × 8 syntax themes, published per-chrome (@jupyter-kit/theme-<name>) or all-in-one (@jupyter-kit/theme-all).
• CodeMirror 6 editor — @jupyter-kit/editor-codemirror makes cells editable; combine with an executor for a mini notebook.
• Security — DOMPurify by default; Playwright XSS suite (packages/e2e/tests/xss.spec.ts) runs on every push.

Package catalog

Docs & live demos

• Documentation site — install wizard, API reference, guides
• Theme switcher — swap chrome / syntax / math engine at runtime
• Pyodide demo — Python cells in-browser, with matplotlib + ipywidgets
• WebR demo — R cells in-browser with inline plots

Monorepo layout

packages/
  core                                  ← rendering engine
  react, vue, svelte, wc                ← framework wrappers
  theme                                 ← less sources + publish build
  editor-codemirror                     ← editor plugin
  executor-pyodide, executor-webr       ← in-browser runtimes
  executor-jupyter                      ← remote Jupyter kernel client
  katex, katex-cdn, mathjax, mathjax-cdn
  widgets, comm                         ← ipywidgets support
  fixtures                              ← shared .ipynb test fixtures
  storybook                             ← Storybook stories
  e2e                                   ← Playwright tests
  docs                                  ← Astro + Starlight site

Development

# Clone with the jupyter-themes submodule (less sources for chromes)
git clone --recurse-submodules https://github.com/walkframe/jupyter-kit.git
cd jupyter-kit
pnpm install

# Workspace-wide build — all packages, topologically ordered
pnpm build

# Unit tests
pnpm test

# Playwright e2e (builds the storybook static site automatically)
pnpm test:e2e

# Interactive stories
pnpm storybook

# Docs dev server (theme watcher + Astro at http://localhost:4321)
pnpm -F @jupyter-kit/docs dev

License

Apache-2.0. See LICENSE. Third-party license elections and one opt-in GPL dependency (@jupyter-kit/executor-webr) are documented in NOTICE.md.