Is is possible to use JSONForms from a static web page?


I am working on a project which requires a feasible form demonstration. The UI runs both in qt web engine and a static web server, so it is impossible to make use of the NodeJs server. I think there should be a way to integrate JSONForms using “raw” js call, like referring a set of js & css files in the and call a builder function after is loaded, much like the usage of of the jsonform library.

However, I cannot find any document about such usage. I think a simple HTML file showing a simple form would help a lot. Would anyone please provide such a tutorial? Thanks very much!

Hi @metorm, at the moment we don’t offer an out-of-the-box or builder pattern to simply create a form. However you can create one yourself if you’d like to.

You can go the direct route and for example programmatically use React to create a JsonForms component with the appropriate props. This makes the most sense when you are also using React for other purposes than rendering JSON Forms.

A different approach would be to bundle JSON Forms core with a binding, renderer set of choice and all its dependencies to a web component. Here is an example for the JSON Forms Angular Material. Then you have one clear entry point to render a form and only one (large) JS dependency.

Hi Stefan, Thanks for your response, I’m also on a similar path as Wesley, I’m trying to find a single library that works with react and plain js or other renderers, this library has many things going for it from the architecture that is extensible to the choice of renders currently available as well as a ui schema seperate from the data schema. But lacks the simple version that works directly on browser, please look at this example: Hello json-editor / Alok Pepakayala / Observable, we don’t have a script that can be imported without a build step like we can here, I’m trying to use this with preact directly on the browser without having have a build step, please let me know your comments on how I can achieve this?

Hi @a10k, I’m assuming that what you’d like to have is a bundled version of JSON Forms core + binding + renderer set + dependencies which you can just drop in a web page and call to create a form. This is definitely possible. All you need to do is to write a small JS wrapper which for example delegates to react-dom’s render and then bundle everything together. Of course you can exclude dependencies which you make available by other means.

Alternatively you could also use web components as outlined in the first answer.

Hi Stefan @sdirix , the problem is, I (Perhaps also Alok) only have a piece of very limited knowledge about the web components or node js. To be honest, the node JS building process is somehow like magic for me, and the resulting web page I saw in my browser is like a javascript soup …

In fact, all I need is an HTML file, as simple as possible, so I can embed it into the Qt-webengine, and then I would be able to build the inputting form in my engineering application in a clean manner. I’ve already built a similar code using alpaca, but JSONForms is more attractive in many aspects.

Therefore, an out-of-box sample code, or a step-by-step manual, would be really practical for a semi-layman like me. Thank you very much.

1 Like

Creating a whole tutorial or guide is a little bit out of scope for JSON Forms as it’s not directly related to JSON Forms but is the same for any React / Angular / Vue based application. As mentioned you can take a look at our static build of the JSON Forms Angular Material renderers which can be used as a regular web component.

You might be interested in our professional support offerings via which we can help you with detailed guides and explanations.