HN
Today

JSON Canvas Spec

The JSON Canvas Spec introduces a standardized, open format for representing visual canvases through nodes and edges. This technical deep dive outlines a flexible way to define interactive diagrams, mind maps, or visual notes using a simple JSON structure. Developers on Hacker News appreciate new, well-defined data interchange formats that promise interoperability and ease of implementation for visual applications.

13
Score
1
Comments
#8
Highest Rank
2h
on Front Page
First Seen
Apr 2, 6:00 PM
Last Seen
Apr 2, 7:00 PM
Rank Over Time
810

The Lowdown

The JSON Canvas Specification (Version 1.0) defines a structured, open format for representing visual canvases, comprising interconnected nodes and edges. This spec aims to provide a common, interoperable language for various canvas-based applications, allowing for consistent data representation and exchange.

  • Top-Level Structure: A JSON Canvas document consists of two optional arrays: nodes and edges.
  • Nodes: Represent objects on the canvas, ordered by z-index (first node is lowest). All nodes share required attributes like id, type, x, y, width, height, and an optional color.
    • Text Nodes: Store plain text, supporting Markdown syntax via a text attribute.
    • File Nodes: Reference external files or attachments using a file path and an optional subpath (e.g., #heading).
    • Link Nodes: Point to a URL using a url attribute.
    • Group Nodes: Act as visual containers, featuring optional label, background image path, and backgroundStyle (cover, ratio, repeat).
  • Edges: Define connections between nodes with required id, fromNode, and toNode attributes. They also support optional fromSide/toSide (top, right, bottom, left), fromEnd/toEnd shapes (none, arrow), color, and a label.
  • Color Specification: Uses a canvasColor type, allowing hex codes (e.g., "#FF0000") or six preset numerical values ("1"-"6" for red, orange, yellow, green, cyan, purple). The exact values for preset colors are intentionally undefined, allowing applications to customize them.

This specification provides a foundational framework for developers to build and share complex visual layouts, ensuring that canvas data can be understood and rendered consistently across different tools and platforms.