json-editor-vue

JSON editor for Vue 2.6 / 2.7 / 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 Vue 2.6 / 2.7 / 3
Edit mode two-way binding
Local registration + local configuration, can also be global registration + global configuration (Powered by vue-global-config)

Installation

NPM

Vue 3

npm add json-editor-vue vanilla-jsoneditor

Global registration

import { createApp } from 'vue'
import JsonEditorVue from 'json-editor-vue'

createApp()
  .use(JsonEditorVue, {
    // global props & attrs (one-way data flow)
  })
  .mount('#app')

Local registration

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

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

Without bundler / CDN

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

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue/dist/vue.esm-browser.prod.js",
      "vue-demi": "https://unpkg.com/vue-demi/lib/v3/index.mjs",
      "vanilla-jsoneditor": "https://unpkg.com/vanilla-jsoneditor",
      "json-editor-vue": "https://unpkg.com/json-editor-vue@0.6/dist/json-editor-vue.mjs"
    }
  }
</script>
<script type="module">
  import { createApp, ref } from 'vue'
  import JsonEditorVue from 'json-editor-vue'

  createApp({
    setup: () => ({
      value: ref()
    })
  })
    .use(JsonEditorVue)
    .mount('#app')
</script>

Vue 2.7

npm add json-editor-vue vanilla-jsoneditor

Global registration

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue'

Vue.use(JsonEditorVue, {
  // global props & attrs (one-way data flow)
})

Local registration

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

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

Without bundler / CDN

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

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@2/dist/vue.esm.browser.min.js",
      "vue-demi": "https://unpkg.com/vue-demi/lib/v2.7/index.mjs",
      "vanilla-jsoneditor": "https://unpkg.com/vanilla-jsoneditor",
      "json-editor-vue": "https://unpkg.com/json-editor-vue@0.6/dist/json-editor-vue.mjs"
    }
  }
</script>
<script type="module">
  import Vue from 'vue'
  import JsonEditorVue from 'json-editor-vue'

  new Vue({
    components: { JsonEditorVue },
    data() {
      return {
        value: undefined,
      }
    },
  })
    .$mount('#app')
</script>

Vue 2.6 or earlier

npm add json-editor-vue vanilla-jsoneditor @vue/composition-api

Global registration

import Vue from 'vue'
import VCA from '@vue/composition-api'
import JsonEditorVue from 'json-editor-vue'

Vue.use(VCA)
Vue.use(JsonEditorVue, {
  // global props & attrs (one-way data flow)
})

Local registration

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

<script>
import Vue from 'vue'
import VCA from '@vue/composition-api'
import JsonEditorVue from 'json-editor-vue'

Vue.use(VCA)

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

Without bundler / CDN

It's quite messy this way due to vanilla-jsoneditor does not export UMD.

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

<script>
  window.process = { env: { NODE_ENV: 'production' } }
</script>
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@2.6/dist/vue.esm.browser.min.js",
      "@vue/composition-api": "https://unpkg.com/@vue/composition-api/dist/vue-composition-api.mjs",
      "@vue/composition-api/dist/vue-composition-api.mjs": "https://unpkg.com/@vue/composition-api/dist/vue-composition-api.mjs",
      "vue-demi": "https://unpkg.com/vue-demi/lib/v2/index.mjs",
      "vanilla-jsoneditor": "https://unpkg.com/vanilla-jsoneditor",
      "json-editor-vue": "https://unpkg.com/json-editor-vue@0.6/dist/json-editor-vue.mjs"
    }
  }
</script>
<script type="module">
  import { createApp, ref } from '@vue/composition-api'
  import JsonEditorVue from 'json-editor-vue'

  const app = createApp({
    setup: () => ({
      value: ref()
    })
  })
  app.use(JsonEditorVue)
  app.mount('#app')
</script>

Props

Name	Description	Type	Default
v-model	binding value	`any`
mode	edit mode, use `v-model:mode` in Vue 3 and `:mode.sync` in Vue 2	`'tree'`, `'text'`	`'tree'`
...	properties of svelte-jsoneditor

Expose

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

name	description	type
jsonEditor	JSONEditor instance	object

Types

type Mode = 'tree' | 'text'