JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

Aykut Saraç

Last update: Jan 4, 2023

Overview

Simple json visualization tool for your data.

Support JSON Visio

JSON Visio (jsonvisio.com)

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

JSON Visio - Directly onto graphs

⚡️ Features

Advanced Error Message
Search Nodes
Save JSON locally
Multiple layout direction support
Compressed view
Representative colors for arrays & keys
Friendly UI
Light/Dark Mode

🧩 Preview

🛠 Development Setup

  npm install --legacy-peer-deps
  npm run dev

License

This project is open source and available under the MIT License.

Comments

fix empty nodes

I created the PR #242 but the updates created a conflict with my old PR. This PR solve the same problem, I tested the problems from #242 and it work correctly. Thank you for the patience.
enhancement hacktoberfest-accepted

opened by victorbrambati 19
Embed JSON Crack graph in websites

Feature

How to embed JSON crack graph in websites?

jsoncrack.com mentioned it's possible to embed JSON crack graphs in websites. I couldn't find any documentation regarding the process to embed JSON crack on websites.

Alternative solutions or implementations

No response

Other context

No response
feature

opened by liyasthomas 11
[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.
bug confirmed hacktoberfest

opened by AykutSarac 11
[BUG]: Siblings look like descendents
Issue description

The screenshot is from the following JSON:

{ "timestamp": "...", "products": [ { "id": "...", "attributes": { "price": "9.99", "title": "..." } }, { "id": "...", "attributes": { "price": "23.48", "title": "..." } } ] }

As you can see, the graph makes it look like products is a child node of timestamp. They should be shown as side-by-side like the two id nodes are.

Media & Screenshots

https://imgur.com/RBxCgg2

Operating system

No response

Priority this issue should have

Medium (should be fixed soon)
bug confirmed
opened by danellis 10
[BUG]: When rotated, hidden node showed up. need to "click hide" again to hide it.
Issue description

Hide a node

Rotate

Here ther result:

same behaviour, when got rotated again,

Media & Screenshots

![image](https://user-images.githubusercontent.com/23287658/190569413-da6473fc-8e89-4892-8021-457eff68b29f.png)

Operating system

OS: Windows

Browser: Chrome

Any other details:

Desktop 1920x1240 (maybe)

Priority this issue should have

Low (slightly annoying)
bug confirmed hacktoberfest
opened by fatihaziz 9
Bug: It is not formatting terraform state file
Issue description

The state file contains around 7000 of lines.

Media & Screenshots

No response

Operating system

OS: [e.g. iOS]: OS

Browser [e.g. chrome, safari]: Chrome

Any other details...

Priority this issue should have

High (immediate attention needed)
bug
opened by mohan023 9
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.

opened by cetuer 7
Error: failed to download
Issue description

While rendering a LARGE json file, it failed to download the rendered png image with an error message [failed to download]

Media & Screenshots

No response

Operating system

Browser [Firefox]:

Priority this issue should have

Medium (should be fixed soon)
bug need repro
opened by drvgautam 6

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!

bug

opened by mykiwi 6

Fixed Safari graph arrow orientation issue

Solves #155

Safari has an issue with marker-end + orient attribute. This fix implements a custom edge arrow that rotates according to the layout rotation.

opened by VladCuciureanu 5
integrate with monaco editor

Feature

is there a way to integrate with monaco editor (https://microsoft.github.io/monaco-editor/) ? would you have an example?

Alternative solutions or implementations

No response

Other context

No response
feature

opened by GlauberF 5
Is the JSON exploitable - message

Feature

It would be nice if I could see whether the JSON I'm pasting / importing in the editor is exploitable or not, according to OWASP:

https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html#server-side

Alternative solutions or implementations

No response

Other context

No response
feature

opened by baldogiRichard 0
Fixed the problem that the data from the url was not written
Fixed the problem that the data from the url was not written 🐞

Several functions improved ♻️

This and this can get caught up in issues: https://github.com/AykutSarac/jsoncrack.com/issues/253

fyi @AykutSarac @AshSimmonds
opened by ahmetilhan24 0
[BUG]: Share link opens default JSON
Issue description

Change JSON

Click share

copy link

open copied link

compare with JSON you shared

Expected result you share JSON that you change, not dafault JSON

Media & Screenshots

No response

Operating system

OS: [e.g. iOS]:

Browser [e.g. chrome, safari]:

Any other details...

Priority this issue should have

Medium (should be fixed soon)
bug
opened by roboter 4
FEATURE REQUEST: Support for modified node contents in Json TREE

Feature

Hi. Thanks for your amazing work！ I have some advice for your feature update. Is it possible to support modifying the contents of nodes in the right json tree and can be updated to the left json file? It is convenient for modifying contents of nodes under the visualization mode,

Best wishes, Yueyi Wang

Alternative solutions or implementations

No response

Other context

No response
feature

opened by 66Kevin 1
User can see trimmed strings if it is too long

Feature

If a JSON field contains long strings the diagram becomes extremely small. For instance User needs to see trimmed version of a long text Cut off no more than 50 symbols with ... at the end.

Alternative solutions or implementations

No response

Other context

No response
feature confirmed

opened by nikolayOrions 3

Releases(v2.5.0)

v2.5.0(Dec 30, 2022)
JSON Crack v2.5.0

In this update we bring you the ability to save your json and share short links, also introduce you our very simple guide to embedding!

Homepage re-design ✨

Use GitHub's variable font, Mona Sans

Login - Save JSON, share short-links, embed by id

Fetch JSON through url (e.g. https://jsoncrack.com/editor?json=https://jsonplaceholder.typicode.com/todos/1)

Explore embedding documentation: https://jsoncrack.com/docs

Explore Premium plan: https://jsoncrack.com/pricing

Image Previews in graph

So many bug fixes & performance improvements

❤️ Thanks to our sponsor Altogic for making this possible!
Source code(tar.gz)
Source code(zip)
v2.1.0(Oct 26, 2022)
JSON Crack - v2.1.0

Dynamic widgets! (Older embeds are now deprecated!) Explore more: https://jsoncrack.com/embed

Fix expand/collapse parents

Add collapse all parents to sidebar

Mobile support

Performance improvements

JSONC support (JSON with comments)

Display children count on parent

Fix Center View

❤️ SUPPORT JSON CRACK!

What's Changed

fix hide wrong collapsed nodes by @victorbrambati in https://github.com/AykutSarac/jsoncrack.com/pull/107

jsoncrack.com Migration by @AykutSarac in https://github.com/AykutSarac/jsoncrack.com/pull/113

Add mobile support for JSON Crack by @AykutSarac in https://github.com/AykutSarac/jsoncrack.com/pull/115

Enable Performance Mode by default by @AykutSarac in https://github.com/AykutSarac/jsoncrack.com/pull/132

General UI/UX Improvements by @AykutSarac in https://github.com/AykutSarac/jsoncrack.com/pull/133

Link Travis CI badge to project build status by @mbrukman in https://github.com/AykutSarac/jsoncrack.com/pull/109

Update Docker section formatting in README by @mbrukman in https://github.com/AykutSarac/jsoncrack.com/pull/108

Bug/share link by @yuvalg99 in https://github.com/AykutSarac/jsoncrack.com/pull/136

Improve Editor Rerender Performance by @AykutSarac in https://github.com/AykutSarac/jsoncrack.com/pull/157

Prevent All Nodes from Expanding by @AykutSarac in https://github.com/AykutSarac/jsoncrack.com/pull/167

fix: highlight red-dashed border display by @Hexrt in https://github.com/AykutSarac/jsoncrack.com/pull/165

Handle window freeze by @AykutSarac in https://github.com/AykutSarac/jsoncrack.com/pull/191

Canvas should fit into view on click Center icon at toolbar by @dogukanuhn in https://github.com/AykutSarac/jsoncrack.com/pull/203

Accept JSONC by stripping it of it's comments by @VladCuciureanu in https://github.com/AykutSarac/jsoncrack.com/pull/227

Added children count label next to the node key by @VladCuciureanu in https://github.com/AykutSarac/jsoncrack.com/pull/218

Added a 'Collapse/Expand Graph' button by @VladCuciureanu in https://github.com/AykutSarac/jsoncrack.com/pull/230

Fix: persist hidden nodes on rotate by @shivam1646 in https://github.com/AykutSarac/jsoncrack.com/pull/238

Fix: don't show disconnected nodes on expand by @shivam1646 in https://github.com/AykutSarac/jsoncrack.com/pull/243

New Contributors

@mbrukman made their first contribution in https://github.com/AykutSarac/jsoncrack.com/pull/109

@yuvalg99 made their first contribution in https://github.com/AykutSarac/jsoncrack.com/pull/136

@Hexrt made their first contribution in https://github.com/AykutSarac/jsoncrack.com/pull/165

@dogukanuhn made their first contribution in https://github.com/AykutSarac/jsoncrack.com/pull/203

@VladCuciureanu made their first contribution in https://github.com/AykutSarac/jsoncrack.com/pull/227

@shivam1646 made their first contribution in https://github.com/AykutSarac/jsoncrack.com/pull/238

Full Changelog: https://github.com/AykutSarac/jsoncrack.com/compare/v2.0.0...v2.1.0
Source code(tar.gz)
Source code(zip)
v2.0.0(Aug 27, 2022)
🔮 JSON Crack - v2.0.0

JSON Crack (previously JSON Visio) now has its second major release - v2.0.0! It is very proud to say that, this project, which started with a few stars, now has more than 5000 stars and serves many developers every day. We are grateful for the great support of GitHub and the community!

From v1 to v2, JSON Crack received following features:

Fetch JSON

Download File

Share Link

Settings

Copy/Download Graph

Search Nodes

Light Theme

Fullscreen View

VS Code's Monaco Editor

Expand/Collapse Nodes

JSON Validator

THANKS A TON FOR YOUR SUPPORTS ❤️

What's Changed

improve algorithm for null array value by @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/84

fix: added nullsafe operator to patch home error by @KarlHeitmann in https://github.com/AykutSarac/jsonvisio.com/pull/85

Fix escape character rendering by @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/87

Update Node Color Schema by @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/88

Automatically parse links by @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/89

New dockerfile by @rlex in https://github.com/AykutSarac/jsonvisio.com/pull/91

fix falsy values not displaying by @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/93

Toggle expand by @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/97

Add Collapse Nodes by @victorbrambati in https://github.com/AykutSarac/jsonvisio.com/pull/96

New Contributors

@KarlHeitmann made their first contribution in https://github.com/AykutSarac/jsonvisio.com/pull/85

@rlex made their first contribution in https://github.com/AykutSarac/jsonvisio.com/pull/91

Full Changelog: https://github.com/AykutSarac/jsonvisio.com/compare/v1.9.5...v2.0.0
Source code(tar.gz)
Source code(zip)
v1.9.5(Jul 31, 2022)
What's Changed? - v1.9.5

New Download Image options

Share links

Embed JSON Visio graph into your website

Use zustand for state managment

New Contributors

@victorbrambati made their first contribution in https://github.com/AykutSarac/jsonvisio.com/pull/40

@cihat made their first contribution in https://github.com/AykutSarac/jsonvisio.com/pull/62

Support JSON Visio!

Full Changelog: https://github.com/AykutSarac/jsonvisio.com/compare/v1.9.0...v1.9.5
Source code(tar.gz)
Source code(zip)
v1.9.0(Jun 12, 2022)
What's Changed

Add Fetch JSON from URL by @HyunseungLee-Travis in https://github.com/AykutSarac/jsonvisio.com/pull/35

Optimize Rendering Performance (experimental) by @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/52

Sentry Implementation by @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/54

New Landing Page by @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/55

Bug fixes

New Contributors

@HyunseungLee-Travis made their first contribution in https://github.com/AykutSarac/jsonvisio.com/pull/35

Full Changelog: https://github.com/AykutSarac/jsonvisio.com/compare/v1.8.0...v1.9.0
Source code(tar.gz)
Source code(zip)
v1.8.0(May 5, 2022)
JSON Visio v1.8.0 - What's Changed?

Replace JSON editor with VS Code's Monaco by @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/30

Now you can download graph as png! @AykutSarac in https://github.com/AykutSarac/jsonvisio.com/pull/32

Feature highlight multiple search results by @burakozarslan in https://github.com/AykutSarac/jsonvisio.com/pull/26

Add Dockerfile by @jcalonso in https://github.com/AykutSarac/jsonvisio.com/pull/24

Update icons at sidebar and tools

Bug fixes

New Contributors

@burakozarslan made their first contribution in https://github.com/AykutSarac/jsonvisio.com/pull/26

@jcalonso made their first contribution in https://github.com/AykutSarac/jsonvisio.com/pull/24

Full Changelog: https://github.com/AykutSarac/jsonvisio.com/compare/v1.6.0...v1.8.0
Source code(tar.gz)
Source code(zip)
v1.6.0(Apr 27, 2022)
What's Changed?

Create PWA for JSON Visio (works in offline mode too!) 🎉

Disable SSR, drastically improve rendering performance

Source code(tar.gz)
Source code(zip)
v.1.5.0(Apr 26, 2022)
Dynamic canvas size to increase performance

Limit canvas panning to bounds

Fix node size for multi-line data

Replace split-pane component with another library

Hide empty node values & array keys with no children

Performance improvements

Bug fixes

Source code(tar.gz)
Source code(zip)
v1.4.0(Apr 16, 2022)
Added light mode

Update React 18

Bug fixes

Source code(tar.gz)
Source code(zip)
v1.3.0(Apr 10, 2022)
JSON Visio: v1.3.0 Update - What's changed?

Added Toolbar

Added Search Node feature (experimental)

Added Fullscreen mode

New layout & colors

Sidebar icons updated

Bug fixes

Source code(tar.gz)
Source code(zip)
v1.2.0(Apr 2, 2022)
Add node hover effect

Styling improvements

Improve Array & Object Key detection

Update packages

Full Changelog: https://github.com/AykutSarac/jsonvisio.com/compare/v1.0.0...v1.2.
Source code(tar.gz)
Source code(zip)
v1.0.0(Feb 17, 2022)

JSON Visio

JSON Visio is a tool to view your JSON data in graphs. This is the first major release of JSON Visio, v1.0.0.

🔓 No Rules: Be free, you don't have to restructure your json to transform it into graphs. We've done it at our side, so you can just paste your JSON!

📦 Import File: Have an existing file for your data? No worries, directly import it into our editor without having to scroll through all of it!

⚒️ Supported by Open Source: We do our work at open source. Help us improve by contributing to JSON Visio at GitHub!
Source code(tar.gz)
Source code(zip)
v1.5.0-beta(Feb 16, 2022)
What's Changed

Remake JSON Editor

Feature: Toggle auto format

Update icons

Add toast messages

Bug fixes

Source code(tar.gz)
Source code(zip)
v1.2.0-beta(Feb 9, 2022)
What's Changed

Replaced react-flow-renderer library with reaflow

Removed dagre

Nodes are no longer can be dragged (temporarily)

Layout is auto generated on JSON modification

Fixed cursor going to top on JSON modify

Fixed JSON clear is not working correctly

Performance optimizations

Source code(tar.gz)
Source code(zip)
v1.0.0-beta(Feb 4, 2022)

Source code(tar.gz)
Source code(zip)