JSON Canvas Spec (2024) • Hacker News Board

Re: JSON Canvas Spec (2024)

#41

Post by [deleted] » Fri, Apr 03, 2026, 1:18 PM UTC

StilesCrisis wrote: post #39

itishappy wrote: post #38

Earlier quoted context omitted.

It's not interactive for me: 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 me…

Cool, now show me a codepen with an interactive JSON Canvas?

[deleted]

Re: JSON Canvas Spec (2024)

#42

Post by itishappy » Fri, Apr 03, 2026, 2:00 PM UTC

StilesCrisis wrote: post #39

itishappy wrote: post #38

Earlier quoted context omitted.

It's not interactive for me: 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 me…

Cool, now show me a codepen with an interactive JSON Canvas?

Fair point, SVGs are more portable. They're also more capable (and complicated). JSON Canvas is a more specific tool.

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:

  
    Alice
    Bob
    Charlie
    Dave

Re: JSON Canvas Spec (2024)

#43

Post by Garlef » Fri, Apr 03, 2026, 11:07 PM UTC

oersted wrote: post #36

Garlef wrote: post #8

I'm not sure about this: An "infinite" canvas without some notion of recursion such as viewports feels incomplete.

Check out charkoal.dev it has nested canvases and a few other extra features. 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.

This looks interesting! Thanks for sharing.