Root
This will erase object keys when this menu is closed
$ About
This interactive tool lets you edit JSON data with a GoJS diagram that updates live to visualize your data.
Nodes in the diagram can be selected and moved around freely. Nested objects can be hidden/shown by clicking the +/- button on Nodes.
Getting Started
JSON data can be pasted into the editor or loaded from a file by clicking File > Open JSON.
Data can be modified by using the code editor on the left, or by double clicking on a Node in the Diagram. Double clicking will open a modal editor where data can be modifed in a table like format.
Download the JSON or Diagram at any time by clicking File > Save as
The Diagram can be saved as a PNG, SVG, or PDF. The data can be saved as JSON.
How It's Made
This app is built using Svelte 5 for the UI, GoJS for the interactive diagram, and Monaco Editor for the JSON text editor.
Internally the data is actually stored as a list of key/value pairs, not as an object. When changes are made to the data through the editor on the left, or through the modal, they first go to this data structure which acts as the "single source of truth". From there changes are propogated to other parts of the program to stay in sync.
Resources
This app is a sample project created by Northwoods Software to demostrate the use of GoJS integrated with Svelte.
✓ Loading