Live Demo
Before you dive in: what you're looking at, how to provoke a conflict, and what's worth trying once you have one.
What it is
A graphics pipeline you build as a graph. Drag in sources (gradient, checkerboard, colour wheel, silhouettes), wire them through transforms (grayscale, invert, hue, blur, mirror) and combiners (blend, mix) into the output node, which renders the result.
It's collaborative and local-first: every window holds its own copy of the document and can keep editing while disconnected. Edits merge when the windows reconnect.
The interesting part is what happens when two windows wire the same input to different sources at the same time. Most apps silently pick a winner. Here that disagreement is kept in the document, drawn into the graph as two red edges, and the pipeline goes on rendering every possible combination — until someone makes a decision.
Collaboration is local to your browser. Windows sync over a BroadcastChannel, so “the other peer” is just another tab of the same browser on the same machine. There's no server — nothing you build leaves your computer.
How to provoke a conflict
- Build a small pipeline: a source, maybe a transform, and the output.
- Hit “Open 2nd window” (top right). Both windows now show the same document and sync live.
- In one of them, click “🟢 Online” to flip it to “🔴 Offline”. They now edit independently.
- In each window, wire the same input to a different source.
- Go back Online. The input turns red, both edges are drawn, and the output shows the gallery of possibilities.
- Hit the green Select button on the variant you want to keep.
Things worth trying
- Agreeing isn't conflicting. Do the same dance, but wire both windows to the same source. Two peers reaching the same conclusion independently is agreement, and the app treats it as such — no conflict appears.
- Two conflicts on one node. Give a combiner (blend, mix) a conflict on each of its two inputs. The result isn't a list any more, it's a matrix: every left option against every right one.
- Stacked conflicts. Put a conflict upstream of another conflict. The possibilities multiply, and the gallery nests to match the shape of the disagreement.
- One conflict, two paths. Feed a conflicted node into two different inputs of the same combiner. It's still one disagreement, so it's decided once and stays consistent on both paths — you won't see a variant blending option A with option B.
- Contradicting resolutions. With a conflict open, go offline again and hit Select on a different variant in each window. Resolving is just writing your choice back — so two contradicting resolutions are themselves a conflict, and you get to resolve it again.
Want the source, or to build the conflict handling yourself? That's the hands-on — it ships the full solution as a download.