How eclipsesource/jsonforms works
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: renderer.ts Prop mapping · index.ts Material renderers · core.ts Core state · jsonforms.service.ts Angular service
Components 19
Framework adapters
- React adapter
packages/react/src/JsonForms.tsx - Vue adapter
packages/vue/src/components/JsonForms.vue - Angular service
packages/angular/src/library/jsonforms.service.ts
Form engine
- Core state
packages/core/src/reducers/core.ts - State store
packages/core/src/store/jsonFormsCore.ts - Prop mapping
packages/core/src/mappers/renderer.ts - Validation
packages/core/src/util/validator.ts - Schema defaults
packages/core/src/generators/Generate.ts - Translations
packages/core/src/i18n/index.ts
Renderer libraries
- Material renderers
packages/material-renderers/src/index.ts - Vanilla renderers
packages/vanilla-renderers/src/index.ts - Vue vanilla renderers
packages/vue-vanilla/src/index.ts - Vue Vuetify renderers
packages/vue-vuetify/src/index.ts - Angular Material
packages/angular-material/src/index.ts
Renderer components
- Input controls
packages/material-renderers/src/controls/index.ts - Form layouts
packages/material-renderers/src/layouts/index.ts - Complex renderers
packages/material-renderers/src/complex/index.ts - Table cells
packages/material-renderers/src/cells/index.ts
Other components
- Application
Connections 20
- 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