object-editor-react

object-editor-react is a visual editor for structured JSON data, available as a simple drop-in React component.

• 🔌 Drop-in, structured editing of deeply nested JSON objects
• ⚛️ Schema aware: create nested objects and array elements in real time
• 🏗 Bulk operations for working with larger objects

Demo/example ^(source)

Preview

How it works:

1. Create a Schema -- it can be as deeply nested as you need.

import { SchemaTypes } from 'object-editor-react';

const schema = {
    foo: SchemaTypes.string({ required: true }),
    
    bar: {
        baz: SchemaTypes.arrayOf({
            nested: SchemaTypes.string(),
        }),
    },
}

2. Drop in an ObjectEditor or ArrayEditor and provide modification handlers.

import { ArrayEditor, ObjectEditor } from 'object-editor-react';

const YourComponent = props => {
    return (
        <ArrayEditor
            type={schema}
            object={[{ foo: 'bar' }, { foo: 'baz' }]}
            onUpdateElement={(el, index) => ...}
            onAddElement={(newElement) => ...}
            onAddElement={(removedElement, index) => ...}
            />
    );
}

A table-based editor is generated based on the Schema. For properties with types like string and number, you can just edit the values directly using an <input /> element.

For more complex properties (object, array, or other complex types), an "Edit" button in the cell creates a nested Editor (type chosen automatically) for editing the nested object.

Installation

npm i object-editor-react

Usage

To use object-editor-react, just create a schema and provide object modification handlers. It's similar to using a controlled <input /> element.

Schemas

There are many different SchemaTypes that can be combined and nested however you need. They are similar to React PropTypes.

A valid schema is either:

• An object whose leaves are SchemaTypes
• A SchemaType

Examples:

import { SchemaTypes } from 'object-editor-react';

const schema = {
    foo: SchemaTypes.string({ required: true }),
    bar: {
        baz: SchemaTypes.any(),
    }
};
// Some valid instances:
// { foo: 'bar' }
// { foo: 'bar', bar: { baz: [] } }

const schema = SchemaTypes.arrayOf(SchemaTypes.string())();
// Some valid instances:
// [ 'one', 'two', 'three' ],
// [ ]

const schema = {
    foo: SchemaTypes.arrayOf({
        bar: SchemaTypes.array()
    })({ required: true }),
};
// Some valid instances:
// { foo: [ { bar: [] } ] }
// { foo: [] }

SchemaTypes

any

The value can be any non-undefined value. The value must have a type other than undefined.

string

The value must have type string.

boolean

The value must have type boolean.

function

The value must have type function.

number

The value must have type number.

date

The value must be a Date instance with a non-NaN time. Specifically, Object.toString() must return "[object Date]", and date.getTime() must be non-NaN.

array

The value must be an Array instance. Specifically, Array.isArray() must return true.

object

The value must have type object.

arrayOf

The value must be an array whose elements all conform to a specific SchemaType.

Specifically, the value must pass the SchemaTypes.array validation test, and each element of the array must pass the validation test of the SchemaType passed as the argument to arrayOf.

SchemaType options

Each SchemaType is a function. Every SchemaType except for arrayOf takes a single, optional configuration object as its parameter.

These are the possible configuration options.

In the case of arrayOf, the arrayOf function takes a schema as its only parameters and returns a function that accepts a configuration object.

Example:

const schema = SchemaTypes.arrayOf({
    foo: SchemaTypes.string()
})({ required: false });

Editors

There are two top-level Editor components: ObjectEditor and ArrayEditor.

Both Editor types are "controlled" components: any changes to the objects are passed to a change handler, but the Editors themselves don't have internal state to track changes.

ObjectEditor

An Editor for editing a single JSON object.

import { ObjectEditor } from 'object-editor-react';

props

ArrayEditor

An Editor for editing an array of objects, where each element in the array conforms to a Schema.

import { ArrayEditor } from 'object-editor-react';

props

Examples

See examples/example.js for a stateful implementation with a deeply nested Schema.

Contributing

1 Obtain the source and install dependencies

$ git clone https://github.com/b-gran/object-editor-react.git
$ cd object-editor-react
$ npm install

2 Starting the development server

$ npm start
✔ Development server running on: http://localhost:5000
✔ Build completed

There are two development examples hosted on the dev server:

1. http://localhost:5000/mainExample.html contains schemas with all root value types
2. http://localhost:5000/githubExample.html is the example hosted on GitHub

3 Running the tests

$ npm run test