April 2, 2026
Canvas chaos, draw the line
JSON Canvas Spec
Fans hail a simple diagram file, skeptics roast “pixels” and the “infinite” claim
TLDR: JSON Canvas is a simple shared format for arranging boxes and arrows on a giant digital board so different apps can display the same diagrams. Fans praise the simplicity and flexibility, while critics demand real examples and debate whether pixel positions and “infinite” claims without nested views make sense
JSON Canvas just dropped a super simple recipe for digital sticky notes and arrows: a file that lists “nodes” (text, files, links, or groups) and “edges” that connect them, plus color choices and where everything sits on a giant whiteboard. Think: build a mood board or mind map with coordinates and labels, then any app that understands the format can show it the same way. That’s the dream—interoperability.
But the comments? Spicy. One early fan cheered that it’s more flexible than Mermaid (a text tool for diagrams), saying they’ve “hit limits” there and this looks freer. The chorus of skeptics fired back fast. A top complaint: show us the receipts—people want raw example files, not just a pretty demo on jsoncanvas.org. Then came the big fight: pixels. “Are pixel coordinates really the move in 2026?” asked one, worried about zooming, screens, and how it scales. And the philosophy club arrived with a smackdown on the “infinite canvas” label—without recursive viewports (basically, canvas inside a canvas you can zoom into), one critic said it feels incomplete.
Still, an Obsidian power-user vouched: “good, not great,” but the file’s simplicity could fuel plug-ins and tools. Meanwhile, the thread spawned jokes like “pixels in this economy?” and “infinite without recursion is just… big,” proving the internet can’t resist a pun-packed pile-on
Key Points
- •The spec defines a top-level JSON with optional nodes and edges arrays.
- •Nodes are ordered by z-index in the array (first renders below, last on top) and share core attributes (id, type, x, y, width, height, optional color).
- •Node types include text (with Markdown), file (file path plus optional #subpath), link (url), and group (label, background, backgroundStyle).
- •Edges connect nodes with id, fromNode, toNode, optional sides (top/right/left), endpoint shapes (none/arrow; defaults: fromEnd=none, toEnd=arrow), optional color, and label.
- •Colors use canvasColor: hex strings or preset numbers 1–6 (red, orange, yellow, green, cyan, purple), with exact values left to implementing applications.