WebComponents and htmx

Hello JSONForms community,

I just wanted to highlight a growing use-case for the WebComponent based distribution of JSON Forms with htmx.

To those who haven’t checked it ut htmx, it’s a relatively new tool for developing modern user interfaces by embracing and extending the concepts of hypermedia. Using htmx, modern user experiences can be created by sticking to an enhanced set of HTML and CSS without the complexity of modern SPA frameworks. It’s a refreshingly simple way of developing interfaces.

The application we are developing using htmx has a number of forms which originate from a schema. It seems like a natural fit for JSONForms. As an experiment, I dropped json-form-custom-element into the project (using the unpkg cdn), had the application emit the schema as json into the component and was 90% there!

json-form-custom-element appears to be abandoned now, should I be working with jsonforms-angular-webcomponent?


Hi @rfb,

json-form-custom-element is not maintained by us so I can’t give any information there.

The jsonforms-angular-webcomponent is a web component build of an old JSON Forms version using the Angular Material renderers. However we don’t actively maintain it. It’s only updated whenever we or a customer needs an updated version for a project.

There are also webcomponent builds of more feature rich renderer sets (e.g. Vuetify 2) maintained by the community. However what the Angular webcomponent and Vuetify 2 webcomponent build have in common is that they basically fully wrap Angular/Angular Material or Vue/Vuetify. So they are actually using modern SPAs. While they are hidden away, the webcomponents are also more cumbersome to use.

Of course you could also write a webcomponent binding and renderer set for JSON Forms from scratch, reusing @jsonforms/core where applicable. I guess that is what you would like to see. If you embark on this journey, feel free to ask for advice here in the forum.