node package manager


Dependency Status devDependency Status Build Status: Linux Build Status: Windows npm version Downloads



  • reactjs component
  • angular component
  • vuejs component
  • common schema fields: title, description, default, readonly, propertyOrder
  • object schema fields: properties, required, maxProperties, minProperties, collapsed
  • array schema fields: items, minItems, uniqueItems
  • number and integer shema fields: minimum, exclusiveMinimum, maximum, exclusiveMaximum, enum, multipleOf, collapsed
  • string schema fields: format, enum, minLength, maxLength, pattern
  • image preview, code highlight, markdown preview
  • multi-language


npm i schema-based-json-editor

reactjs component demo

import { JSONEditor } from "schema-based-json-editor/react";
<JSONEditor schema={schema}

the online demo:

angular component demo

import { JSONEditorModule } from "schema-based-json-editor/angular";
// for angular AOT:
// import { JSONEditorModule } from "schema-based-json-editor/aot/angular";
    imports: [BrowserModule, FormsModule, JSONEditorModule],
    declarations: [MainComponent],
    bootstrap: [MainComponent],
class MainModule { }
<json-editor [schema]="schema"

the online demo:

the AOT online demo:

vuejs component demo

npm i vue vue-class-component

import "schema-based-json-editor/vue";
<json-editor :schema="schema"

the online demo:

properties and events of the component

name type description
schema Schema the json schema object
initialValue ValueType the initial json
updateValue (value: ValueType or undefined, isValid: boolean) => void the function that is invoked when the json is edited in the editor
theme string? support "bootstrap3" for now
icon string? support "bootstrap3" and "fontawesome4" for now
locale Locale? locale object
readonly boolean? readonly
dragula object? the dragula library object if you want to reorder array by drag and drop
markdownit object? the markdown-it library object if you want to preview markdown
hljs object? the highlight.js library object if you want to highlight code
forceHttps boolean? if true, the preview url of images will be https:// rather than http://

change logs