Quickstart

Get started with JSON Forms in minutes. This guide will walk you through creating your first form from installation to a working example.

What you’ll build

A simple task management form with:

Text input for task name
Checkbox for completion status
Date picker for due date
Dropdown for recurrence options

Prerequisites

Node.js 22+ installed
Basic knowledge of React, Angular, or Vue
A package manager (npm, yarn, or pnpm)

React
Angular
Vue

React Setup

Install dependencies

Install JSON Forms Core, React bindings, and Material renderers:

npm install @jsonforms/core @jsonforms/react @jsonforms/material-renderers

Install Material-UI peer dependencies:

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-date-pickers

Create your JSON Schema

Define the structure and validation rules for your data:

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      minLength: 1,
    },
    done: {
      type: 'boolean',
    },
    due_date: {
      type: 'string',
      format: 'date',
    },
    recurrence: {
      type: 'string',
      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
    },
  },
  required: ['name', 'due_date'],
};

The schema uses JSON Schema standard. The type defines data types, minLength adds validation, and required marks mandatory fields.

Create your UI Schema (optional)

Customize the layout of your form:

const uischema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      label: false,
      scope: '#/properties/done',
    },
    {
      type: 'Control',
      scope: '#/properties/name',
    },
    {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/due_date',
        },
        {
          type: 'Control',
          scope: '#/properties/recurrence',
        },
      ],
    },
  ],
};

The UI Schema is optional. Without it, JSON Forms will automatically generate a layout based on your JSON Schema.

Render the form

Create your component using the JsonForms component:

App.tsx

import React, { useState } from 'react';
import {
  materialRenderers,
  materialCells,
} from '@jsonforms/material-renderers';
import { JsonForms } from '@jsonforms/react';

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      minLength: 1,
    },
    done: {
      type: 'boolean',
    },
    due_date: {
      type: 'string',
      format: 'date',
    },
    recurrence: {
      type: 'string',
      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
    },
  },
  required: ['name', 'due_date'],
};

const uischema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      label: false,
      scope: '#/properties/done',
    },
    {
      type: 'Control',
      scope: '#/properties/name',
    },
    {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/due_date',
        },
        {
          type: 'Control',
          scope: '#/properties/recurrence',
        },
      ],
    },
  ],
};

const initialData = {};

function App() {
  const [data, setData] = useState(initialData);
  
  return (
    <JsonForms
      schema={schema}
      uischema={uischema}
      data={data}
      renderers={materialRenderers}
      cells={materialCells}
      onChange={({ data, _errors }) => setData(data)}
    />
  );
}

export default App;

Run your application

Start your development server and view your form:

npm start

You should see a form with all the fields defined in your schema, styled with Material-UI components.

Understanding the code

The JsonForms component requires:

schema - Defines the data structure and validation
uischema - (Optional) Customizes the form layout
data - Current form data
renderers - Set of UI components to render controls
cells - Table cell renderers for array layouts
onChange - Callback when data changes

View complete working example

import React, { useState } from 'react';
import {
  materialRenderers,
  materialCells,
} from '@jsonforms/material-renderers';
import { JsonForms } from '@jsonforms/react';

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      minLength: 1,
    },
    done: {
      type: 'boolean',
    },
    due_date: {
      type: 'string',
      format: 'date',
    },
    recurrence: {
      type: 'string',
      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
    },
  },
  required: ['name', 'due_date'],
};

const uischema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      label: false,
      scope: '#/properties/done',
    },
    {
      type: 'Control',
      scope: '#/properties/name',
    },
    {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/due_date',
        },
        {
          type: 'Control',
          scope: '#/properties/recurrence',
        },
      ],
    },
  ],
};

const initialData = {};

function App() {
  const [data, setData] = useState(initialData);
  
  return (
    <div style={{ padding: '2rem' }}>
      <h1>Task Manager</h1>
      <JsonForms
        schema={schema}
        uischema={uischema}
        data={data}
        renderers={materialRenderers}
        cells={materialCells}
        onChange={({ data, _errors }) => setData(data)}
      />
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

Angular Setup

Install dependencies

Install JSON Forms packages:

npm install @jsonforms/core @jsonforms/angular @jsonforms/angular-material

Install Angular Material peer dependencies:

npm install @angular/material @angular/cdk @angular/animations dayjs

Import JSON Forms 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';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    JsonFormsModule,
    JsonFormsAngularMaterialModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Define your schemas

Create the JSON Schema and UI Schema in your component:

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <jsonforms
      [data]="data"
      [schema]="schema"
      [uischema]="uischema"
      (dataChange)="onDataChange($event)"
    ></jsonforms>
  `,
})
export class AppComponent {
  data = {};
  
  schema = {
    type: 'object',
    properties: {
      name: {
        type: 'string',
        minLength: 1,
      },
      done: {
        type: 'boolean',
      },
      due_date: {
        type: 'string',
        format: 'date',
      },
      recurrence: {
        type: 'string',
        enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
      },
    },
    required: ['name', 'due_date'],
  };

  uischema = {
    type: 'VerticalLayout',
    elements: [
      {
        type: 'Control',
        label: false,
        scope: '#/properties/done',
      },
      {
        type: 'Control',
        scope: '#/properties/name',
      },
      {
        type: 'HorizontalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/due_date',
          },
          {
            type: 'Control',
            scope: '#/properties/recurrence',
          },
        ],
      },
    ],
  };

  onDataChange(data: any) {
    this.data = data;
    console.log('Form data:', data);
  }
}

Run your application

Start your development server:

ng serve

Navigate to http://localhost:4200 to see your form.

For standalone components in Angular 14+, you can import JSON Forms modules directly in your component instead of using NgModule.

Vue Setup

Install dependencies

Install JSON Forms packages:

npm install @jsonforms/core @jsonforms/vue @jsonforms/vue-vuetify

Install Vuetify peer dependencies:

npm install vuetify vue ajv dayjs maska lodash

Set up Vuetify

Configure Vuetify in your main application file:

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');

Create your component

Build your form component with JSON Forms:

App.vue

<template>
  <v-app>
    <v-container>
      <h1>Task Manager</h1>
      <json-forms
        :data="data"
        :schema="schema"
        :uischema="uischema"
        :renderers="renderers"
        @change="onChange"
      />
      <pre>{{ JSON.stringify(data, null, 2) }}</pre>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { JsonForms } from '@jsonforms/vue';
import { vuetifyRenderers } from '@jsonforms/vue-vuetify';

const data = ref({});
const renderers = vuetifyRenderers;

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      minLength: 1,
    },
    done: {
      type: 'boolean',
    },
    due_date: {
      type: 'string',
      format: 'date',
    },
    recurrence: {
      type: 'string',
      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
    },
  },
  required: ['name', 'due_date'],
};

const uischema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      label: false,
      scope: '#/properties/done',
    },
    {
      type: 'Control',
      scope: '#/properties/name',
    },
    {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/due_date',
        },
        {
          type: 'Control',
          scope: '#/properties/recurrence',
        },
      ],
    },
  ],
};

const onChange = (event: any) => {
  data.value = event.data;
};
</script>

Run your application

Start your development server:

npm run dev

Your form should now be running with Vuetify styling.

Vue 3.5.0+ is required. For Vue 2 support, please use JSON Forms version 2.x.

Understanding the schemas

JSON Schema

The JSON Schema defines your data model:

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",        // Field type
      "minLength": 1           // Validation rule
    },
    "done": {
      "type": "boolean"
    },
    "due_date": {
      "type": "string",
      "format": "date"         // Special format
    },
    "recurrence": {
      "type": "string",
      "enum": ["Never", "Daily", "Weekly", "Monthly"]  // Dropdown options
    }
  },
  "required": ["name", "due_date"]  // Required fields
}

Common field types:

string - Text input
number / integer - Numeric input
boolean - Checkbox
array - List of items
object - Nested object

Common formats:

date - Date picker
time - Time picker
date-time - Date and time picker
email - Email input with validation
uri - URL input

UI Schema

The UI Schema controls layout and appearance:

{
  "type": "VerticalLayout",      // Stack elements vertically
  "elements": [
    {
      "type": "Control",         // Single form control
      "scope": "#/properties/name",  // References JSON Schema property
      "label": "Task Name"       // Optional custom label
    },
    {
      "type": "HorizontalLayout",  // Stack elements horizontally
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/due_date"
        },
        {
          "type": "Control",
          "scope": "#/properties/recurrence"
        }
      ]
    }
  ]
}

Available layout types:

VerticalLayout - Stack elements vertically
HorizontalLayout - Stack elements horizontally
Group - Grouped section with optional label
Categorization - Tabbed interface

Next steps

Congratulations! You’ve created your first JSON Form. Here’s what to explore next:

Core Concepts

Learn about JSON Schema, UI Schema, and renderers

Custom Renderers

Create custom form controls for specific needs

Validation

Add custom validation rules and error messages

Examples

Explore more complex form examples

Common patterns

Handling form submission

function App() {
  const [data, setData] = useState({});
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Form data:', data);
    // Send to API, validate, etc.
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <JsonForms
        schema={schema}
        uischema={uischema}
        data={data}
        renderers={materialRenderers}
        cells={materialCells}
        onChange={({ data }) => setData(data)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Accessing validation errors

function App() {
  const [data, setData] = useState({});
  const [errors, setErrors] = useState([]);
  
  return (
    <JsonForms
      schema={schema}
      uischema={uischema}
      data={data}
      renderers={materialRenderers}
      cells={materialCells}
      onChange={({ data, errors }) => {
        setData(data);
        setErrors(errors || []);
      }}
    />
  );
}

Pre-filling form data

const initialData = {
  name: 'My Task',
  done: false,
  due_date: '2024-12-31',
  recurrence: 'Daily'
};

function App() {
  const [data, setData] = useState(initialData);
  // ... rest of component
}

Troubleshooting

Form fields not rendering

Make sure you’ve installed all peer dependencies for your chosen renderer set. Check the installation guide for the complete list.

Validation not working

JSON Forms uses AJV for validation. Ensure your JSON Schema is valid and uses standard JSON Schema keywords. Custom formats may require additional AJV configuration.

TypeScript errors with renderers

Ensure all JSON Forms packages are using the same version. Mismatched versions can cause type conflicts.

Styling issues with Material renderers

Make sure you’ve imported the required styles and configured the theme provider for your UI library (Material-UI, Vuetify, etc.).

Get help

If you encounter issues or have questions:

Check the GitHub Issues for known problems
Ask on the JSON Forms Discourse
Review the API documentation
Explore the example repository

Get Started

Core Concepts

Framework Integration

Renderer Sets

Advanced Topics

Examples

Migration

Quickstart

Quickstart

What you’ll build

Prerequisites

React Setup

Understanding the code

Angular Setup

Vue Setup

Understanding the schemas

JSON Schema

UI Schema

Next steps

Core Concepts

Custom Renderers

Validation

Examples

Common patterns

Handling form submission

Accessing validation errors

Pre-filling form data

Troubleshooting

Get help

Build docs developers (and LLMs) love

Get Started

Core Concepts

Framework Integration

Renderer Sets

Advanced Topics

Examples

Migration

​Quickstart

​What you’ll build

​Prerequisites

​React Setup

​Understanding the code

​Angular Setup

​Vue Setup

​Understanding the schemas

​JSON Schema

​UI Schema

​Next steps

Core Concepts

Custom Renderers

Validation

Examples

​Common patterns

​Handling form submission

​Accessing validation errors

​Pre-filling form data

​Troubleshooting

​Get help

Build docs developers (and LLMs) love

Quickstart

What you’ll build

Prerequisites

React Setup

Understanding the code

Angular Setup

Vue Setup

Understanding the schemas

JSON Schema

UI Schema

Next steps

Common patterns

Handling form submission

Accessing validation errors

Pre-filling form data

Troubleshooting

Get help