whatisgithub

What is webtoe?

frank890417/webtoe — explained in plain English

Analysis updated 2026-05-18

22TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

In one sentence

A browser-based visual programming tool for building live animations and generative art by wiring together operators, similar to TouchDesigner.

Mindmap

mindmap
  root((repo))
    What it does
      Visual node editor
      Live GPU graphics
      TouchDesigner-style ops
    Tech stack
      TypeScript
      WebGL2
      WebGPU
    Use cases
      Generative art
      Live visuals
      Import TouchDesigner projects
    Audience
      Creative coders
      Live performers
    Setup
      Runs in browser
      No install needed

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Build live generative art and animations by wiring operators together visually.

USE CASE 2

Import an exported TouchDesigner project and continue working on it in the browser.

USE CASE 3

Load one of the ten included example patches to explore techniques like feedback trails and 3D scenes.

What is it built with?

TypeScriptWebGL2WebGPU

How does it compare?

frank890417/webtoeaerdelan/housand-domaintoolmatrixalibaba/webmcp-nexus
Stars222222
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasymoderate
Complexity2/52/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min
MIT license: use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

WebToe is a visual programming tool that runs entirely in a web browser. Instead of writing code line by line, you build programs by connecting operators with virtual wires, similar to patching a modular synthesizer. The result plays back as a live visual output: animations, signal-driven graphics, generative art, and 3D scenes, all without installing anything. The project follows the structure of TouchDesigner, a desktop application used by creative coders and live performers. WebToe has the same operator families: images (TOPs), audio-style signals (CHOPs), 3D geometry (SOPs), materials, and containers that hold entire sub-networks. If you work in TouchDesigner, you can export a project using the command-line tool that ships with your installation, then drop the result into WebToe. Supported operators run live, unsupported ones become stubs that preserve wiring, layout, and parameter values, with a report on what ran and what did not. Everything is processed on your GPU. Image operations run as graphics passes, channel operators drive parameter values in real time, and the editor shows live previews on every node simultaneously. Two GPU paths are available: WebGL2 works in most browsers today, and WebGPU is a selectable alternative for browsers that support it. The whole application is about 90 kilobytes of JavaScript with no external libraries. Ten example patches ship with the project and load from the editor toolbar. The flagship runs 27 connected operators: webcam input through edge detection, a 3D scene with instanced geometry and an orbiting camera, noise-driven feedback trails, and a channel rig wired through live math expressions. Simpler examples cover noise, mouse-driven feedback, and signal scoping. For developers, the codebase uses npm workspaces with a layered structure: a core graph engine, operator definitions with hand-written GPU shaders, and the browser editor on top. Parameters support short expressions that reference other operators or the current time. The project is MIT licensed.

Copy-paste prompts

Prompt 1
Explain how WebToe's operator families map to TouchDesigner's TOPs, CHOPs, and SOPs.
Prompt 2
Help me export a project from TouchDesigner so I can open it in WebToe.
Prompt 3
Walk me through the flagship 27-operator example patch in this project.
Prompt 4
Show me how to write a parameter expression that references another operator's value.

Frequently asked questions

What is webtoe?

A browser-based visual programming tool for building live animations and generative art by wiring together operators, similar to TouchDesigner.

What language is webtoe written in?

Mainly TypeScript. The stack also includes TypeScript, WebGL2, WebGPU.

What license does webtoe use?

MIT license: use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is webtoe to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is webtoe for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.