vue-json-ui-editor

To use the editor, import JsonEditor and provide a schema and a v-model for two-way data binding. You can use a template ref to access the editor's methods for validation and resetting.

<template>
  <json-editor ref="jsonEditorRef" :schema="schema" v-model="model">
    <el-button type="primary" @click="submit">Submit</el-button>
    <el-button @click="reset">Reset</el-button>
  </json-editor>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import JsonEditor from 'vue-json-ui-editor';

const schema = {
  type: 'object',
  title: 'vue-json-editor demo',
  properties: {
    name: { type: 'string' },
    email: { type: 'string' },
  },
};

const model = ref({ name: 'Yourtion' });
const jsonEditorRef = ref<InstanceType<typeof JsonEditor>>();

function submit() {
  // jsonEditorRef.value?.form() returns the underlying element-plus form instance
  jsonEditorRef.value?.form().validate((valid: boolean) => {
    if (!valid) {
      jsonEditorRef.value?.setErrorMessage('Please fill out the required fields');
    }
  });
}

function reset() {
  jsonEditorRef.value?.reset();
}
</script>

By default, json-editor renders with native HTML elements. To use a UI library like element-plus, use the static JsonEditor.setComponent API to register components for specific field types (e.g., text, select, form, label, error).

option can be a plain object or a factory callback ({ vm, field, item }) => propsObject.

Important for element-plus: Since el-form-item reads labels from the label prop rather than the default slot, the label registration callback must return label: field.label and prop: field.name.

JsonEditor.setComponent('text', 'el-input');
JsonEditor.setComponent('form', 'el-form', ({ vm }) => ({ model: vm.model, rules: {} }));
JsonEditor.setComponent('error', 'el-alert', ({ vm }) => ({ type: 'error', title: vm.error }));

// Special handling for element-plus labels
JsonEditor.setComponent('label', 'el-form-item', ({ field }) => ({ 
  label: field.label, 
  prop: field.name 
}));

The logic for object-array add/remove operations is available as a standalone, framework-agnostic module. This is useful for unit testing or custom implementations.

Use createArrayRenderer by providing ArrayRendererDeps (which includes model, onChange, and component resolution helpers).

import { createArrayRenderer, type ArrayRendererDeps } from 'vue-json-ui-editor';

const renderer = createArrayRenderer({
  model, 
  onChange, 
  getComp, 
  resolveComp, 
  elementOptions, 
  wrapChild, 
  renderInput,
} satisfies ArrayRendererDeps);

renderer.render(field, fieldName);   // → returns vnode[] for the whole array (header + rows)
renderer.addRow(fieldName);
renderer.removeRow(fieldName, index);

import { createArrayRenderer, type ArrayRendererDeps } from 'vue-json-ui-editor';

const renderer = createArrayRenderer({
  model, onChange, getComp, resolveComp, elementOptions, wrapChild, renderInput,
} satisfies ArrayRendererDeps);
renderer.render(field, fieldName);   // → vnode[] for the whole array (header + rows)
renderer.addRow(fieldName);
renderer.removeRow(fieldName, index);

The createArrayRenderer factory function allows you to create a standalone module for rendering array fields (specifically object arrays with items: {type: 'object', properties: ...}). This is useful for decoupling array rendering logic from the main component lifecycle and enabling independent testing or reuse.

To use it, you must provide a deps object containing the necessary component-side dependencies (model, change handlers, component resolvers, etc.). Because the renderer and the main input rendering logic (renderInput) are mutually recursive, you typically pass a mutable dependency object where renderInput is filled in after the initial renderer creation.

// 1. Define the dependencies with a placeholder for renderInput
const deps: ArrayRendererDeps = {
  model: myModel,
  onChange: () => { /* notify changes */ },
  getComp: (key) => myComponentConfigs[key],
  resolveComp: (config) => myComponentResolver(config),
  elementOptions: (config, ext, field, item) => myOptionCalculator(config, ext, field, item),
  wrapChild: (config, child) => myChildWrapper(config, child),
  renderInput: (field, name) => [] // Placeholder to be filled later
};

// 2. Create the renderer
const renderer = createArrayRenderer(deps);

// 3. Fill the placeholder with the actual recursive call
// (In the context of the main JsonEditor component)
// deps.renderInput = (field, name) => {
//   if (field.type === 'arrayitems') return renderer.render(field, name);
//   ... other field types
// };