lopecode
Lopecode
Lopecode is a web-based modable programming environment where a small microkernel core defines minimal features to enable live coding applications to be built.
The kernel has no UI and defines programming mechanisms for
- reactive dataflow programming model
- hot code swapping
- modules
Everything else is implemented in userspace, including code editors and a multi-notebook UI which can be live edited. There is no external source code, instead the runtime itself is decompiled on demand, according to a runtime-is-the-source-of-truth principle.
One userspace module, the Exporter, can self-serialize the entire runtime to a single HTML file, so you can use it offline from the local filesystem. There are no dependencies other than a web browser.
Quick start
Open the Lopecode Quickstart, pick a starting point and the modules you want, and press Generate. You get one HTML file, with a guided tour of it written in. Nothing to install, no build step, no account. Press Cmd+K / Ctrl+K for the command palette, and use Save in place from the burger menu to write the notebook back to your own disk — the file you save is the whole program.
Table of Contents
Gallery
Browse all notebooks at the Lopebook Gallery.
Getting Started
| Notebook | Description |
|---|---|
| Lopecode Quickstart | Start here — pick a starting point and the modules you want, and it builds the notebook |
| Tour of Lopecode | Interactive introduction to lopecode and what you can build |
| Vision Statement | The endgoal explained — itself a hackable lopebook |
| How the Observable Runtime Works | Living documentation on the underlying runtime |
| Observable Inputs Reference | Live reference for every widget in @observablehq/inputs |
Applications
| Notebook | Description |
|---|---|
| DAW | A digital audio workstation that is nothing but a notebook — knob positions, drum patterns and rack layout all live in cell source |
| SVG Lens | Bidirectional SVG editor — the drawing syncs to the code and the code to the drawing, without parsing away animation or template holes |
| Knowledge Wiki | Browsable markdown knowledge base where every document is a content block an agent can read directly |
| RISC-V Linux SBC | Browser-based RV32IMA emulator that boots Linux 6.1 with BusyBox shell |
| Linux Emulator (64-bit) | RISC-V 64-bit Linux 6.1 to a BusyBox shell, based on Bellard’s TinyEMU |
| ATProto Comments | Read-only Bluesky comments widget — fetches and displays AT Protocol post threads |
| Notes | Offline notetaking app using Dexie.js, with detailed technical design |
| Audio Sequencer | Non-trivial application with persistent runtime state |
| Circular Barcode Simulator | Simplifying pose estimation with circular barcodes |
| Fast 1D Circular Barcode Matching | Barcode matching via the Mobius transform |
| Coded Landmark Tracking | Fast multi-target circular barcode pose tracking — printed barcodes read from a live camera and fused into a plane pose, under 2ms a frame on a laptop |
| SARS-CoV-2 Analytics | Natural selection analysis of SARS-CoV-2 |
| Unaggregating CloudWatch Metrics | AWS CloudWatch metric unaggregation |
Platform Modules
| Notebook | Description |
|---|---|
| Exporter 3 | Single-file serializer — self-exports the runtime to HTML |
| Editor 5 | Reactive userspace cell editor (CodeMirror-based) |
| Lopepage-2 | Multi-notebook layout: resizable splits and tabbed stacks, serialized to the URL hash, with scroll preserved across layout changes |
| Lopepage URLs | URL DSL for lopepage layouts |
| Command Palette | Cmd+K palette; providers register commands, and cell search matches names and source across loaded modules |
| Visualizer | Cell renderer — how a module’s cells become DOM |
| Modules | Streaming module-discovery API — yields module records as they resolve, instead of blocking on a full scan |
| Module Selection | Explorer for composing modules into notebooks |
| Save in place | Menu plugin that writes the notebook back to its own file via the File System Access API |
| Plugin Registry | Decoupled reactive plugin wiring — providers and consumers meet by name, with no direct references |
| Themes | Theming sourced from Observable notebook-kit CSS custom properties |
| Jumpgate | Transforms Observable notebooks to lopecode |
| Local Change History | Persistent local change tracking |
| Secrets | AES-256-GCM encrypted key-value storage in notebook source code |
| ATProto | Publish, discover and download lopecode files on the atmosphere |
Developer Tools
| Notebook | Description |
|---|---|
| Debugger 2 | Timeline of every variable’s lifecycle — blocked on deps, computing, resolved or errored |
| Code Metrics | Per-cell code health — complexity, nesting, fan-in/out, maintainability index |
| Cell Map | Maps reactive variables to notebook cells, grouped by module |
| Reactive Reflective Testing | Reactive testing framework for lopebooks |
| Notebook Semantics | Test notebook for runtime semantics |
| Dataflow Templating | Dynamic dataflow templating — function-like semantics for dataflow |
| Spectral Layout | Minimize crossings with spectral circular graph layout |
AI Collaboration
| Notebook | Description |
|---|---|
| Claude Code Pairing | Live channel between Claude Code and a running notebook — define cells, read values, watch variables |
| Roboco-op 5 | In-notebook coding agent whose tools act on cell source rather than a shell |
| justbash | Sandboxed bash environment inside a notebook — two shells share one in-memory filesystem, one for you and one for an agent |
| Roboco-op 3 | Agents-as-functions (earlier generation) |
Writing
| Notebook | Description |
|---|---|
| Source-last programming | On sharing a program with people who cannot install one |
| The Claude Code Virtual Monorepo Pattern | Assembling a dozen repositories into one filesystem a coding agent can see |
| Tuning a coding harness | Benchmark-driven iteration on an in-notebook agent |
| Newsletter 001 | Project newsletter |
Experiments
| Notebook | Description |
|---|---|
| Editable Markdown | Inline editable markdown |
| Grid Container | Widget builder — named cells become rearrangeable atoms on a snap-to-grid surface, editable in place |
| Infinite Canvas | Renders a module as draggable cards with dependency edges derived live from the runtime graph |
| Living SVG Templates | Hand-coded SVG that stays editable by mouse |
| Sticky | Make any view remember its value by rewriting its own source |
| Direct Manipulation Plot | Direct manipulation for plots |
| p5.js Sandbox | Live p5.js sketching |
| My Lopebooks | Personal lopebooks index |
| Compile Zig | Zig compiler running in-browser via WASM — fully offline |
Feel free to open discussions and bugs in the Github repository