Skip to main content

​
Installation

JSON Forms is available as npm packages for React, Angular, and Vue. This guide covers installation for all supported frameworks and renderer sets.

​
Package overview

JSON Forms is built with a modular architecture. Each installation requires:
  1. Core package - @jsonforms/core (v3.7.0)
  2. Framework binding - React, Angular, or Vue package
  3. Renderer set - UI components for your chosen design system
All JSON Forms packages are currently at version 3.7.0. Make sure all packages use the same version to avoid compatibility issues.

​
React

JSON Forms provides two renderer sets for React:
  • Material Renderers - Based on Material-UI (MUI)
  • Vanilla Renderers - Unstyled HTML5 controls

​
Install JSON Forms packages

npm install @jsonforms/[email protected] @jsonforms/[email protected] @jsonforms/[email protected]

​
Install peer dependencies

Material renderers require Material-UI v7 and its dependencies:
npm install @mui/material@^7.0.0 @mui/icons-material@^7.0.0 @emotion/react@^11.5.0 @emotion/styled@^11.3.0 @mui/x-date-pickers@^8.0.0

​
Supported React versions

React 16.12.0+ || 17.x || 18.x || 19.x

​
Angular

JSON Forms provides Material Design renderers for Angular using Angular Material.

​
Install JSON Forms packages

npm install @jsonforms/[email protected] @jsonforms/[email protected] @jsonforms/[email protected]

​
Install peer dependencies

npm install @angular/material@^19.0.0 @angular/cdk@^19.0.0 @angular/animations@^19.0.0 dayjs@^1.11.10

​
Supported Angular versions

  • Angular 19.x || 20.x || 21.x
  • RxJS 6.6.0+ || 7.4.0+
Angular Material, CDK, Forms, and Platform Browser must all use the same major version as your Angular Core installation.

​
Import modules

Add JSON Forms modules to your application:
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { JsonFormsModule } from '@jsonforms/angular';
import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    JsonFormsModule,
    JsonFormsAngularMaterialModule,
  ],
  // ...
})
export class AppModule {}

​
Vue

JSON Forms provides two renderer sets for Vue 3:
  • Vuetify Renderers - Based on Vuetify 3
  • Vanilla Renderers - Lightweight HTML5 controls

​
Install JSON Forms packages

npm install @jsonforms/[email protected] @jsonforms/[email protected] @jsonforms/[email protected]

​
Install peer dependencies

npm install vuetify@^3.9.0 vue@^3.5.0 ajv@^8.6.1 dayjs@^1.10.6 maska@^2.1.11 lodash@^4.17.21

​
Supported Vue versions

Vue 3.5.0+

​
Set up Vuetify

Configure Vuetify in your application:
main.ts
import { createApp } from 'vue';
import { createVuetify } from 'vuetify';
import 'vuetify/styles';
import '@mdi/font/css/materialdesignicons.css';
import App from './App.vue';

const vuetify = createVuetify();

const app = createApp(App);
app.use(vuetify);
app.mount('#app');

​
Core package only

If you’re building custom renderers or need just the core utilities: 
npm install @jsonforms/[email protected]
Core dependencies:
  • ajv@^8.6.1 - JSON Schema validation
  • ajv-formats@^2.1.0 - Additional format validators
  • lodash@^4.17.21 - Utility functions

​
TypeScript support

All JSON Forms packages include TypeScript type definitions. No additional @types packages are needed. 
import { JsonSchema, UISchemaElement } from '@jsonforms/core';
import { JsonForms } from '@jsonforms/react';

​
Version compatibility

Always use the same version across all JSON Forms packages to ensure compatibility.
PackageVersionStatus
@jsonforms/core3.7.0Current
@jsonforms/react3.7.0Current
@jsonforms/angular3.7.0Current
@jsonforms/vue3.7.0Current
@jsonforms/material-renderers3.7.0Current
@jsonforms/vanilla-renderers3.7.0Current
@jsonforms/angular-material3.7.0Current
@jsonforms/vue-vuetify3.7.0Current
@jsonforms/vue-vanilla3.7.0Current

​
Seed projects

For a complete working setup, check out the official seed repositories:

React Seed

Complete React starter with Material renderers

Angular Seed

Complete Angular starter with Material renderers

Vue Seed

Complete Vue 3 starter with Vuetify renderers

​
Migration from older versions

If you’re upgrading from an earlier version of JSON Forms:
  1. Check the migration guide for breaking changes
  2. Update all JSON Forms packages to the same version
  3. Update peer dependencies to supported versions
  4. Test your forms thoroughly after upgrading
Node.js 22+ is required for development. Node.js 23 is not currently supported.

​
Next steps

Now that you’ve installed JSON Forms, you’re ready to build your first form:

Build docs developers (and LLMs) love

Get started for freeTalk to us