JSON Forms Core

The framework-agnostic engine that renders complex forms straight from JSON Schema and UI Schema definitions.

Library
npm
v3.8.0
2,737stars
MIT License

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum.How we score it →
81/100Excellent
Development Activity72
Maintenance76
Community76
Maturity60
Momentum40

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation.How we score it →
76/100Good
Architecture82
Code Quality85
Innovation72
Learning Curve65

@jsonforms/core is the framework-agnostic engine at the heart of JSON Forms, a schema-driven approach to building complex web forms without hand-coding markup. It takes a JSON Schema describing your data model and an optional UI Schema describing layout, then produces a fully resolved, renderer-agnostic description of what to draw — leaving the actual DOM rendering to framework-specific packages like @jsonforms/react, @jsonforms/angular, or @jsonforms/vue.

Internally it combines an Ajv-based validation pipeline, a Redux-style reducer/store for form state, a ranked “tester” system that matches UI schema elements to renderers, and generators that can synthesize a default UI Schema straight from sample data. This lets teams change validation rules, add custom renderers, or auto-generate entire forms without touching hand-written templates, which is why it underpins admin tooling, low-code form builders, and any product where forms need to stay in sync with an evolving JSON Schema contract.

What You Get

  • JSON Schema-driven data validation via Ajv and ajv-formats, including format keywords like date-time and email
  • A ranked tester system that scores and matches UI schema elements to the most appropriate renderer
  • A Redux-compatible reducer/store covering core state, renderers, cells, UI schemas, config, and i18n
  • UI Schema and JSON Schema generators that can auto-scaffold a form straight from sample data
  • Built-in i18n utilities for translating field labels, descriptions, and validation error messages
  • Support for multiple JSON Schema dialects (Draft 4, 6, and 7) so it works with schemas from different tools

Common Use Cases

  • Building admin/back-office CRUD forms directly from a JSON Schema without hand-coding each field
  • Rendering dynamically configurable forms where the schema changes per tenant, user, or plan
  • Adding custom renderers or cells for domain-specific input widgets, such as custom date pickers or rich text
  • Synchronizing client-side form validation with a backend’s JSON Schema-based API contract

Under The Hood

Architecture The package is organized as a set of composable layers rather than a single monolith: models/ defines the JSON Schema (Draft 4/6/7) and UI Schema type contracts, testers/testers.ts implements the ranked-tester matching algorithm that decides which renderer handles a given schema/UI-schema pair, reducers/ (core, renderers, cells, uischemas, config, i18n) implement a Redux-style state machine wired together in store/store.ts, and generators/ can synthesize a UI Schema or JSON Schema from raw sample data. index.ts re-exports each subsystem individually (Actions, Test, etc.) so consumers can depend on just the pieces they need. Changing the core abstraction — the Tester/RankedTester function signature — would ripple through every renderer package (React, Angular, Vue) since they all register renderers against this same contract, making it the true integration point of the whole monorepo.

Tech Stack Written in TypeScript and built with Rollup (rollup-plugin-typescript2) into both CommonJS and ESM bundles (lib/jsonforms-core.cjs.js / .esm.js) plus type declarations. Validation runs on ajv (v8) with ajv-formats for format keywords, and lodash is used throughout for object/path utilities. The package ships no UI framework dependency itself — React, Angular, and Vue integrations live in sibling packages (@jsonforms/react, @jsonforms/angular, @jsonforms/vue) within the same pnpm/lerna-managed monorepo, and Redux (or a Redux-compatible store) is the expected host for the reducers this package exports.

Code Quality Tests are extensive and use ava as the runner with ts-node for TypeScript execution and nyc for coverage, covering testers, reducers, generators, mappers, utils, and i18n in dedicated files under test/. Linting is enforced via ESLint with @typescript-eslint and Prettier integration, and CI (.github/workflows/ci.yaml) runs the full build and test suite across Ubuntu, macOS, and Windows on every push and PR, using Node 24 and pnpm with a frozen lockfile — a strong cross-platform quality bar for a library many other packages depend on.

API Design The public API favors small, composable named exports (individual testers like isDateControl, combinators like and/or/not, reducer functions, generator functions) over a single large façade object, which keeps tree-shaking effective but means new consumers need the docs site (jsonforms.io) to discover the right combination of pieces. Getting started requires wiring a JSON Schema, a UI Schema (or letting the generator produce one), and a store together before any rendering framework can consume it, so the core package alone has a moderate amount of setup boilerplate — most of the ergonomic payoff shows up once combined with one of the framework-specific renderer packages.

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack
Join 750+ subscribers

Search