JSON Canvas Spec (2024)(jsoncanvas.org) |
JSON Canvas Spec (2024)(jsoncanvas.org) |
- 2022: The .canvas open format was created for Obsidian Canvas [0].
- 2024: Official 1.0 spec of JSON Canvas [1].
- 2024-2025: A number of apps/libraries built up around conversion, storage, and import/export [2].
- 2026: Obsidian Skills [3] includes support for .canvas (along with .md and .base) to make it easy for LLMs to read/write JSON Canvas, and opens interesting visualization/interaction patterns with agents.
[0]: https://news.ycombinator.com/item?id=34066824
[1]: https://news.ycombinator.com/item?id=39670922
Although you can go to https://jsoncanvas.org/ itself and see an example rendering, you cannot see the exact data that created it - I think, although you can sort of guess since the element names are stuff like node.
I sort of doubt this is the best data structure for representing this kind of thing. Maybe I'm wrong though but I would think I would go for something like https://github.com/jsongraph/json-graph-specification which strikes me as closer to graphml which I have some experience with, and maybe give it ability to embed videos etc. (which for all I know someone already has)
This is all an initial feeling though, like hmm, no I think it's wrong, and maybe I am just not seeing why this would be better than another solution.
This just looks like a pretty normal homepage. It was not obvious to me at all that the homepage was an actual dynamically rendered canvas, as opposed to just canvas-"themed".
See also the original inspiration for the format: https://obsidian.md/canvas
JSON Canvas nails the simplicity-it's easy to read and easy to implement. We wanted to build on that spirit while tackling some of the challenges showing up in this thread: nested canvases, extensibility for custom app data, text styling, coordinate systems, and round-tripping between different canvas apps without data loss.
OCIF v0.7.0 just came out. It's designed to be an interchange format — so different canvas tools (Excalidraw, TLDraw, Obsidian, etc.) can export/import each other's canvases.
Some highlights:
- Extensible: apps can attach their own data via extensions, so nothing gets lost even if the features aren't supported
- Nested canvases via parent-child node relationships
- Local coordinate systems (addresses the pixel positioning concerns raised in another comment here)
- Text styling, viewport control, and more via built-in extensions
If JSON Canvas isn't quite meeting your needs, OCIF[1] might be worth a look.
I still don't see your point. Why wouldn't I always choose SVG? What problem or pain point is being solved?
An "infinite" canvas without some notion of recursion such as viewports feels incomplete.
Obsidian's implementation of JSON Canvas supports this.
It is a great VSCode extension as-is, but the maintainers have abandoned it and they keep refusing to make it open-source. Someone is bound to make an open-source copy soon.
Still the best option though!
The upside is that it does not leave the most important aspect open to interpretation.
But it prevents this from being text-only at the point of creation:
You'll most likely need some programmatic environment to create non-trivial diagrams.
But then the question is: Why not just an SVG instead?
JSON Canvas:
graph primitive
easier to read, write, and reason about
harder to render
path primitive
easier to render
harder to read, write, and reason aboutBut later I did check using the buttons and it still doesn't allow you to scroll to read parts of the screen that have moved outside of the view because one has zoomed in too far.
Browser was Firefox Dev, OS MacOs. Did Not check if it was specific to the browser OS combination but that is because I doubt it, given my experience that most of these kinds of applications always end up screwing with the scrolling to some extent.
Notice that the JSON spec box on the front page could scroll up and down, but the readme part could not, furthermore the json spec box if I was zoomed in too far was also rendered partially outside of the view horizontally, and could not scroll horizontally. This is of course on the whole window, not individual parts, that scrolling did not work as it should. I'm sure I could go into the page code and find why I could not scroll and then fix it so I could scroll, but I would rather that the whole thing allows scrolling on the window without my help.
https://codepen.io/ItIsHappy/pen/vEXrXxg
Yes, I'm being pedantic, but that was the point of my comment. SVGs aren't interactive by default, you need to bring your own interactivity.
For static content, SVGs work great, but for interactive content the additional sematic layer of JSON Canvas has a clear benefit. SVGs represent connections using paths, while JSON Canvas uses a graph. This means SVG cannot connect a single node to more than 2 adjacent nodes. If I want to draw arrows from Alice, Bob, and Charlie all to Dave, then I need to create a second Dave or reference to that location somehow. (You can see this in your sword example by moving one of the edge points. The sword delaminates because only two of the four edges at that point can be connected together.) SVG provides limited tooling for this, but it gets rather complicated rather quickly.
Both of the following examples show the same thing, but the SVG representation doesn't convey the structure:
JSON Canvas:
{
"nodes": [
{"id": "a", "type": "text", "text": "Alice", "x": 20, "y": 50, "width": 40, "height": 10},
{"id": "b", "type": "text", "text": "Bob", "x": 170, "y": 50, "width": 40, "height": 10},
{"id": "c", "type": "text", "text": "Charlie", "x": 320, "y": 50, "width": 40, "height": 10},
{"id": "d", "type": "text", "text": "Dave", "x": 170, "y": 150, "width": 40, "height": 10}
],
"edges": [
{"id": "ad", "fromNode": "a", "toNode": "d"},
{"id": "bd", "fromNode": "b", "toNode": "d"},
{"id": "cd", "fromNode": "c", "toNode": "d"}
]
}
<svg width="400" height="200">
<text x="20" y="50" >Alice</text>
<text x="170" y="50" >Bob</text>
<text x="320" y="50" >Charlie</text>
<text x="170" y="150">Dave</text>
<line x1="40" y1="60" x2="190" y2="130" stroke="black"/>
<line x1="190" y1="60" x2="190" y2="130" stroke="black"/>
<line x1="340" y1="60" x2="190" y2="130" stroke="black"/>
</svg>