WebToe A web-native dataflow engine for real-time visuals.

• TOP28

  GPU image operators: generators, filters, compositing, feedback, lookup, render, media and NDI in/out.

• CHOP14

  Channels: LFO, noise, math, lag, speed, mouse in, SOP to. The values that drive parameters.

• SOP21

  Typed-array geometry: primitives, copy, skin, noise, twist, and in/out for COMP networks.

• MAT7

  Materials for the scene renderer: constant, lit (phong and pbr), line, point sprite, wireframe.

• COMP5

  Containers with in/out tunnels, and the 3D objects: geometry (with instancing), camera, lights.

• DAT6

  Text and tables that operators read: a ramp can take its colour keys from a table.

81 operator types, counted from the engine’s registry at build time. All operators →

op('lfo1')['chan1']          // a CHOP channel, by name
parent().par.speed * 0.5     // a parameter up the hierarchy
time.seconds * 0.2           // engine time
ext('energy', 0.5)           // a value the host page sends in

Zero runtime dependencies

The app is engine, editor and shaders, nothing else: 260 KB of JavaScript, 76 KB gzipped.

Two GPU backends

WebGL2 by default, WebGPU with ?backend=webgpu, both behind one backend-agnostic pass contract. 2D is at parity; the 3D scene pass is WebGL2 today.

One dependency rule

Imports flow downward only, and core imports nothing. Operators register through the public registerOp API.

Embeddable

mountEditor(el, options) puts the framework-free editor in any page. Hosts load projects and drive expressions over postMessage.

A versioned file format

.webtoe.json carries a version and a migration chain; unknown operator types degrade to family stubs instead of failing.

WASM where it pays

The NDI pixel conversion runs in a 1 KB WebAssembly kernel with a JavaScript fallback. WASM is adopted only on a measured win.

apps/web ──▶ @webtoe/editor ──▶ @webtoe/ops ──┐
                       │            │          ├──▶ @webtoe/core
                       ├──▶ @webtoe/gpu ───────┤
                       └──▶ @webtoe/io ────────┘

1. In the browser

   Nothing to install. Open the editor, load one of the ten examples from the toolbar, or drop a project file on the page.

   Open the editor→

2. On your machine

   Serves the editor and the import bridge on 127.0.0.1 and opens it. Needs Node 20 or newer.

   terminalCopy

   npx webtoe        # → http://127.0.0.1:9881/app/

3. From source

   The monorepo: engine, operators, both GPU backends, editor, importer, bridges. npm run check runs the type check and the test suite.

   terminalCopy

   git clone https://github.com/frank890417/WebToe.git
   cd WebToe && npm install
   npm run dev       # → http://localhost:8643/app/

Documentation

• Getting startedOpen the editor in a browser, run WebToe locally with npx webtoe, or set up the monorepo for development.
• ExamplesThe ten projects bundled with the editor, what each one shows, and a link that opens it.
• Importing TouchDesigner projectsDrop a .toe or .tox on the editor. What comes across, what becomes a stub, how expressions are translated, and the bridge and toeexpand paths.
• The .toe formatHow WebToe reads TouchDesigner's binary project container in the browser.
• OperatorsEvery operator WebToe ships, by family, generated from the engine's registry, plus how cooking, stubs and custom operators work.
• ExpressionsDrive any parameter with a JavaScript expression that reads time, channels, other parameters and values sent by a host page.
• Embedding and external controlPut the editor in an iframe or mount it in your own page, load projects by URL, and drive patches from outside with postMessage and ext().
• NDI bridgeReceive and send NDI video from the browser through a small local bridge, with the pixel conversion running in a 1 KB WebAssembly kernel.
• ArchitectureThe packages and their one dependency rule, the GPU pass contract behind both backends, the cook model, the file format and the decisions behind them.
• TouchDesigner parityWhat "toward TouchDesigner" means for a browser engine, how it is measured on 60 real projects, where WebToe stands, and what comes next.