Hi folks,
I’m building an app that involves data visualization and I’d like to be able to use something like the vega editor as a custom component.
Since I can already render vega lite charts in Anvil (thanks to Meredydd’s post), I’d like to have a place where users can type the relevant JSON, but get all the nice autocomplete as they would in the native editor. I’ve looked into it and apparently they use this JSON schema to provide the autocomplete somehow.
Their online editor looks like this (here’s a link to the live editor itself):
There are instructions here for deploying the editor locally, but I’m quite unclear as to if/how this could be used in an Anvil app directly, or if some kind of similar experience could be achieved using other methods.
This is pretty far outside of my area of expertise. Any advice would be greatly appreciated.
I have found this popular JSON editor that can be used in web applications.
This is the code that I have used in Anvil (according to the JSONEditor instructions):
// in native libraries
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
// in a custom HTML component
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
<script>
// create the editor
var container = document.getElementById("jsoneditor");
var editor = new JSONEditor(container);
</script>
Unfortunately, I get the JSONEditor is not defined error. I believe this may have something to do with libraries not loading in the order that I expect, as detailed in this post. I have tried the solution in that post but I still cannot manage to load the library (the console tells me that it is not loaded AFAICT).
This is a simple clone that demonstrates the issue.
https://anvil.works/build#clone:ATZMZJIMJMMG4I2J=OJ6EHDFEGYZTC4CPITW4CZ2M
Does anyone have some insight into what I am doing wrong?
The documentation assumes you have built the JavaScript and put it in a folder called dist.
You could clone the GitHub repo, build the JavaScript and then put it in your theme folder and then use the relative path _/theme
You could also find the JavaScript on a cloud hosted service like cdnjs and avoid building the JavaScript. https://cdnjs.com/libraries/jsoneditor
2 Likes
It works perfectly!! I tried the cdnjs solution.
You are incredible. Thank you so much as this solution has taught me a lot in general.
Now, is this not the coolest thing you’ve ever seen? Unbelievable.
3 Likes
Hi @campopianoa . I am looking to do something similar and have a JSON viewer in my app. When I look at your clone I see that there are some libraries not there from ._anvil_designer import json_displayTemplate. Wondering how you got the JSON into the form? Note: I am a novice at GUI?JavaScript.
Thanks!
