schema-based-json-editor

features

• reactjs component
• vuejs component
• common schema fields: title, description, default, readonly, $ref, propertyOrder, requiredWhen, optionalWhen, className, propertyName
• 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
• react-composable-json-editor

reactjs component

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

vuejs component

npm i vue-schema-based-json-editor

import { ArrayEditor, ObjectEditor, JSONEditor } from "vue-schema-based-json-editor";
app.component('array-editor', ArrayEditor)
app.component('object-editor', ObjectEditor)
app.component('json-editor', JSONEditor)

or

<script src="./node_modules/vue/dist/vue.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

react-composable-json-editor

npm i react-composable-json-editor

import { useJsonEditorData, ObjectEditor, StringEditor, NumberEditor } from "react-composable-json-editor";

const { value, update, getArrayProps } = useJsonEditorData({
  stringExample: 'a string example',
  objectExample: {
    propertyExample1: '',
    propertyExample2: 0,
  },
})

<ObjectEditor
  properties={{
    'A string example': <StringEditor value={value.stringExample} setValue={update((draft, v) => draft.stringExample = v)} />,
    'A object example': <ObjectEditor
      properties={{
        'Property example 1': <StringEditor value={value.objectExample.propertyExample1} setValue={update((draft, v) => draft.objectExample.propertyExample1 = v)} />,
        'Property example 2': <NumberEditor value={value.objectExample.propertyExample2} setValue={update((draft, v) => draft.objectExample.propertyExample2 = v)} />,
      }}
    />,
  }}
/>

the online demo: https://plantain-00.github.io/schema-based-json-editor/packages/react-composable-json-editor/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" "bootstrap5" "antd3" "element-ui2" "iview2" "iview3" "blueprint1" "blueprint2" "blueprint3" for now
icon	string?	support "bootstrap3" "fontawesome4" "fontawesome5" "antd3" "element-ui2" "iview2" "iview3" "bootstrap-icons" 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? or 'any'	in a string, works with format time, or in a number
propertyName	string?	in a object, used as property name

change logs

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