How to create JSONForms binding to integrate with JS framework?

There are already angular and react bindings created for JSON forms.

I went through some code and it looks a bit complex.

I was wondering if anybody has rolled out their own or if there is a simple code example out there.

I need to integrate JSON forms into the legacy web application so that JSONForms schema/uischema can control the behavior of the legacy app in terms of display, setting required field based on values etc.

Any help is appreciated. Thank you.

Hi @zammy,

we don’t really offer a “Standalone” JSON Forms lib which you can simply consume via a <script/>. If you need something like this, then you either need to build it yourself or use the linked jsonforms-angular-webcomponent. You can find an example of its usage here.

You could setup a small project with a single React component invoking JSON Forms with the React Material or Vanilla renderers and bundle a small lib with all dependencies. Then you only have React and your custom bundle in your HTML and can render JSON Forms via react-dom into your legacy app. Of course if you prefer you could bundle everything and just expose a Javascript interface, it’s just more work.

The same should be possible with the Angular or Vue bindings if you prefer.

If you don’t want to employ any of these frameworks you would need to create “VanillaJS” bindings and a “VanillaJS” renderer set completely from scratch without the comfort of any of these UI libraries, i.e. you need your own state management and DOM update mechanisms.

I’m confused how to get this working. Is this a typescript lib? Why don’t you offer a friendly JS library? This would make it really easy to start using it. I was hoping to use this with vue.js.

Hi @donnyv,

Typescript is just the language in which our packages are implemented, our distributed libraries are Javascript only. So you don’t need to use Typescript at all as a consumer.

For starters I would like to recommend our architecture overview and checking out our various seeds. We have a simple Vue seed which you can find here and a much more elaborate example Vue application as part of the Vuetify renderers repository. Studying the seed and/or the example app should be sufficient to get you up to using JSON Forms.

That seed Vue project is written in typescript. I think I know where my confusion is. This is meant to be used with Node as your backend. Thats why I keep seeing “@jsonforms/core”. I use core for my backend. Do you or any site have a compiled jsonforms.js file that I can reference in a script tag?

Hi @donnyv,

We don’t provide an up to date bundled version of JSON Forms out of the box, see this previous discussion for more pointers.

We have an older build available which bundles the Angular and Angular Material renderers into one webcomponent which you could use out of the box. Here we did use it. However at this point I would only recommend this as a POC.

Thanks for the help. But I think this is just not a hill I’m willing to climb just to see if its a library I might use. I’m going to have to move on to another forms library.