jsonforms

Customizable JSON Schema-based forms with React, Angular and Vue support out of the box.

2,117

359

2,117

120

View on GitHub View on NPM

Top Related Projects

react-jsonschema-form

14,094

A React component for building Web forms from JSON Schema.

jsonform

2,754

Build forms from JSON Schema. Easily template-able. Compatible with Bootstrap 3 out of the box.

uniforms

1,938

A React library for building forms from any schema.

Quick Overview

JSONForms is a declarative framework for efficiently building and customizing forms in web applications. It allows developers to create dynamic forms based on JSON Schema, with the ability to render them using various UI frameworks like React, Angular, or Vue.js. JSONForms aims to simplify form creation and validation while providing flexibility and extensibility.

Pros

Declarative approach using JSON Schema for form definition
Support for multiple UI frameworks (React, Angular, Vue.js)
Highly customizable and extensible
Automatic form validation based on JSON Schema

Cons

Learning curve for complex form scenarios
Limited built-in UI components compared to some other form libraries
Documentation could be more comprehensive for advanced use cases
Performance may degrade with very large and complex forms

Code Examples

Basic form creation with React:

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

const schema = {
  type: 'object',
  properties: {
    name: { type: 'string' },
    age: { type: 'integer' }
  }
};

const uischema = {
  type: 'VerticalLayout',
  elements: [
    { type: 'Control', scope: '#/properties/name' },
    { type: 'Control', scope: '#/properties/age' }
  ]
};

const MyForm = () => (
  <JsonForms
    schema={schema}
    uischema={uischema}
    renderers={materialRenderers}
    cells={materialCells}
  />
);

Custom renderer for a specific field:

import { withJsonFormsControlProps } from '@jsonforms/react';

const CustomInput = ({ data, handleChange, path }) => (
  <input
    type="text"
    value={data}
    onChange={event => handleChange(path, event.target.value)}
  />
);

const customRenderers = [
  {
    tester: ({ schema }) => schema.type === 'string',
    renderer: withJsonFormsControlProps(CustomInput)
  }
];

Form with conditional visibility:

const schema = {
  type: 'object',
  properties: {
    showExtra: { type: 'boolean' },
    extraField: { type: 'string' }
  }
};

const uischema = {
  type: 'VerticalLayout',
  elements: [
    { type: 'Control', scope: '#/properties/showExtra' },
    {
      type: 'Control',
      scope: '#/properties/extraField',
      rule: {
        effect: 'SHOW',
        condition: {
          scope: '#/properties/showExtra',
          schema: { const: true }
        }
      }
    }
  ]
};

Getting Started

Install JSONForms and required dependencies:

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

Create a basic form in your React component:

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

const schema = { /* Your JSON Schema */ };
const uischema = { /* Your UI Schema */ };

const MyForm = () => (
  <JsonForms
    schema={schema}
    uischema={uischema}
    renderers={materialRenderers}
    cells={materialCells}
    onChange={({ errors, data }) => console.log(data, errors)}
  />
);

export default MyForm;

Competitor Comparisons

react-jsonschema-form

14,094

A React component for building Web forms from JSON Schema.

Pros of react-jsonschema-form

More extensive documentation and examples
Larger community and ecosystem of extensions
Better support for custom widgets and fields

Cons of react-jsonschema-form

Steeper learning curve for complex forms
Less flexibility in UI customization
Heavier bundle size

Code Comparison

react-jsonschema-form:

import Form from "@rjsf/core";

const schema = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number" }
  }
};

<Form schema={schema} />

JSONForms:

import { JsonForms } from '@jsonforms/react';

const schema = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "integer" }
  }
};

<JsonForms
  schema={schema}
  uischema={uischema}
  data={data}
  renderers={renderers}
/>

Both libraries aim to generate forms from JSON Schema, but they differ in their approach and feature set. react-jsonschema-form offers a more straightforward implementation for simple forms, while JSONForms provides greater control over the rendering process and UI customization. The choice between the two depends on the specific requirements of your project and the level of customization needed.

jsonform

2,754

Build forms from JSON Schema. Easily template-able. Compatible with Bootstrap 3 out of the box.

Pros of jsonform

Simpler and more lightweight, with fewer dependencies
Easier to get started for basic form generation
Supports a wider range of older browsers

Cons of jsonform

Less actively maintained, with fewer recent updates
Limited customization options compared to JSONForms
Lacks advanced features like rule-based visibility and complex layouts

Code Comparison

JSONForms:

const schema = {
  type: "object",
  properties: {
    name: { type: "string" },
    age: { type: "number" }
  }
};

const uischema = {
  type: "VerticalLayout",
  elements: [
    { type: "Control", scope: "#/properties/name" },
    { type: "Control", scope: "#/properties/age" }
  ]
};

jsonform:

var form = {
  schema: {
    name: { type: "string" },
    age: { type: "number" }
  },
  form: [
    "name",
    "age"
  ]
};

Both libraries use JSON Schema for defining form structure, but JSONForms offers more granular control over layout and UI elements through its uischema. jsonform has a simpler approach, directly mapping schema properties to form fields. JSONForms provides more flexibility for complex forms, while jsonform is more straightforward for basic use cases.

uniforms

1,938

A React library for building forms from any schema.

Pros of uniforms

More flexible and customizable, allowing for easier integration with various UI frameworks
Simpler API and more intuitive usage for basic form generation
Better support for complex nested schemas and arrays

Cons of uniforms

Less comprehensive documentation compared to JSONForms
Smaller community and ecosystem, potentially leading to fewer resources and third-party extensions
May require more manual configuration for advanced use cases

Code Comparison

uniforms:

const schema = {
  title: 'String',
  age: 'Number'
};

const MyForm = () => (
  <AutoForm schema={schema} onSubmit={console.log}>
    <AutoField name="title" />
    <AutoField name="age" />
    <SubmitField />
  </AutoForm>
);

JSONForms:

const schema = {
  type: 'object',
  properties: {
    title: { type: 'string' },
    age: { type: 'number' }
  }
};

const MyForm = () => (
  <JsonForms
    schema={schema}
    uischema={uischema}
    data={data}
    renderers={renderers}
    cells={cells}
    onChange={({ data, errors }) => console.log('Form data', data, 'Errors', errors)}
  />
);

Both libraries offer form generation based on JSON schemas, but uniforms provides a more concise API for basic use cases, while JSONForms offers more fine-grained control over rendering and validation.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

JSON Forms - More Forms. Less Code

Complex forms in the blink of an eye

Documentation

Please see the official JSON Forms website, jsonforms.io, for documentation, examples and API references.

Getting started

Clone the seed app with git clone https://github.com/eclipsesource/jsonforms-react-seed.git
Install dependencies with npm ci
Run the app with npm run start

For more info about the seed app, please see the corresponding README file of the seed repo. For a more detailed tutorial about the usage of JSON Forms, please see this tutorial.

Feedback, Help and Support

If you encounter any problems feel free to open an issue on the repo. For questions and discussions please use the JSON Forms board. You can also reach us via email. In addition, EclipseSource also offers professional support for JSON Forms.

Migration

See our migration guide when updating JSON Forms.

Roadmap & Milestones

The project roadmap can be found in ROADMAP.md.

Issues are sorted in one the following milestones that indicate when their implementation is planned. Independently of the assigned milestone, contributions are always accepted and appreciated.

A milestone for the next minor version. Issues planned to be implemented for the next release.
A milestone for the next major version. Issues planned to be implemented for the next major release.
A .x milestone. Issues which are concrete candidates for one of the next versions.
next: Issues which we would like to tackle soonish in one of the upcoming versions. However, they are not yet planned for a specific version.
Backlog: Issues which are interesting in some form but we don't plan to do ourselves in the foreseeable future. Still these might become part of JSON Forms via a community contribution or by prioritization of a paying customer.

Developers Documentation

First time setup

Install node.js (only Node v18.19+ < 19 is currently supported)
Install pnpm: https://pnpm.io/installation (use pnpm 8.6.2+)
Clone this repository
Install dependencies: pnpm i --frozen-lockfile

VS Code dev container

As an alternative to the first time setup, you can use the provided VS Code dev container configured in devcontainer.json.

Execute command: Remote Containers: Reopen in container
Wait until the container is built and loaded
First time setup and an initial build of all packages has been executed in the container

Note: If you have installed dependencies before opening the remote container, its initialization might fail. In this case, you can try to clean the repository with git clean -dfx. Beware that this removes all untracked files!

Build & Testing

Build (all packages): pnpm run build
Test (all packages): pnpm run test
Clean (delete dist folder of all packages): pnpm run clean
Run React Vanilla examples: cd packages/vanilla-renderers && pnpm run dev
Run React Material examples: cd packages/material-renderers && pnpm run dev
Run Angular Material examples: cd packages/angular-material && pnpm run dev
Run Vue Vanilla dev setup: cd packages/vue-vanilla && pnpm run serve
Run Vue Vuetify dev setup: cd packages/vue-vuetify && pnpm run dev

Dependency & Release management

For more info about how we handle dependencies and releases in the JSON Forms project, please see our Developer Documentation wiki page.

Continuous Integration

The JSON Forms project is built and tested via Github actions on Linux, Mac and Windows. Coverage is documented by Coveralls.

Current status:

Contributions

We welcome community participation! Whether you're reporting bugs, proposing features, participating in discussions, or making direct contributions, your involvement is highly valued. See here for the contribution guidelines.

License

The JSON Forms project is licensed under the MIT License. See the LICENSE file for more information.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of react-jsonschema-form

Cons of react-jsonschema-form

Code Comparison

Pros of jsonform

Cons of jsonform

Code Comparison

Pros of uniforms

Cons of uniforms

Code Comparison

Convert designs to code with AI

README

JSON Forms - More Forms. Less Code

Documentation

Getting started

Feedback, Help and Support

Migration

Roadmap & Milestones

Developers Documentation

First time setup

VS Code dev container

Build & Testing

Dependency & Release management

Continuous Integration

Contributions

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days