Theory of Change Canvas
How does our work lead to the change we want?
An interactive, local-first Theory of Change canvas transcribed from a Civic Tech Montreal FigJam workshop. It lays out the workshop notes as cards and lets you trace and edit the causal links between them.
What it is
The canvas is a transcription of the Civic Tech Montreal Theory of Change workshop, moved out of FigJam and into a single web page. It seeds 63 workshop notes and 49 initial causal claims, arranged in columns by stage, and lets you add notes, move them, link them and record who contributed what.
Everything you change stays in your browser. User additions, contributor identities, edits, moves and new links persist in localStorage, so the canvas is local-first and needs no account or server.
How it works
The domain is modelled explicitly: contributors, stages, theory notes, causal connections and the canvas itself, each with their own invariants. Application state lives in a Nanostores store that also handles persistence and the domain actions. Connection paths are pure SVG Bezier calculations, and the DOM rendering and interaction wiring sit in a separate module.
Connections are validated by the domain: a link must point from an earlier causal stage to a later one. Invalid edits leave the saved graph unchanged.
Reading the graph
Selecting a note lifts its upstream and downstream flow above the columns. A direct links mode shows only immediate relations. The inspector lets you jump to a relation’s cause or effect, relabel it, change its endpoints or remove it. Shift-clicking cards, or enabling multiple selection, shows the causal statement connecting them, including any intermediate notes.
Shipping it
The build uses vite-plugin-singlefile to produce one self-contained HTML file, so the canvas can be opened by double-clicking it. The same build deploys to a Cloudflare Worker that serves it as static assets.