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.
https://jsoncrack.com/
Other
30.5k stars 1.89k forks source link

Embed JSON Crack graph in websites #171

Closed liyasthomas closed 1 year ago

liyasthomas commented 2 years ago

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

AykutSarac commented 2 years ago

When you click at share button at sidebar there is an embed link. Paste it at the part of your website where you want to see it and the embed will be shown there.

However, I have to tell that the embeds will be broken soon as I'll be implementing short share links.

liyasthomas commented 2 years ago

I was able to find the embeddable instance. But I was looking for an option to customize the way the editor looks, behaves, and renders. Moreover, I have a Vue website, so I'd appreciate it if JSON crack is packaged as an npm package.

ghilesmeddour commented 2 years ago

Having a package can make it easier to develop JSON Crack components for other languages / platforms.

For example, it would be really great to be able to use JSON Crack easily on Streamlit.

alexandernst commented 2 years ago

Instead of linking to external services (even if self-hosted), I'd like to be able to use this as a React component. Maybe

<JSONCrack json={my_json} />

and this would render the graph.

phungvhbui commented 2 years ago

I would appreciate jsoncrack as a component for SPA :+1: Another approach is to enable the API to receive json data and generate the corresponding "embedded link".

brendon-stephens commented 2 years ago

This would be a great feature add!

AykutSarac commented 1 year ago

JSON Crack now has dynamic embeds, check it out here: https://jsoncrack.com/embed Let me know if you any questions :)

alexandernst commented 1 year ago

@AykutSarac Maybe I should have opened a new issue; this doesn't implement what I requested (being able to use jsoncrack as a react component). The current solution requires to host jsoncrack somewhere and load it in an iframe, but it would be nice if this could be used as a react component.

AykutSarac commented 1 year ago

@AykutSarac Maybe I should have opened a new issue; this doesn't implement what I requested (being able to use jsoncrack as a react component). The current solution requires to host jsoncrack somewhere and load it in an iframe, but it would be nice if this could be used as a react component.

It will be hard to manage an external React component lib as some core parts of the Graph component requires connection within the app directly for state management and more, that's why I created a dynamic embed. What are the features you were looking for that you did not find in the embed so we could look into it?

alexandernst commented 1 year ago

Well, the main thing that bugs me is having to host it somewhere and then having to load it inside an iframe.

About the state management, I really don't understand what is the relation between having jsoncrack hosted, managing the state and using jsoncrack as a react component. These things are totally unrelated one with the other.

woutervanranst commented 1 year ago

Great! Any ETA on your short share links? I'm specifically looking to embed a static json in a web page through your visualisation so the structure becomes apparent

The current embed code seems already broken since it always defaults back to the Super hero squad json, not the one in the ?json=:

https://jsoncrack.com/editor?json=%5B%5B%22value%22%2C%22a%7C0%22%2C%22hello%20world%22%2C%22o%7C1%7C2%22%5D%2C%223%22%5D