React JSON Schema Form Editor

This repository contains code for a React JS Component called the FormBuilder that allows a user to visually drag, drop, and edit card elements corresponding to a JSON schema encoded form. This component is wrapped around a demo app that demonstrates how the tool can be used in conjunction with a code editor and Mozilla's React JSON schema form viewer to build a form and maintain a live, code representation of it in real time.

The Form Builder is available as an NPM package here.

View the Form Builder in action here

More extensive documentation is available here

Quickstart

npm i --save @ginkgo-bioworks/react-json-schema-form-builder

Import the tool as a react component in your Node project:

Usage

import React, { Component } from 'react';
 
import {FormBuilder} from '@ginkgo-bioworks/react-json-schema-form-builder';
 
class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      schema: '',
      uischema: ''
    };
  }
  render() {
    return (
      <FormBuilder
        schema={this.state.schema}
        uischema={this.state.uischema}
        onChange={(newSchema: string, newUiSchema: string) => {
          this.setState({
            schema: newSchema,
            uischema: newUiSchema
          })
        }}
      />
    );
  }
}

For more usage examples, see the Usage documentation page

Contributing

See the Contributing page for information about improving the Form Builder.

License

Copyright 2020 Ginkgo Bioworks, Inc. Licensed Apache 2.0.