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