Hello, there is an example on how to use jsonforms with vanilla js?

General
1

[original thread by seu madruga]

2

You can take a look at our React seed. There you can import the vanillaRenderers and vanillaCells from @jsonforms/vanilla-renderers and pass them to JsonForms instead of the materialRenderers and materialCells.

3

Sadly this example still uses import { JsonForms } from '@jsonforms/react';

Which is not vanilla js…

4

As I can read from the code, even vanilla controls use React, so there is no way around react.

It might be possible to write a real vanilla js renderer for tiddlywiki, but without enough tutorial on this, it is very hard. Still, thanks for making this library and make it modular.

5

Hi @linonetwo,

At the moment we only offer binding for React, Vue2/3 and Angular. There is no ‘Vanilla’ binding available. Initially we only offered React which is why the vanilla renderers were implicitly refering to React, today we would call it react-vanilla.

If you need a Vanilla binding you will need to implement it yourself but you can reuse @jsonforms/core. Still there are many things you need to handle manually then, the advantage of using React, Vue or Angular is that one can use their state management and (re)rendering systems.

6

Just to confirm; two years later; is what you said still the case @sdirix ?

Keen to use this without a framework =)

7

Hi @SamuelMarks,

I haven’t come across anyone creating a pure VanillaJS binding for JSON Forms. If your use case requires dynamic forms, it’s generally more practical to use an existing dynamic rendering framework. Even if you rely on React solely for rendering JSON Forms, its footprint is small enough to be negligible while sparing you from developing a custom, untested, and unpolished state and rendering management system.

The drawbacks of a pure VanillaJS binding (significant effort and lack of maturity) typically outweigh its advantages, such as a smaller bundle size and fewer dependencies. A motivated adopter who truly values the distinction between a VanillaJS and a React-based solution would need to drive its development.

–

That said, if your goal is a UMD-style, self-contained solution that can be used in Vanilla JavaScript without bundling a React, Angular, or Vue application, consider a web component approach. This involves packaging the React, Angular, or Vue bindings along with their renderer set into a web component, allowing integration via simple HTML without exposing the underlying framework.

We’ve previously built Angular-based and React-based web components, though they are no longer actively maintained. A more up-to-date, community-maintained Vue Vuetify web component is also available.