# eclipsesource/jsonforms architecture

> Architecture diagram of the GitHub repository eclipsesource/jsonforms, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/eclipsesource/jsonforms
- Repository: https://github.com/eclipsesource/jsonforms

## Overview

JSON Forms is a schema-driven form system with framework adapters and renderer libraries. The principal workflow is that an application supplies data, a JSON Schema, and a UI schema to an adapter; core state and mapping logic prepare renderer props, and the selected renderer library displays controls and layouts whose edits update form data. Core also supports validation, generated defaults, configuration, and internationalization. The tree and sampled excerpts show these major layers, but do not establish every adapter-to-renderer call path, so uncertain wiring is omitted.

Main entry points: [`packages/core/src/mappers/renderer.ts`](https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/mappers/renderer.ts) (Prop mapping), [`packages/material-renderers/src/index.ts`](https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/index.ts) (Material renderers), [`packages/core/src/reducers/core.ts`](https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/reducers/core.ts) (Core state), [`packages/angular/src/library/jsonforms.service.ts`](https://github.com/eclipsesource/jsonforms/blob/master/packages/angular/src/library/jsonforms.service.ts) (Angular service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_integration["Framework adapters"]
  node_react["React adapter<br/>[JsonForms.tsx]"]
  node_vue["Vue adapter<br/>[JsonForms.vue]"]
  node_angular["Angular service"]
end

subgraph group_engine["Form engine"]
  node_core["Core state<br/>[core.ts]"]
  node_store["State store<br/>[jsonFormsCore.ts]"]
  node_mapping["Prop mapping<br/>[renderer.ts]"]
  node_validation["Validation<br/>[validator.ts]"]
  node_generation["Schema defaults<br/>[Generate.ts]"]
  node_i18n["Translations<br/>[index.ts]"]
end

subgraph group_renderers["Renderer libraries"]
  node_material["Material renderers<br/>[index.ts]"]
  node_vanilla["Vanilla renderers<br/>[index.ts]"]
  node_vuevanilla["Vue vanilla renderers<br/>[index.ts]"]
  node_vuetify["Vue Vuetify renderers<br/>[index.ts]"]
  node_angularmaterial["Angular Material<br/>[index.ts]"]
end

subgraph group_widgets["Renderer components"]
  node_controls["Input controls<br/>[index.ts]"]
  node_layouts["Form layouts<br/>[index.ts]"]
  node_complex["Complex renderers<br/>[index.ts]"]
  node_cells["Table cells<br/>[index.ts]"]
end

node_app(("Application"))

node_app -->|"provides form inputs"| node_react
node_app -->|"provides form inputs"| node_vue
node_app -->|"provides form inputs"| node_angular
node_react -->|"initializes state"| node_core
node_angular -->|"dispatches actions"| node_core
node_core -->|"updates state"| node_store
node_angular -->|"generates defaults"| node_generation
node_core -->|"validates data"| node_validation
node_store -->|"supplies state"| node_mapping
node_mapping -->|"selects renderers"| node_material
node_mapping -->|"selects renderers"| node_vanilla
node_mapping -->|"selects renderers"| node_vuevanilla
node_mapping -->|"selects renderers"| node_vuetify
node_mapping -->|"selects renderers"| node_angularmaterial
node_mapping -->|"resolves translations"| node_i18n
node_material -->|"registers controls"| node_controls
node_material -->|"registers layouts"| node_layouts
node_material -->|"registers complex views"| node_complex
node_material -->|"registers cells"| node_cells
node_controls -->|"dispatches edits"| node_core

click node_react "https://github.com/eclipsesource/jsonforms/blob/master/packages/react/src/JsonForms.tsx"
click node_vue "https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/src/components/JsonForms.vue"
click node_angular "https://github.com/eclipsesource/jsonforms/blob/master/packages/angular/src/library/jsonforms.service.ts"
click node_core "https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/reducers/core.ts"
click node_store "https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/store/jsonFormsCore.ts"
click node_mapping "https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/mappers/renderer.ts"
click node_validation "https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/util/validator.ts"
click node_generation "https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/generators/Generate.ts"
click node_i18n "https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/i18n/index.ts"
click node_material "https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/index.ts"
click node_vanilla "https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers/src/index.ts"
click node_vuevanilla "https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vanilla/src/index.ts"
click node_vuetify "https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vuetify/src/index.ts"
click node_angularmaterial "https://github.com/eclipsesource/jsonforms/blob/master/packages/angular-material/src/index.ts"
click node_controls "https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/controls/index.ts"
click node_layouts "https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/layouts/index.ts"
click node_complex "https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/complex/index.ts"
click node_cells "https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/cells/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_react,node_vue,node_angular toneBlue
class node_core,node_store,node_mapping,node_validation,node_generation,node_i18n toneAmber
class node_material,node_vanilla,node_vuevanilla,node_vuetify,node_angularmaterial toneMint
class node_controls,node_layouts,node_complex,node_cells toneRose
class node_app toneIndigo
```

## Components

### Framework adapters

- [React adapter](https://github.com/eclipsesource/jsonforms/blob/master/packages/react/src/JsonForms.tsx): `packages/react/src/JsonForms.tsx`
- [Vue adapter](https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/src/components/JsonForms.vue): `packages/vue/src/components/JsonForms.vue`
- [Angular service](https://github.com/eclipsesource/jsonforms/blob/master/packages/angular/src/library/jsonforms.service.ts): `packages/angular/src/library/jsonforms.service.ts`

### Form engine

- [Core state](https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/reducers/core.ts): `packages/core/src/reducers/core.ts`
- [State store](https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/store/jsonFormsCore.ts): `packages/core/src/store/jsonFormsCore.ts`
- [Prop mapping](https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/mappers/renderer.ts): `packages/core/src/mappers/renderer.ts`
- [Validation](https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/util/validator.ts): `packages/core/src/util/validator.ts`
- [Schema defaults](https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/generators/Generate.ts): `packages/core/src/generators/Generate.ts`
- [Translations](https://github.com/eclipsesource/jsonforms/blob/master/packages/core/src/i18n/index.ts): `packages/core/src/i18n/index.ts`

### Renderer libraries

- [Material renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/index.ts): `packages/material-renderers/src/index.ts`
- [Vanilla renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers/src/index.ts): `packages/vanilla-renderers/src/index.ts`
- [Vue vanilla renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vanilla/src/index.ts): `packages/vue-vanilla/src/index.ts`
- [Vue Vuetify renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vuetify/src/index.ts): `packages/vue-vuetify/src/index.ts`
- [Angular Material](https://github.com/eclipsesource/jsonforms/blob/master/packages/angular-material/src/index.ts): `packages/angular-material/src/index.ts`

### Renderer components

- [Input controls](https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/controls/index.ts): `packages/material-renderers/src/controls/index.ts`
- [Form layouts](https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/layouts/index.ts): `packages/material-renderers/src/layouts/index.ts`
- [Complex renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/complex/index.ts): `packages/material-renderers/src/complex/index.ts`
- [Table cells](https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers/src/cells/index.ts): `packages/material-renderers/src/cells/index.ts`

### Other components

- **Application**

## Connections

- Application → React adapter: provides form inputs
- Application → Vue adapter: provides form inputs
- Application → Angular service: provides form inputs
- React adapter → Core state: initializes state
- Angular service → Core state: dispatches actions
- Core state → State store: updates state
- Angular service → Schema defaults: generates defaults
- Core state → Validation: validates data
- State store → Prop mapping: supplies state
- Prop mapping → Material renderers: selects renderers
- Prop mapping → Vanilla renderers: selects renderers
- Prop mapping → Vue vanilla renderers: selects renderers
- Prop mapping → Vue Vuetify renderers: selects renderers
- Prop mapping → Angular Material: selects renderers
- Prop mapping → Translations: resolves translations
- Material renderers → Input controls: registers controls
- Material renderers → Form layouts: registers layouts
- Material renderers → Complex renderers: registers complex views
- Material renderers → Table cells: registers cells
- Input controls → Core state: dispatches edits