Open the live demo Runs entirely in your browser. Your document is saved locally.

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

  1. Build a small pipeline: a source, maybe a transform, and the output.
  2. Hit “Open 2nd window” (top right). Both windows now show the same document and sync live.
  3. In one of them, click “🟢 Online” to flip it to “🔴 Offline”. They now edit independently.
  4. In each window, wire the same input to a different source.
  5. Go back Online. The input turns red, both edges are drawn, and the output shows the gallery of possibilities.
  6. Hit the green Select button on the variant you want to keep.

Things worth trying

Want the source, or to build the conflict handling yourself? That's the hands-on — it ships the full solution as a download.