jsoncrack.com
jsoncrack.com copied to clipboard
AykutSarac
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
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.
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.
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.
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.
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".
JSON Crack now has dynamic embeds, check it out here: https://jsoncrack.com/embed Let me know if you any questions :)
@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 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?
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.
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
