JSON Editor

This project is a work-in-progress. All APIs are subject to change. This editor expects to be run in a browser environment, but you can use headless DOM implementations like JSDOM. See the create_editor test in the Github repo for an example of that. There's also a browser example using the index.html file which imports the dev_test.js JS file that is used for dev-testing in the browser.

The changelog can be found here.

Install

npm i json-html-editor
pnpm add json-html-editor

Usage

import { createEditor } from 'json-html-editor';
// OR
const { createEditor } = require('json-html-editor');

const testData = {
  name: 'bob',
  age: 42,
  isCool: true,
  address: {
    number: 211,
    street: 'hamburger ln',
    state: 'TX',
  },
  children: [
    {
      name: 'john',
      age: 17,
    },
    {
      name: 'juniper',
      age: 12,
    },
  ],
  blank: null,
};

const rootNode = createEditor(testData);
document.body.appendChild(rootNode);

This creates container elements with inputs that have the proper types according to what the schema generator was able to infer.

Currently there aren't ways to hook into the edit process yet. This would look like options for things like: onFieldChanged, onFieldAdded, onItemAdded, etc.