aykutsarac/jsoncrack.com

✨ Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.

JSON Crack (formerly JSON Visio)

The open-source JSON Editor.
Learn more »

Discord · Website · Issues · VS Code

About the Project

More Than a JSON Editor

JSON Crack is a free, open-source data visualization app capable of visualizing data formats such as JSON, YAML, XML, CSV and more, into interactive graphs. With its intuitive and user-friendly interface, JSON Crack makes it easy to explore, analyze, and understand even the most complex data structures. Whether you're a developer working on a large-scale project or a data enthusiast looking to uncover hidden insights, JSON Crack has the tools and features you need to unlock the full potential of your data.

• Dark mode.
• Graph & Tree view modes.
• Transform & filter data with AI.
• Export to PNG, SVG, JPEG & clipboard.
• Zoom and panning support with touch gestures.
• Supports data formats like JSON, YAML, CSV, XML, TOML...
• JQ, JSON Schema, Decode JWT, Generate Types and interfaces.
• Wide range of tools - search graph, json path, validate, save to cloud...
• Embeddable iframe widgets.

Recognition

Built With

• Next.js
• Reaflow
• React.js
• Tailwind CSS
• Supabase

Stay Up-to-Date

JSON Crack officially launched as v1.0 on the 17th of February 2022 and we've come a long way so far. Watch releases of this repository to be notified of future updates:

Getting Started

To get a local copy up and running, please follow these simple steps.

Prerequisites

Here is what you need to be able to run JSON Crack.

• Node.js (Version: >=18.x)
• Pnpm (recommended)

Development

Setup

1. Clone the repo into a public GitHub repository (or fork https://github.com/AykutSarac/jsoncrack.com/fork). If you plan to distribute the code, keep the source code public to comply with GPLv3. To clone in a private repository, acquire a commercial license

   git clone https://github.com/AykutSarac/jsoncrack.com.git

2. Go to the project folder

   cd jsoncrack.com

3. Install packages with yarn

   pnpm install

4. Run the project

   pnpm dev
   
   # Running on http://localhost:3000/

Docker

🐳 A Dockerfile is provided in the root of the repository. If you want to run JSON Crack locally:

# Build a Docker image with:
docker build -t jsoncrack .

# Run locally with `docker run`
docker run -p 8888:8080 jsoncrack

# Run locally with `docker-compose`
docker-compose up -d

# Go to http://localhost:8888

Contributing

Please see our contributing guide.

Good First Issues

We have a list of help wanted that contain small features and bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.

Contributors

License

Distributed under the GPLv3 License. See LICENSE for more information.

jsoncrack.com's Issues

Unable to find image 'jsonvisio:latest' locally

Docker Installation prompt failed

[feature] scroll, not zoom

The experience of scrolling to zoom is very terrible

[BUG] Numbers are not rendered.

Numbers in arrays displays no value

[
  123,
  456
]

{
  "stuff": [123, 456]
}

Large numbers conversion to BigInt error

This JSON seems valid according to https://jsonlint.com/ and https://www.json.org/json-en.html:

{
    "largeNumer": 2.5e50
}

JSON Visio tries to convert it to BigInt and it fails:

SyntaxError: Cannot convert 05+e5 to a BigInt (at _app-3f3d54d5d6e3969c.js:1:48888)
    at BigInt (<anonymous>)
    at l (_app-3f3d54d5d6e3969c.js:1:48888)
    at Object.t [as num_to_s] (_app-3f3d54d5d6e3969c.js:1:49142)
    at e.encodeNum (_app-3f3d54d5d6e3969c.js:1:45639)
    at l (_app-3f3d54d5d6e3969c.js:1:47629)
    at Object.l [as addValue] (_app-3f3d54d5d6e3969c.js:1:47535)
    at e.compress (_app-3f3d54d5d6e3969c.js:1:45152)
    at Editor-1addf083bf22d274.js:1:20846
    at ei (framework-0471df08d5fed370.js:1:94315)
    at ws (framework-0471df08d5fed370.js:1:114733)
    at framework-0471df08d5fed370.js:1:113468
    at ks (framework-0471df08d5fed370.js:1:113534)
    at us (framework-0471df08d5fed370.js:1:107308)
    at jl (framework-0471df08d5fed370.js:1:47918)
    at framework-0471df08d5fed370.js:1:104703

I'd argue that keeping the number displayed with the exponent (e50) would be just fine since that's an allowed JSON number format.

Can edit in graph and then the json data change

just like the change view to change the data. such like the vue or react thought

is there a desktop version

[REVAMP] React Flow Renderer to Reaflow Implementation

Reaflow Implementation

The conversion of react-flow-renderer to reaflow is currently being done under the reaflow-implementation branch. Layouting libraries such as dagre are no longer required as reaflow has elkjs built in. The major release out of befa will be considerer once the bugs with the live editor gets resolved.

Current issues are will be listed here:

• Big JSON data gets sliced and not shown
• Canvas should be centered
• Add minimap or something similar (optional)
• Add control keys to zoomIn, zoomOut, fitScreen & reset layout
• Layout should be reset on localStorage("json") is modified
• Objects key value pairs should be printed per line

Made into vscode plug-in, will be sought after by many people.

Looking forward to.

Implement worker for download image

Workers should be implemented for downloading image of graph

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

[Feature] Export

Export to opml or jpeg

Rendering issue on iPad

See attached screenshot. The nodes render without any text (which seems to be accumulated in the top left corner).

Empty arrays are not displayed

Hi @AykutSarac ,

I've juste discovered your tool which is amazing, it will be helpful for documentation.

However, when an array is empty its not displayed in the graph. You'll be able to visualize this bug with the following data (addresse array is not displayed) :

{
  "status": "active",
  "customerInformations": {
    "firstName": "John",
    "lastName": "DOE",
    "customerNumber": "123456789"
  },
  "addresses": [],
  "_metadata": {}
}

Is it a missing feature or it's a choice to ignore empty arrays ?

Thanks

When running locally and opening editor - 404 Not Found error

Steps to reproduce

1. Clone the project
2. docker build -t jsonvision .
3. docker run -p 8888:80 jsonvisio
4. go to localhost:8888
5. click 'Go to Editor'
6. 404 Not found error

Nesting issue with dictionary>dictionary

I think the empty box in the middle should go

for ease of reference

 "stepUpAuthVerification": {
      "stepUpDirective": {
        "actionId": "GLOS01",
        "additionalVerificationRequired": true,
        "useNativeStepUp": true
      }
    }

Change `Save JSON` to `Download JSON File`

How to install a project

How to install a project

[Enhancement] Optimize Canvas

Canvas should be optimized for large data sets, web workers could be a great approach alternatives also accepted. When importing or pasting files above 300kb causes freezing.

Failed to copy to clipboard or download image

I have this JSON:

{
    "string": "\b"
}

It happens when the value is one of or a combination of: \b, \f.

When I try to copy or donwload an image:

it fails:

_app-3f3d54d5d6e3969c.js:1 Error inlining remote css file SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
(anonymous) @ _app-3f3d54d5d6e3969c.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
T @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
Promise.then (async)
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
T @ 124.9f004a03280b513b.js:1
N @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
T @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
T @ 124.9f004a03280b513b.js:1
U @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
Promise.then (async)
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
$ @ 124.9f004a03280b513b.js:1
Z @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
$ @ 124.9f004a03280b513b.js:1
W @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
$ @ 124.9f004a03280b513b.js:1
X @ 124.9f004a03280b513b.js:1
(anonymous) @ 344.c5b9ee010345cb96.js:1
l @ main-f4ae3437c92c1efc.js:1
(anonymous) @ main-f4ae3437c92c1efc.js:1
P.forEach.e.<computed> @ main-f4ae3437c92c1efc.js:1
L @ 344.c5b9ee010345cb96.js:1
c @ 344.c5b9ee010345cb96.js:1
(anonymous) @ 344.c5b9ee010345cb96.js:1
(anonymous) @ 344.c5b9ee010345cb96.js:1
(anonymous) @ 344.c5b9ee010345cb96.js:1
Oe @ framework-0471df08d5fed370.js:1
Ve @ framework-0471df08d5fed370.js:1
(anonymous) @ framework-0471df08d5fed370.js:1
Ir @ framework-0471df08d5fed370.js:1
Ur @ framework-0471df08d5fed370.js:1
(anonymous) @ framework-0471df08d5fed370.js:1
is @ framework-0471df08d5fed370.js:1
Le @ framework-0471df08d5fed370.js:1
Wr @ framework-0471df08d5fed370.js:1
Kn @ framework-0471df08d5fed370.js:1
Qn @ framework-0471df08d5fed370.js:1
i @ _app-3f3d54d5d6e3969c.js:1
Show 23 more frames
_app-3f3d54d5d6e3969c.js:1 Error loading remote stylesheet SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
(anonymous) @ _app-3f3d54d5d6e3969c.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
Promise.catch (async)
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
T @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
Promise.then (async)
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
T @ 124.9f004a03280b513b.js:1
N @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
T @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
T @ 124.9f004a03280b513b.js:1
U @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
Promise.then (async)
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
$ @ 124.9f004a03280b513b.js:1
Z @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
$ @ 124.9f004a03280b513b.js:1
W @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
(anonymous) @ 124.9f004a03280b513b.js:1
$ @ 124.9f004a03280b513b.js:1
X @ 124.9f004a03280b513b.js:1
(anonymous) @ 344.c5b9ee010345cb96.js:1
l @ main-f4ae3437c92c1efc.js:1
(anonymous) @ main-f4ae3437c92c1efc.js:1
P.forEach.e.<computed> @ main-f4ae3437c92c1efc.js:1
L @ 344.c5b9ee010345cb96.js:1
c @ 344.c5b9ee010345cb96.js:1
(anonymous) @ 344.c5b9ee010345cb96.js:1
(anonymous) @ 344.c5b9ee010345cb96.js:1
(anonymous) @ 344.c5b9ee010345cb96.js:1
Oe @ framework-0471df08d5fed370.js:1
Ve @ framework-0471df08d5fed370.js:1
(anonymous) @ framework-0471df08d5fed370.js:1
Ir @ framework-0471df08d5fed370.js:1
Ur @ framework-0471df08d5fed370.js:1
(anonymous) @ framework-0471df08d5fed370.js:1
is @ framework-0471df08d5fed370.js:1
Le @ framework-0471df08d5fed370.js:1
Wr @ framework-0471df08d5fed370.js:1
Kn @ framework-0471df08d5fed370.js:1
Qn @ framework-0471df08d5fed370.js:1
i @ _app-3f3d54d5d6e3969c.js:1
Show 24 more frames
_app-3f3d54d5d6e3969c.js:1 Error while reading CSS rules from https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/editor/editor.main.css SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

Docker build fail

[Feature] Search Feature

Add a search feature lets you to search a specific node and focus to it on canvas.
Ref: Use zoomToNode feature of react-zoom-pan-pich

"Expand Nodes" and "Shrink Nodes" look swapped

The "Expand Nodes" tooltip and icon seem to be displayed when the nodes are in fact expanded:

because when I click it, the nodes don't expand, but shrink:

and the info message says:

which also seems the other way around.

Visual representation of the "same" objects

Hi there!

As soon as I started to play around with this tool, I found that there're such cases where I hope to visualize the following JSON (an example; a list of books and their authors):

[
  {
    "title": "Martian Time-Slip",
    "publishYear": 1964,
    "author": { "name": "Phillip K. Dick", "birthYear": 1928 }
  },
  {
    "title": "A Scanner Darkly",
    "publishYear": 1977,
    "author": { "name": "Phillip K. Dick", "birthYear": 1928 }
  }
]

as something like:

┌──────────────────────────┐
│ title: Martian Time-Slip ├──── author ──────┐
│ publishYear: 1964        │                ┌─▼─────────────────────┐
└──────────────────────────┘                │ name: Phillip K. Dick │
                                            │ birthYear: 1928       │
┌──────────────────────────┐                └─▲─────────────────────┘
│ title: A Scanner Darkly  ├──── author ──────┘
│ publishYear: 1977        │
└──────────────────────────┘

rather than the following (what is done currently):

┌──────────────────────────┐                ┌───────────────────────┐
│ title: Martian Time-Slip ├──── author ───►│ name: Phillip K. Dick │
│ publishYear: 1964        │                │ birthYear: 1928       │
└──────────────────────────┘                └───────────────────────┘

┌──────────────────────────┐                ┌───────────────────────┐
│ title: A Scanner Darkly  ├──── author ───►│ name: Phillip K. Dick │
│ publishYear: 1977        │                │ birthYear: 1928       │
└──────────────────────────┘                └───────────────────────┘

I see the following benefits in the first representation:

1. The graph will be more compact, especially when rendering a large JSON containing many duplicate entries
2. It could represent the underlying data in a better way — hopefully there's only one sci-fi author named Phillip K. Dick

Would it make sense to add an option to generate the graph in this way?

very slow to load

very slow to load

Share link

Hi! Is there a way to generate a "share" link for a json payload?

Something like https://jsonvisio.com/editor/jdzazjdge, maybe even with a revision at the end like https://jsonvisio.com/editor/jdzazjdge/3 would be cool

[Bug] Nested objects causing empty nodes

Issue

Empty nodes occurs in situations similar to nested objects.

Reproduction

Following data could be addressed regarding this: https://raw.githubusercontent.com/json-schema-org/json-schema-spec/draft-next/schema.json

Expected behaviour

Edges should be connected to parent instead.

Nesting issue dictionary with an Int and other dictionaries

I expect 3 arrows from limit (value, maximum and minimum), not like in the above (value has two children)

 "limit": {
      "maximum": {
        "errorMessage": "Enter an amount within your %@ credit limit",
        "value": 2000
      },
      "minimum": {
        "errorMessage": "Enter an amount of %@ or higher",
        "value": 200
      },
      "value": 1000
    }

Serviceworker not fetching external scripts

All scripts are fetched before Serviceworker (from next-pwa package) registered, once the SW is registered and page refreshed some scripts fail to load such as googletagmanager and carbonads.

null is not supported

when element's value is null,it throws an error

Maximum call stack size exceeded

Hi,

I would like to generate (and download) the image of a big json, but the browser don't render it...
Here is what I saw in the console:

❌ Uncaught Error: Maximum call stack size exceeded

errors.ts:22

RangeError: Maximum call stack size exceeded
    at format.ts:247:14
    at Generator.next (<anonymous>)
    at b (cancellation.ts:97:1)
    at errors.ts:22:12

⚠️ The number of foldable regions is limited to a maximum of 5000. Increase configuration option ['Folding Maximum Regions'](command:workbench.action.openSettings?["editor.foldingMaximumRegions"]) to enable more.

standaloneServices.ts:201 

❌ Layout Error: RangeError: Maximum call stack size exceeded

25.9d8d1b145a1e1f12.js?__WB_REVISION__=9d8d1b145a1e1f12:1 

Layout Error: RangeError: Maximum call stack size exceeded
  at Dyn (72fdc299.13ac368d6056aded.js?__WB_REVISION__=13ac368d6056aded:1:657388)
  at Dyn (72fdc299.13ac368d6056aded.js?__WB_REVISION__=13ac368d6056aded:1:657614)
  at Dyn (72fdc299.13ac368d6056aded.js?__WB_REVISION__=13ac368d6056aded:1:657614)
  at Dyn (72fdc299.13ac368d6056aded.js?__WB_REVISION__=13ac368d6056aded:1:657614)
  at ...

Any idea how I could bypass this issue?
Thanks!

can not build

thanks

Error: Unable to download sentry-cli binary from https://downloads.sentry-cdn.com/sentry-cli/1.74.4/sentry-cli-Windows-x86_64.exe. Error code: ECONNRESET

Can't open editor

I'm going to open the url: https://jsonvisio.com/editor ,But I can't open it. It's stuck. Below is the error message, I hope I can get help, thank you.

http://localhost:8888/editor 404 Not Found

Hi,

I have executed the docker following the described steps, it starts but and when entering the editor the 404 error comes out. This is the docker log:

2022/08/03 13:26:28 [error] 37#37: *4 open() "/usr/share/nginx/html/editor" failed (2: No such file or directory), client: 172.17.0.1, server: localhost, request: "GET /editor HTTP/1.1", host: "localhost:8888", referrer: "http://localhost:8888/"
172.17.0.1 - - [03/Aug/2022:13:26:28 +0000] "GET /editor HTTP/1.1" 404 153 "http://localhost:8888/" "Mozilla/5.0 (X11; Linux x86_64; rv:103.0) Gecko/20100101 Firefox/103.0" "-"

Truncate very long values

One of the properties of my JSON is a 5650 chars long string, this breaks the display by generating a very very wide node.

I think values should be truncated, perhaps with a small "+" icon allowing to see the complete value in a modal.

how to collapse/uncollapse

for big amount of nodes, uncollapse can be better for preview,
for details info we can collapse one special node or all nodes
@AykutSarac

vscode extension

@AykutSarac great tool!
would love to see that in vscode

npm install fails, yarn install does not

I just cloned the repo and found that it wasn't working with npm install, but was working when I switched to yarn install. I'm not sure why:

dev/js-ts/jsonvisio.com on  main via  v18.0.0 klauern
at 10:43:09 ❯ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-ace
npm ERR!   react-ace@"^10.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/nklauer/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nklauer/.npm/_logs/2022-04-25T15_43_14_843Z-debug-0.log

dev/js-ts/jsonvisio.com on  main via  v18.0.0 klauern took 2s
at 10:43:16 ❯ yarn install
yarn install v1.22.17
warning ../../package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "react@^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0".
warning " > [email protected]" has incorrect peer dependency "react-dom@^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0".
warning "react-hot-toast > [email protected]" has unmet peer dependency "csstype@^3.0.10".
warning " > [email protected]" has incorrect peer dependency "react@^16.0.0-0".
warning " > [email protected]" has incorrect peer dependency "react-dom@^16.0.0-0".
warning " > [email protected]" has incorrect peer dependency "react@^17.0.2".
warning " > [email protected]" has incorrect peer dependency "react-dom@^17.0.2".
warning "reaflow > [email protected]" has incorrect peer dependency "framer-motion@^3.0.0".
warning "reaflow > rdk > [email protected]" has incorrect peer dependency "react@^16.3.0".
warning " > [email protected]" has unmet peer dependency "react-is@>= 16.8.0".
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning " > [email protected]" has unmet peer dependency "@babel/core@^7.8.0".
warning "babel-jest > [email protected]" has unmet peer dependency "@babel/core@^7.0.0".
warning "babel-jest > babel-preset-jest > [email protected]" has unmet peer dependency "@babel/core@^7.0.0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "babel-jest > babel-preset-jest > babel-preset-current-node-syntax > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
[4/4] 🔨  Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.22.18", while you're on "1.22.17".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
✨  Done in 23.63s.

[Feature request] - Python library for jsonvisio

Hi

It would be good if we have pip library for jsonvisio also for many developers who mainly work on python programming everyday ..

Appreciated if you can make similar kind for python.

[Feature] Import JSON from url

now we can import json from local disk,it will be great for importing from url.
I think i can try this feature.
I may be need a little to get started.

[BUG] Unstable Positioning

The issue may be caused by the dagre library but could be the react-flow-renderer itself. Briefly, when you paste a data that will take more space in the Flow Renderer area, the positioning will be incorrect until the window is refreshed (as JSON is already saved in the localStorage).

Instructions:

1. Clear localStorage and refresh to make sure environment is ready
2. Paste a wider and more nested data (e.g https://api.opensource.org/licenses/copyleft)
3. The problem can be seen at Flow Renderer
4. Once the window is refreshed the positioning will be corrected

[Feature] Collapse JSON Elements

Add ability to collapse JSON elements displayed in JSON view

feat: save as screenshot

it would be great to have an option for saving as a screenshot. the app currently supports only exporting as JSON. if it's fit to the app I will be pleased to add this feature.

Tooltips not readable when displayed over an error message

The "tooltips" are not easily readable when displayed over an error message:

一个解析的错误问题

包含的值为整数类型会改变内容

原始的：
{
"id": 8389765533338918725
}

解析后的：
{
"id": 8389765533338919000
}

工具很好用，希望支持多窗口，在对比两个json文件会用到

VS Code extension support

it would be great if there is a vscode extension with these functionalities

Import file feature loads graph for a brief period before reverting to previous content

I tried to import several different json files with the "import file" feature.
The graph renders the content for a brief period, but then it reverts back to what was displayed before.
No errors are shown in the console.

bug.mov

Tested in:

• MacOS Monterey 12.3.1
• Chrome Version 100.0.4896.127 (arm64)

解析错误的bug

包含的值为整数类型会改变内容

原始的：
{
"id": 8389765533338918725
}

解析后的：
{
"id": 8389765533338919000
}

工具很好用，希望支持多窗口，在对比两个json文件会用到

Chrome Extension?

Love to see it published as a chrome extension?

Feature request: navigation helpers for interacting with really large JSON

The visualizations are really nice for wide graphs, however navigating is a bit of a pain.

Highlighting the edges on mouseover does help, however in situations where the edges are closely bunched and extend past the edge of the visible section, it can get hard to follow them.

It would be really helpful to be able to do something like press a key and focus on the destination node - possibly f or -> to go to the edge destination, and b or <- to go to the edge source.

Even without full keyboard navigation of the graph, this would be a big improvement when working with large JSON objects.

"Smart" rendering

Given a JSON like this:

{
  "values": [
    "foo-1",
    "foo-2",
    "foo-3",
    // ...
    "foo-1000"
  ]
}

The rendering becomes unreadable. Because this is an array of strings, maybe it's not necessary to represent 1 item = 1 node in this case? In general, arrays of primitive types could maybe be simplified to a single node with ellipsis, and details on click? This would drastically unclutter the rendering for specific JSON documents, and be way more useful to visualize the structure of these documents.

When building the project with Docker, I get an error.

hi , expert:

➜  jsonvisio.com git:(main) ✗ docker build -t jsonvisio ./
[+] Building 143.5s (10/13)
 => [internal] load build definition from Dockerfile                                                                                                                                                                            0.0s
 => => transferring dockerfile: 301B                                                                                                                                                                                            0.0s
 => [internal] load .dockerignore                                                                                                                                                                                               0.0s
 => => transferring context: 2B                                                                                                                                                                                                 0.0s
 => [internal] load metadata for docker.io/library/nginx:alpine                                                                                                                                                                21.4s
 => [internal] load metadata for docker.io/library/node:14-buster                                                                                                                                                               6.3s
 => [builder 1/5] FROM docker.io/library/node:14-buster@sha256:3ada8a20bc402f67a78b24a676b3d2cd6818c199332ddceed2d47eda961f2e3f                                                                                                58.9s
 => => resolve docker.io/library/node:14-buster@sha256:3ada8a20bc402f67a78b24a676b3d2cd6818c199332ddceed2d47eda961f2e3f                                                                                                         0.0s
 => => sha256:3ada8a20bc402f67a78b24a676b3d2cd6818c199332ddceed2d47eda961f2e3f 1.21kB / 1.21kB                                                                                                                                  0.0s
 => => sha256:137d6758b15e92bdad6fc92cf45fa2d2c14d33ce0a1588a49cf46f1275a5331d 2.21kB / 2.21kB                                                                                                                                  0.0s
 => => sha256:9b99af5931b39ce167150ad668cfa57ddf7664697be9996cb7e0e6aebbf05843 50.44MB / 50.44MB                                                                                                                               13.7s
 => => sha256:b6013b3e77fe6fd3dcf46a05f8e5b3afa9fbca7ba0161c62e56beb4058334dec 7.83MB / 7.83MB                                                                                                                                  6.5s
 => => sha256:bbced17b6899896c8e4016d62c885d737fe667acace2733e17c64bb974232887 10.00MB / 10.00MB                                                                                                                               16.6s
 => => sha256:377f603821162528ebf184e4b3119004ae63571382b15d539a6e435cbc1eeb52 7.61kB / 7.61kB                                                                                                                                  0.0s
 => => sha256:8b609dabefa83fae157bcd42123a8ed45199bb6c301e09a11260c1cad9babfef 51.84MB / 51.84MB                                                                                                                               19.1s
 => => extracting sha256:9b99af5931b39ce167150ad668cfa57ddf7664697be9996cb7e0e6aebbf05843                                                                                                                                       2.2s
 => => sha256:50544bfef33d1d653b7bc10316e20bd84889fd56dd2b7e2f742db8364f6aeb70 192.43MB / 192.43MB                                                                                                                             48.8s
 => => extracting sha256:b6013b3e77fe6fd3dcf46a05f8e5b3afa9fbca7ba0161c62e56beb4058334dec                                                                                                                                       0.4s
 => => extracting sha256:bbced17b6899896c8e4016d62c885d737fe667acace2733e17c64bb974232887                                                                                                                                       0.3s
 => => sha256:fea3f8b8e0752b4518bab41fb3fa31db44fceb625894b117f3e9f503c85bad9c 4.20kB / 4.20kB                                                                                                                                 17.8s
 => => sha256:bad8291923eb3a970e260803187f395ab730768000f3c5de065f2d1aa7c9d20c 35.07MB / 35.07MB                                                                                                                               35.9s
 => => sha256:da01a38d532e60a3de053451d01ec4d28121115b7f8b6c4c564477d47c990542 2.29MB / 2.29MB                                                                                                                                 20.9s
 => => extracting sha256:8b609dabefa83fae157bcd42123a8ed45199bb6c301e09a11260c1cad9babfef                                                                                                                                       3.1s
 => => sha256:d5bf3a8cc18d7cd4c55b8a309313cccb2acc99417382ee76aa1962d1f53e0e9b 451B / 451B                                                                                                                                     22.2s
 => => extracting sha256:50544bfef33d1d653b7bc10316e20bd84889fd56dd2b7e2f742db8364f6aeb70                                                                                                                                       7.4s
 => => extracting sha256:fea3f8b8e0752b4518bab41fb3fa31db44fceb625894b117f3e9f503c85bad9c                                                                                                                                       0.0s
 => => extracting sha256:bad8291923eb3a970e260803187f395ab730768000f3c5de065f2d1aa7c9d20c                                                                                                                                       1.9s
 => => extracting sha256:da01a38d532e60a3de053451d01ec4d28121115b7f8b6c4c564477d47c990542                                                                                                                                       0.2s
 => => extracting sha256:d5bf3a8cc18d7cd4c55b8a309313cccb2acc99417382ee76aa1962d1f53e0e9b                                                                                                                                       0.0s
 => [internal] load build context                                                                                                                                                                                               8.6s
 => => transferring context: 441.12MB                                                                                                                                                                                           8.6s
 => [stage-1 1/3] FROM docker.io/library/nginx:alpine@sha256:eb05700fe7baa6890b74278e39b66b2ed1326831f9ec3ed4bdc6361a4ac2f333                                                                                                  43.4s
 => => resolve docker.io/library/nginx:alpine@sha256:eb05700fe7baa6890b74278e39b66b2ed1326831f9ec3ed4bdc6361a4ac2f333                                                                                                           0.0s
 => => sha256:eb05700fe7baa6890b74278e39b66b2ed1326831f9ec3ed4bdc6361a4ac2f333 1.65kB / 1.65kB                                                                                                                                  0.0s
 => => sha256:cc44224bfe208a46fbc45471e8f9416f66b75d6307573e29634e7f42e27a9268 8.89kB / 8.89kB                                                                                                                                  0.0s
 => => sha256:544ba2bfe312bf2b13278495347bb9381ec342e630bcc8929af124f1291784bb 1.57kB / 1.57kB                                                                                                                                  0.0s
 => => sha256:59bf1c3509f33515622619af21ed55bbe26d24913cedbca106468a5fb37a50c3 2.82MB / 2.82MB                                                                                                                                 31.7s
 => => extracting sha256:59bf1c3509f33515622619af21ed55bbe26d24913cedbca106468a5fb37a50c3                                                                                                                                       0.2s
 => => sha256:f3322597df46099a66ed5773c10a9d1cb587faca7be14ceba985e3d1fbfdbc36 7.35MB / 7.35MB                                                                                                                                 42.7s
 => => sha256:d09cf91cabdcf5f64672598b8e4da9b0b7d8546e83ec49633bdd92abb994ba61 602B / 602B                                                                                                                                     38.1s
 => => sha256:3a97535ac2efcf94ab3e5f93a6ec4d934469de66909f17ba1229f86ee660970a 895B / 895B                                                                                                                                     39.1s
 => => sha256:919ade35f869e23d663ea51fdf2e99aa183239a73b4b4780e052c8b248ed5b7e 668B / 668B                                                                                                                                     40.1s
 => => sha256:40e5d2fe5bcd566dbde3e961f33ced0f1503fc6ee320a427b185a07afe2f96ae 1.40kB / 1.40kB                                                                                                                                 41.3s
 => => extracting sha256:f3322597df46099a66ed5773c10a9d1cb587faca7be14ceba985e3d1fbfdbc36                                                                                                                                       0.3s
 => => extracting sha256:d09cf91cabdcf5f64672598b8e4da9b0b7d8546e83ec49633bdd92abb994ba61                                                                                                                                       0.0s
 => => extracting sha256:3a97535ac2efcf94ab3e5f93a6ec4d934469de66909f17ba1229f86ee660970a                                                                                                                                       0.0s
 => => extracting sha256:919ade35f869e23d663ea51fdf2e99aa183239a73b4b4780e052c8b248ed5b7e                                                                                                                                       0.0s
 => => extracting sha256:40e5d2fe5bcd566dbde3e961f33ced0f1503fc6ee320a427b185a07afe2f96ae                                                                                                                                       0.0s
 => [builder 2/5] WORKDIR /src                                                                                                                                                                                                  0.7s
 => [builder 3/5] COPY . /src                                                                                                                                                                                                   3.7s
 => ERROR [builder 4/5] RUN npm install --legacy-peer-deps                                                                                                                                                                     58.8s
------
 > [builder 4/5] RUN npm install --legacy-peer-deps:
#10 2.070 npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
#10 14.85 npm ERR! code EINTEGRITY
#10 14.85 npm ERR! sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw== integrity checksum failed when using sha512: wanted sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw== but got sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==. (34721 bytes)
#10 58.28
#10 58.28 npm ERR! A complete log of this run can be found in:
#10 58.29 npm ERR!     /root/.npm/_logs/2022-05-09T16_33_05_885Z-debug.log
------
executor failed running [/bin/sh -c npm install --legacy-peer-deps]: exit code: 1

I get a similar error when I build locally.

Here is my environment information,Please let me know if you have a solution, thanks a lot!

➜  jsonvisio.com git:(main) ✗ uname -a
Darwin Universe 20.6.0 Darwin Kernel Version 20.6.0: Tue Feb 22 21:10:41 PST 2022; root:xnu-7195.141.26~1/RELEASE_X86_64 x86_64
➜  jsonvisio.com git:(main) ✗
➜  jsonvisio.com git:(main) ✗ docker version

Client: Docker Engine - Community
 Cloud integration: 1.0.12
 Version:           20.10.5
 API version:       1.41
 Go version:        go1.13.15
 Git commit:        55c4c88
 Built:             Tue Mar  2 20:13:00 2021
 OS/Arch:           darwin/amd64
 Context:           default
 Experimental:      true

Server: Docker Engine - Community
 Engine:
  Version:          20.10.5
  API version:      1.41 (minimum version 1.12)
  Go version:       go1.13.15
  Git commit:       363e9a8
  Built:            Tue Mar  2 20:15:47 2021
  OS/Arch:          linux/amd64
  Experimental:     true
 containerd:
  Version:          1.4.4
  GitCommit:        05f951a3781f4f2c1911b05e61c160e9c30eaa8e
 runc:
  Version:          1.0.0-rc93
  GitCommit:        12644e614e25b05da6fd08a38ffa0cfe1903fdec
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0
 Kubernetes:
  Version:          Unknown
  StackAPI:         Unknown
➜  jsonvisio.com git:(main) ✗
➜  jsonvisio.com git:(main) ✗ npm version
{
  'json-visio': 'v1.8.0',
  npm: '8.9.0',
  node: '16.4.2',
  v8: '9.1.269.36-node.14',
  uv: '1.41.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.1',
  modules: '93',
  nghttp2: '1.43.0',
  napi: '8',
  llhttp: '6.0.2',
  openssl: '1.1.1k',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0'
}