WebToe A node-based dataflow engine for real-time visuals, in the browser.

of JavaScript for the whole app, with zero runtime dependencies

~90 KB

two GPU backends at parity, behind one pass contract

WebGL2 + WebGPU

of 28,698 nodes from 60 real TouchDesigner projects are runnable: the measured corpus coverage

62.3%

bundled projects that run out of the box, two of them raw .toe files saved by TouchDesigner in 2022

12

Numbers from the WebToe README, measured on real projects.

• Patch live. Press Tab to create an operator, drag wires, step into containers. Every node shows a real-time preview, and one GPU compositor paints them all at full frame rate.
• Expressions anywhere. Any parameter can be an expression: op('lfo1')['chan1'], parent().par.speed, time.seconds * 0.2.
• A real-time GPU engine. A pull-based cook loop. TOPs run as GPU passes and CHOPs drive parameters: feedback, blur, compositing, displacement, edge detection, webcam and video input, and a 3D pipeline with geometry, cameras, lights and a render TOP.
• Six operator families. TOP, CHOP, SOP, MAT, COMP and DAT. Projects save losslessly as .webtoe.json, a versioned format of its own.

1. 01 Signal

   midi/cc/1

   Something happens on stage: a key is struck, a knob turns. It arrives as a named signal.

2. 02 Param

   midi/cc/1 → speed

   The mapper routes the signal to a param of the world, with a curve and smoothing. The timeline can drive the same param.

3. 03 Message

   { type: 'webtoe:ext', values }

   The world embeds the WebToe app in an iframe. Whenever a param moves, it posts the new values into it.

4. 04 Patch

   ext('speed', 0.5)

   Inside the patch, every parameter written with ext() follows. The second number is the fallback while nothing is connected.

import { createShow } from '@openav/show';
import { webtoeWorld } from '@openav/world-webtoe';

await createShow({
  world: webtoeWorld({
    project: new URL('./garden.webtoe.json', location.href).href,
    // the keys are the names the patch listens for
    params: [
      { key: 'speed', min: 0, max: 1, def: 0.5 },
      { key: 'hue', min: 0, max: 360, def: 205 },
    ],
  }),
  routes: [{ source: 'midi/cc/1', target: 'speed' }],
});

// lfo1 · frequency
0.11 * (0.2 + ext('speed', 0.5) * 2.2)

// hsv1 · hueoffset
fract(ext('hue', 205) / 360 + time.seconds * 0.01)

const webtoe = iframe.contentWindow;   // an iframe showing the WebToe app

// set the values every ext('name') in the patch reads
webtoe.postMessage({ type: 'webtoe:ext', values: { speed: 0.72 } }, '*');

// open another project: a .webtoe.json or .toe URL the app may fetch
webtoe.postMessage({ type: 'webtoe:load', url: nextProjectUrl }, '*');

Validated against toeexpand

125 / 125

production project files, 3 KB to 151 MB, decoded to identical file sets, byte for byte (553,230 files)

17.7 s

to decode all 125 natively, against 266.5 s for TouchDesigner’s own toeexpand

4.2 s

for a 151 MB show file. A daily sketch takes a few milliseconds.

8 s

from drop to a running graph for a real 20 MB show file of 14,710 nodes

Try it with a raw 2022 project file ↗

npx webtoe        # the app, served locally with the bridge: drag your .toe in

WebToe is an independent open-source project, not affiliated with or endorsed by Derivative Inc. TouchDesigner is a trademark of Derivative Inc. WebToe contains no Derivative code, binaries or assets.