Vue 2.6/2.7/3 & Nuxt 2/3 isomorphic JSON editor, viewer, formatter and validator.
English | 简体中文
🕹 Playground
- View, edit, format, validate, compact, sort, query, filter, transform, repair, highlight JSON
- 3 edit modes: text mode & tree mode & table mode, 2-way binding
- 2 themes: light theme & dark theme
- Handle large JSON documents up to 512 MB
- Support all 7 primitive data types including
BigInt
andSymbol
- Vue 2.6/2.7/3 isomorphic
- Support SSR (Nuxt 2/3 isomorphic)
- Support Vite, Vue CLI, webpack, CDN...
- Support microfrontends (wujie, qiankun, single-spa...)
- Local registration & configuration, or global registration & configuration (Powered by vue-global-config)
As of v0.11, it's no longer necessary to explicitly install vanilla-jsoneditor.
If you want to specify dependency versions:
// package.json
{
// npm/cnpm/bun
"overrides": {
"vanilla-jsoneditor": "xxx",
"vue-demi": "xxx"
},
// yarn/bun
"resolutions": {
"vanilla-jsoneditor": "xxx",
"vue-demi": "xxx"
},
// pnpm
"pnpm": {
"overrides": {
"vanilla-jsoneditor": "xxx",
"vue-demi": "xxx"
}
}
}
npm i json-editor-vue
<script setup>
import JsonEditorVue from 'json-editor-vue'
const value = ref()
</script>
<template>
<JsonEditorVue
v-model="value"
v-bind="{/* local props & attrs */}"
/>
</template>
import { createApp } from 'vue'
import JsonEditorVue from 'json-editor-vue'
createApp()
.use(JsonEditorVue, {
// global props & attrs (one-way data flow)
})
.mount('#app')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<json-editor-vue v-model="value"></json-editor-vue>
</div>
<script type="importmap">
{
"imports": {
"vue": "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm-browser.prod.js",
"vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v3/index.mjs",
"json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.11/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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<json-editor-vue v-model="value"></json-editor-vue>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
<script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.11"></script>
<script>
const { createApp, ref } = Vue
createApp({
setup: () => ({
value: ref(),
}),
}).use(JsonEditorVue)
.mount('#app')
</script>
</body>
</html>
npm i json-editor-vue
<script setup>
import JsonEditorVue from 'json-editor-vue'
const value = ref()
</script>
<template>
<JsonEditorVue
v-model="value"
v-bind="{/* local props & attrs */}"
/>
</template>
import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue'
Vue.use(JsonEditorVue, {
// global props & attrs (one-way data flow)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<json-editor-vue v-model="value"></json-editor-vue>
</div>
<script type="importmap">
{
"imports": {
"vue": "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.esm.browser.min.js",
"vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v2.7/index.mjs",
"json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.11/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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<json-editor-vue v-model="value"></json-editor-vue>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
<script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.11"></script>
<script>
new Vue({
components: { JsonEditorVue },
data() {
return {
value: undefined,
}
},
}).$mount('#app')
</script>
</body>
</html>
npm i json-editor-vue @vue/composition-api
<script>
import Vue from 'vue'
import VCA from '@vue/composition-api'
import JsonEditorVue from 'json-editor-vue'
Vue.use(VCA)
export default {
components: { JsonEditorVue },
data() {
return {
value: undefined,
}
},
}
</script>
<template>
<JsonEditorVue
v-model="value"
v-bind="{/* local props & attrs */}"
/>
</template>
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)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<json-editor-vue v-model="value"></json-editor-vue>
</div>
<script>
window.process = { env: { NODE_ENV: 'production' } }
</script>
<script type="importmap">
{
"imports": {
"vue": "https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.esm.browser.min.js",
"@vue/composition-api": "https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.mjs",
"@vue/composition-api/dist/vue-composition-api.mjs": "https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.mjs",
"vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v2/index.mjs",
"json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.11/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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<json-editor-vue v-model="value"></json-editor-vue>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
<script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.11"></script>
<script>
const { createApp, ref } = VueCompositionAPI
const app = createApp({
setup: () => ({
value: ref(),
}),
})
app.use(VueCompositionAPI)
app.use(JsonEditorVue)
app.mount('#app')
</script>
</body>
</html>
npm i json-editor-vue
<!-- ~/components/JsonEditorVue.client.vue -->
<script setup>
import JsonEditorVue from 'json-editor-vue'
const attrs = useAttrs()
</script>
<template>
<JsonEditorVue v-bind="attrs" />
</template>
<script setup>
const value = ref()
</script>
<template>
<client-only>
<JsonEditorVue
v-model="value"
v-bind="{/* local props & attrs */}"
/>
</client-only>
</template>
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['json-editor-vue/nuxt'],
})
<script setup>
const value = ref()
</script>
<template>
<client-only>
<JsonEditorVue v-model="value" />
</client-only>
</template>
// ~/plugins/JsonEditorVue.client.ts
import JsonEditorVue from 'json-editor-vue'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(JsonEditorVue, {
// global props & attrs (one-way data flow)
})
})
<script setup>
const value = ref()
</script>
<template>
<client-only>
<JsonEditorVue v-model="value" />
</client-only>
</template>
npm i json-editor-vue
// nuxt.config.js
export default {
build: {
// Vite 4 (Rollup 3) uses ES2020 as compiler target by default
// Therefore Vite-4-built outputs should be transpiled in webpack 4
transpile: ['json-editor-vue'],
extend(config) {
// Getting webpack to recognize the `.mjs` file
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
})
},
},
}
<script setup>
import { ref } from 'vue'
function JsonEditorVue() {
return process.client
? import('json-editor-vue')
: Promise.resolve({ render: h => h('div') })
}
const value = ref()
</script>
<template>
<client-only>
<JsonEditorVue
v-model="value"
v-bind="{/* local props & attrs */}"
/>
</client-only>
</template>
// nuxt.config.js
export default {
plugins: ['~/plugins/JsonEditorVue.client'],
build: {
// Vite 4 (Rollup 3) uses ES2020 as compiler target by default
// Therefore Vite-4-built outputs should be transpiled in webpack 4
transpile: ['json-editor-vue'],
extend(config) {
// Getting webpack to recognize the `.mjs` file
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
})
},
},
}
// ~/plugins/JsonEditorVue.client.js
import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue'
Vue.use(JsonEditorVue, {
// global props & attrs (one-way data flow)
})
<script setup>
import { ref } from 'vue'
const value = ref()
</script>
<template>
<client-only>
<JsonEditorVue v-model="value" />
</client-only>
</template>
npm i json-editor-vue @vue/composition-api
// nuxt.config.js
export default {
build: {
// Vite 4 (Rollup 3) uses ES2020 as compiler target by default
// Therefore Vite-4-built outputs should be transpiled in webpack 4
transpile: ['json-editor-vue'],
extend(config) {
// Getting webpack to recognize the `.mjs` file
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
})
},
},
}
<script>
import Vue from 'vue'
import VCA from '@vue/composition-api'
Vue.use(VCA)
export default {
components: {
JsonEditorVue: () => process.client
? import('json-editor-vue')
: Promise.resolve({ render: h => h('div') }),
},
data() {
return {
value: undefined,
}
},
}
</script>
<template>
<client-only>
<JsonEditorVue
v-model="value"
v-bind="{/* local props & attrs */}"
/>
</client-only>
</template>
// nuxt.config.js
export default {
plugins: ['~/plugins/JsonEditorVue.client'],
build: {
// Vite 4 (Rollup 3) uses ES2020 as compiler target by default
// Therefore Vite-4-built outputs should be transpiled in webpack 4
transpile: ['json-editor-vue'],
extend(config) {
// Getting webpack to recognize the `.mjs` file
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
})
},
},
}
// ~/plugins/JsonEditorVue.client.js
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)
})
<script>
export default {
data() {
return {
value: undefined,
}
},
}
</script>
<template>
<client-only>
<JsonEditorVue v-model="value" />
</client-only>
</template>
Ready to use right out of the box.
Ready to use right out of the box.
≥ v4.5.15
// vue.config.js
module.exports = {
// Vite 4 (Rollup 3) uses ES2020 as compiler target by default
// Therefore Vite-4-built outputs should be transpiled in webpack 4
transpileDependencies: ['json-editor-vue'],
}
< v4.5.15
// vue.config.js
module.exports = {
// Vite 4 (Rollup 3) uses ES2020 as compiler target by default
// Therefore Vite-4-built outputs should be transpiled in webpack 4
transpileDependencies: ['json-editor-vue'],
configureWebpack: {
module: {
rules: [
// Getting webpack to recognize the `.mjs` file
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
},
],
},
},
}
npm i @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining -D
// babel.config.js
module.exports = {
plugins: [
'@babel/plugin-proposal-nullish-coalescing-operator',
'@babel/plugin-proposal-optional-chaining',
],
}
// vue.config.js
module.exports = {
// Vite 4 (Rollup 3) uses ES2020 as compiler target by default
// Therefore Vite-4-built outputs should be transpiled in webpack 4
transpileDependencies: ['json-editor-vue'],
chainWebpack(config) {
// Getting webpack to recognize the `.mjs` file
config.module
.rule('mjs')
.include.add(/node_modules/)
.type('javascript/auto')
.end()
},
}
Vue CLI 2 & 1 pull the template from vuejs-templates/webpack.
npm i @babel/core@latest @babel/preset-env@latest babel-loader@latest -D
// babel.config.js
module.exports = {
presets: [
'@babel/preset-env',
],
}
// webpack.base.conf.js
module.exports = {
module: {
rules: [
// Getting webpack to recognize the `.mjs` file
{
test: /\.mjs$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/json-editor-vue')],
},
],
},
}
Name | Description | Type | Default |
---|---|---|---|
v-model / modelValue (Vue 3) / value (Vue 2) |
binding value | any | |
mode / v-model:mode (Vue 3) / :mode.sync (Vue 2) |
edit mode | Mode | 'tree' |
... | properties of svelte-jsoneditor |
⚠ kebab-case is required for tag & prop name when using from CDN.
- svelte-jsoneditor: An object contains a stringified JSON or a parsed JSON, will do
JSON.parse
when passing as a stringified JSON. - json-editor-vue: JSON itself. What you see is what you get.
If you prefer the behavior of svelte-jsoneditor:
<JsonEditorVue
:content="content"
:onChange="(updatedContent) => {
content = updatedContent
}"
/>
See josdejong/svelte-jsoneditor#166 for more details.
Including the boolean properties of svelte-jsoneditor like readOnly
with no value will imply true
:
-
✔️
<JsonEditorVue readOnly />
-
✔️
<JsonEditorVue :readOnly="true" />
Name | Description | Type |
---|---|---|
jsonEditor | JSONEditor instance | object |
type Mode = 'tree' | 'text' | 'table'
<script setup>
import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
import JsonEditorVue from 'json-editor-vue'
</script>
<template>
<JsonEditorVue class="jse-theme-dark" />
</template>
Detailed changes for each release are documented in the release notes