/schema-based-json-editor

A reactjs, angular and vuejs component of schema based json editor.

Primary LanguageTypeScriptMIT LicenseMIT

schema-based-json-editor

Dependency Status devDependency Status Build Status: Linux Build Status: Windows npm version Downloads type-coverage

features

  • reactjs component
  • angular component
  • vuejs component
  • common schema fields: title, description, default, readonly, propertyOrder, requiredWhen, optionalWhen, className
  • object schema fields: properties, required, maxProperties, minProperties, collapsed
  • array schema fields: items, minItems, uniqueItems, enum, enumTitles, format('select2')
  • number and integer schema fields: minimum, exclusiveMinimum, maximum, exclusiveMaximum, enum, multipleOf, enumTitles, format('select' | 'radiobox')
  • string schema fields: format('textarea' | 'color' | 'date' | 'datetime' | 'datetime-local' | 'time' | 'month' | 'email' | 'uri' | 'url' | 'week' | 'hostname' | 'ipv4' | 'ipv6' | 'code' | 'markdown' | 'base64' | 'select' | 'radiobox' | 'json'), enum, minLength, maxLength, pattern, enumTitles
  • boolean schema fields: format('checkbox' | 'select' | 'select2')
  • image preview, code highlight, markdown preview
  • multi-language

reactjs component

gzip size

npm i react-schema-based-json-editor

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

or

<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/react-schema-based-json-editor/dist/react-schema-based-json-editor.min.js"></script>
<JSONEditor schema={schema}
    initialValue={initialValue}
    updateValue={this.updateValue}
    theme="bootstrap3"
    icon="fontawesome4">
</JSONEditor>

the online demo: https://plantain-00.github.io/schema-based-json-editor/packages/react/demo

angular component

npm i angular-schema-based-json-editor

import { JSONEditorModule } from "angular-schema-based-json-editor";

@NgModule({
    imports: [BrowserModule, FormsModule, JSONEditorModule],
    declarations: [MainComponent],
    bootstrap: [MainComponent],
})
class MainModule { }
<json-editor [schema]="schema"
    [initialValue]="value"
    (updateValue)="updateValue($event)"
    theme="bootstrap3"
    icon="fontawesome4">
</json-editor>

the online demo: https://plantain-00.github.io/schema-based-json-editor/packages/angular/demo/jit

the AOT online demo: https://plantain-00.github.io/schema-based-json-editor/packages/angular/demo/aot

vuejs component

gzip size

npm i vue-schema-based-json-editor

import "vue-schema-based-json-editor";

or

<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/vue-schema-based-json-editor/dist/vue-schema-based-json-editor.min.js"></script>
<json-editor :schema="schema"
    :initial-value="value"
    @update-value="updateValue($event)"
    theme="bootstrap3"
    icon="fontawesome4">
</json-editor>

the online demo: https://plantain-00.github.io/schema-based-json-editor/packages/vue/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" "bootstrap4" "antd3" "element-ui2" "iview2" "iview3" "blueprint1" "blueprint2" "blueprint3" for now
icon string? support "bootstrap3" "fontawesome4" "fontawesome5" "antd3" "element-ui2" "iview2" "iview3" 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://
disableCollapse boolean? if true, the collapse button will be hidden
noSelect2 boolean? if true, use select rather than select2-component
minItemCountIfNeedFilter number? default 6(if item count > 6, filter is visible, otherwise hidden), so if 0, filter always visible, if Infinity, filter always hidden
monacoEditor object? the monacoEditor library object if you want to edit code with it

improve current theme

You can find css classes like schema-based-json-editor--*, you can set their styles to improve UI

The full list of the classes are in:

export const defaultTheme = {
  card: 'schema-based-json-editor--card',
  row: 'schema-based-json-editor--row',
  errorRow: 'schema-based-json-editor--error-row',
  input: 'schema-based-json-editor--input',
  errorInput: 'schema-based-json-editor--error-input',
  textarea: 'schema-based-json-editor--textarea',
  errorTextarea: 'schema-based-json-editor--error-textarea',
  checkbox: 'schema-based-json-editor--checkbox',
  radiobox: 'schema-based-json-editor--radiobox',
  button: 'schema-based-json-editor--button',
  buttonGroup: 'schema-based-json-editor--button-group',
  title: 'schema-based-json-editor--title',
  description: 'schema-based-json-editor--description',
  select: 'schema-based-json-editor--select'
}

You can also set className in schema to get fine grained style control

support other themes / icons / locales

import { themes, icons, locales } from 'schema-based-json-editor'

themes['new-theme-name'] = { ... }
icons['new-icon-name'] = { ... }
locales['new-locale-name'] = { ... }

the data structure of new themes / icons / locales are just like default ones:

export const bootstrap3Icon = {
  isText: false,
  collapse: 'glyphicon glyphicon-chevron-down',
  expand: 'glyphicon glyphicon-chevron-right',
  add: 'glyphicon glyphicon-plus',
  delete: 'glyphicon glyphicon-remove'
}

export const defaultLocale = {
  button: {
    collapse: 'Collapse',
    expand: 'Expand',
    add: 'Add',
    delete: 'Delete'
  },
  error: {
    minLength: 'Value must be at least {0} characters long.',
    maxLength: 'Value must be at most {0} characters long.',
    pattern: "Value doesn't match the pattern {0}.",
    minimum: 'Value must be >= {0}.',
    maximum: 'Value must be <= {0}.',
    largerThan: 'Value must be > {0}.',
    smallerThan: 'Value must be < {0}.',
    minItems: 'The length of the array must be >= {0}.',
    uniqueItems: 'The item in {0} and {1} must not be same.',
    multipleOf: 'Value must be multiple value of {0}.',
    minProperties: 'Properties count must be >= {0}.',
    maxProperties: 'Properties count must be <= {0}.'
  },
  info: {
    notExists: 'not exists',
    true: 'true',
    false: 'false',
    search: 'search'
  },
  markdownTipLocale: defaultMarkDownTipLocale,
  fileUploaderLocale: defaultFileUploaderLocale
}

non-standard fields

field type description
propertyOrder number? in a object, the property with smaller propertyOrder will be closer to the top
requiredWhen [string, '===' or 'in' or 'isUndefined', any]? in a object, the property is required when the condition is true, eg, ['name', '===', 'foo'] or ['name', 'in', ['foo', 'bar']] or ['name', 'isUndefined'], otherwise the property is hidden
optionalWhen [string, '===' or 'in' or 'isUndefined', any]? in a object, the property is optional when the condition is true, eg, ['name', '===', 'foo'] or ['name', 'in', ['foo', 'bar']] or ['name', 'isUndefined'], otherwise the property is hidden
collapsed boolean? if true, the object or array is collapsed by default
enumTitles string[]? works with enum field, are the titles of the enum
className string? custom class name
step number? in a string, works with format time

change logs

https://github.com/plantain-00/schema-based-json-editor/tree/master/change_logs.md