Demo

2b:null 2c:["$","title",null,{"children":"Browser build for Notebook Kit | Tom Larkworthy | Observable"}] 31:[] 2f:{"id":"a1ede81c3712a905","slug":"notebook-kit-examples","title":"Browser build for Notebook Kit","thumbnail":"5074ee712ad883496c0a480f4dd7fac272a9d852438beaa864aef638c2494588","access_level":"public","create_time":"$D2025-10-02T19:01:38.540Z","update_time":"$D2026-05-24T15:25:55.938Z","view_time":null,"first_public_time":"$D2025-10-04T08:14:47.325Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":372,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"},{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"6a1548aef3fabff0","slug":"libraries","title":"libraries","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"Browser build for Notebook Kit","cells":[{"id":0,"value":"# Browser build for [Notebook Kit](https://github.com/observablehq/notebook-kit)\n\nThese are my recent notes on bringing some of Notebook Kit's functionality to the browser.\n\nA big component of NotebookKit is the Vite plugin. However, it uses everything which bloats the bundle quite a lot (10Mb), with functionality that is impossible to do in the browse (Database connectors, serverside execution) so I have opted to export the lower level utilities instead resulting in a bundle size of only 170kb, where 110kb is the acorn parser. (I would like to make the acorn parser a peer dependancy but it was a little complicated)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"intro","database":"$undefined"},{"id":9,"value":"import { kit } from \"@tomlarkworthy/notebook-kit\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"### From jsDelivr\n\nThere is a are 1st party browser bundles. \n\n\nThe transpiler brings in typescript at 1.3Mb (and acorn) so this is quite heavy","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"transpilerKit = import(await FileAttachment(\"notebook-kit-browser@4.js\").url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"The runtime is quite light (<20kb)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"runtimeKit = import(\n \"https://cdn.jsdelivr.net/npm/@observablehq/notebook-kit/runtime/+esm\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"## Serde","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"viewof source = Inputs.textarea({\n rows: 10,\n value: `\n Demo\n \n \n\n `\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"notebook = kit.deserialize(source)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"rendered = kit.serialize(notebook)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"## Transpilers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"js_cell = kit.transpileJavaScript(`{\n let a = 3\n}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"ojs_cell = kit.transpileObservable(`a = 4`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"plus more (e.g. templates)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"## define\n\n```js\nexport function define(main: Module, state: DefineState, definition: Definition, observer = observe)\n```\n\nTranspiration uses strings for the body. Before calling `define` they need to be converted to live functions. In the Vite plugin this is done by synthecising a `