json-editor-vue

JSON editor for Vue 2 and 3 powered by svelte-jsoneditor.

svelte-jsoneditor is a brand new JSON editor created by the same author of jsoneditor, which 'has become hard to maintain, and the architecture needed a big overhaul'. json-editor-vue is the Vue version for svelte-jsoneditor.

jsoneditor_screenshot

🤹‍♂️ Online Playground

Features

Support both Vue 2 & 3
Import locally or globally, configure locally or globally (Powered by vue-global-config)

Installation

NPM

Vue 3

npm add vanilla-jsoneditor json-editor-vue

// Import globally

import JsonEditorVue from 'json-editor-vue'

app.use(JsonEditorVue, {
  // global config
})

<!-- Import locally -->

<template>
  <JsonEditorVue v-model="value" v-bind="{/* local config */}" />
</template>

<script setup>
import JsonEditorVue from 'json-editor-vue'
</script>

<!-- Without bundler / CDN -->

<div id="app">
  <json-editor-vue v-model="data"></json-editor-vue>
  <p v-text="data"></p>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/vanilla-jsoneditor"></script>
<script
  src="https://unpkg.com/json-editor-vue@0.5/dist/json-editor-vue.umd.js"></script>
<script>
  const { createApp, ref } = Vue

  createApp({
    setup: () => ({
      data: ref()
    })
  }).use(window['json-editor-vue'].default)
    .mount('#app')
</script>

Vue 2

# Vue version before 2.7 should add an extra @vue/composition-api
npm add vanilla-jsoneditor json-editor-vue

// Import globally

// Vue version before 2.7 should add an extra @vue/composition-api
// import VCA from '@vue/composition-api'
// Vue.use(VCA)

import JsonEditorVue from 'json-editor-vue'

Vue.use(JsonEditorVue, {
  // global config
})

<!-- Import locally -->

<template>
  <JsonEditorVue v-model="value" v-bind="{/* local config */}" />
</template>

<script>
// Vue version before 2.7 should add an extra @vue/composition-api
// import VCA from '@vue/composition-api'
// Vue.use(VCA)

import JsonEditorVue from 'json-editor-vue'

export default {
  components: { JsonEditorVue },
}
</script>

<!-- Without bundler / CDN -->

<div id="app">
  <json-editor-vue v-model="data"></json-editor-vue>
  <p v-text="data"></p>
</div>

<script src="https://unpkg.com/vue@2"></script>
<!-- Vue version before 2.7 should add an extra @vue/composition-api -->
<!-- <script src="https://unpkg.com/@vue/composition-api"></script> -->
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/vanilla-jsoneditor"></script>
<script
  src="https://unpkg.com/json-editor-vue@0.5/dist/json-editor-vue.umd.js"></script>
<script>
  new Vue({
    components: { 'json-editor-vue': window['json-editor-vue'].default },
    data() {
      return {
        data: undefined,
      }
    },
  }).$mount('#app')
</script>

Props

Name	Description	Type
v-model	binding value	any
...	options of svelte-jsoneditor

Expose

Vue 3 only, all instance properties are accessable using $refs in Vue 2.

name	description	type
jsonEditor	JSONEditor instance	object

Config rules

Props of two-way data binding ( v-model / modelValue / value ) only support local config.
All other props support both local and global config.

Priority:

Local config is higher than global config.
For object type, global config will be merged into local config.