JSON Forms 4 Demo

A ground-up refactoring of JSON Forms around a presentation model: the core computes everything a form needs — labels, values, validation issues, constraints — into one serializable model. This decouples rendering from the core, and the core from its schema input.

Pick a renderer set

React Material

Material UI v9 renderer set (@jsonforms/react-material)

React Vanilla

Plain-HTML renderer set (@jsonforms/react-vanilla)

Vue

Coming with a later milestone

Angular

Coming with a later milestone

What this demo showcases

Presentation model

Renderers are thin views over precomputed nodes — no schema logic in the UI layer, and only changed nodes re-render. Inspect the live model in every demo.

Pluggable schema sources

The same forms, layouts and renderers driven by JSON Schema or by zod — the schema format is an exchangeable input to the core.

Pluggable validation

AJV with selectable builds (draft-07, 2019-09, 2020-12), arbitrary handwritten validators without any framework, or zod itself — synchronous or asynchronous.

Server-side forms

The form engine can run outside the browser's UI thread: a Web Worker stands in for a server, exchanging serialized commands and model deltas — including simulated latency and rejected changes.