Build shaders by wiring nodes
A visual node editor for TSL shaders, rendered live on WebGPU in your browser. Wire typed nodes into a graph, watch it render as you edit, and embed the result anywhere.
Visual node editor
Wire typed nodes — math, vectors, procedural patterns, textures — into a graph. Ports only connect when the types line up, so a wired graph is a valid shader.
Live WebGPU preview
Every edit renders instantly on your own GPU — WebGPU first, WebGL2 as a fallback. The server never evaluates a graph.
Publish & fork in community
Publish a workflow for anyone to see, browse what others built, and fork any published shader straight into your own editor.
Embed anywhere via npm
Install @fluorite/react and drop <Workflow id /> into any React app. Embeds track your live draft — every save shows up without a publish step.
From empty canvas to embedded shader
The graph is the artifact — no compile step, no publish pipeline between the editor and your app.
- 01
Build
Compose typed nodes into a graph in the editor. The output node's color port is your shader, rendered live as you wire.
- 02
Save
Autosave keeps the graph as plain JSON, with versions you can roll back to. The workflow id is all an embed needs.
- 03
Embed
Pass the id to <Workflow /> in your app, or share it to the community for others to fork.
Your next shader is a graph away
Open the editor, wire a few nodes, and ship the result to any React app with one component.