`@jupyter-kit/wc`

Web Component wrapper around @jupyter-kit/core. Defines <jk-notebook> as a CustomElement, so a notebook can be embedded in any HTML page or framework with no JS-side mounting.

Install

pnpm add @jupyter-kit/wc

Usage

Plain HTML

<script type="module">
  import '@jupyter-kit/wc';
  import { python } from '@jupyter-kit/core/langs/python';
  import { createKatexPlugin } from '@jupyter-kit/katex';

  const el = document.querySelector('jk-notebook');
  el.ipynb = await fetch('demo.ipynb').then((r) => r.json());
  el.languages = [python];
  el.plugins = [createKatexPlugin()];
</script>

<link rel="stylesheet" href="/path/to/@jupyter-kit/theme/themes/default.css" />
<link rel="stylesheet" href="/path/to/@jupyter-kit/syntax/themes/one-dark.css" />

<jk-notebook language="python" filename="demo.ipynb" math-align="left"></jk-notebook>

Importing the package auto-registers <jk-notebook> via customElements.define. To use a different tag name:

import { defineNotebook } from '@jupyter-kit/wc';
defineNotebook('my-notebook');

Inside React / Vue / Svelte / Astro

<jk-notebook ref={el => { el.ipynb = nb; el.languages = [python]; }} />

Or, if your framework supports custom element prop forwarding (Vue 3, Svelte, React 19+), pass props directly.

Attributes vs properties

Input	How to set	Why
`notebook`, `plugins`, `languages`, `executor`, `htmlFilter`	property only	Object-shaped, can't ride on attributes
`language`	attr `language="python"` or property	string
`filename`	attr `filename="demo.ipynb"`	string
`math-align`	attr `math-align="center"`	`'left' \| 'center' \| 'right'`
`class-name`	attr `class-name="my-cls"`	string (rendered as className on root)
`bg-transparent`	attr (presence = true)	boolean
`seq-as-execution-count`	attr (presence = true)	boolean

Events

load — CustomEvent fired once after the renderer has mounted.

Programmatic access

const el = document.querySelector('jk-notebook');
el.rendererHandle?.download();   // save .ipynb
el.rendererHandle?.cell(0);      // CellHandle

Cmd/Ctrl+S inside the element saves the notebook (handled by core).

Design notes

Light DOM, not Shadow DOM. This keeps theme CSS imported at the page level applicable, and keeps the rendered HTML SSR-serialisable.
Bundle: ~~1.6KB gz on top of core (~~114KB gz). All other behaviour and cost lives in core.

License

Apache-2.0.