JSON Editor Vue

Vue and Nuxt 2/3 isomorphic JSON editor, viewer, formatter and validator.


English | 简体中文

Features

- 🚀 Performant
- Handle large JSON documents up to 512 MB
- Deserialize with destr by default, up to 35.96x faster than JSON.parse
- 💪 Powerful
- View, edit, format, validate, compact, sort, query, filter, transform, repair, highlight JSON
- 7 primitive data types including BigInt and Symbol
- 3 edit modes: text mode & tree mode & table mode
- 2 themes: light theme & dark theme
- 2-way binding: parsed or stringified JSON
- 🤸 Flexible
- Vue 2.6/2.7/3 isomorphic
- Support SSR, Nuxt 2/3 isomorphic
- Support Vite, Vue CLI, webpack, CDN...
- Support microfrontends
- Support PC & mobile devices
- Local registration & configuration, or global registration & configuration (Powered by vue-global-config)

Cases

> [!Important]
>
> json-editor-vue had surpassed 2 million downloads:
>
> While having a extremely dismal number of Stars:
>
> Please consider starring ⭐ or donating to support our ongoing maintenance if it helps:

Install

$3

``shell
npm i json-editor-vue
`

#### Local Registration

`vue



`

#### Global Registration

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

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

#### CDN + ESM

`html










`

#### CDN + IIFE

> [!Warning]
>
> Not yet supported because vanilla-jsoneditor does not export IIFE or UMD,
>
> please leave a message here if you need it.

`html














`

$3

`shell
npm i json-editor-vue
`

#### Local Registration

`vue



`

#### Global Registration

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

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

#### CDN + ESM

`html










`

#### CDN + IIFE

> [!Warning]
>
> Not yet supported because vanilla-jsoneditor does not export IIFE or UMD,
>
> please leave a message here if you need it.

`html














`

$3

`shell
npm i @vue/composition-api json-editor-vue
`

#### Local Registration

`vue



`

#### Global Registration

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

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

#### CDN + ESM

`html











`

#### CDN + IIFE

> [!Warning]
>
> Not yet supported because vanilla-jsoneditor does not export IIFE or UMD,
>
> please leave a message here if you need it.

`html















`

$3

`shell
npm i json-editor-vue
`

#### Local Registration

`vue



`

`vue



`

#### Global Registration as a Module

`ts
// nuxt.config.ts

export default defineNuxtConfig({
modules: ['json-editor-vue/nuxt'],
})
`

`vue



`

#### Global Registration as a Plugin

`ts
// ~/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)
})
})
`

`vue



`

$3

`shell
npm i json-editor-vue
`

#### Local Registration

`ts
// 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',
})
},
},
}
`

`vue



`

#### Global Registration

`ts
// 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',
})
},
},
}
`

`ts
// ~/plugins/JsonEditorVue.client.js

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

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

`vue



`

$3

`shell
npm i @vue/composition-api json-editor-vue
`

#### Local Registration

`ts
// 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',
})
},
},
}
`

`vue



`

#### Global Registration

`ts
// 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',
})
},
},
}
`

`ts
// ~/plugins/JsonEditorVue.client.js

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

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

`vue



`

$3

Ready to use right out of the box.

$3

Ready to use right out of the box.

$3

≥ v4.5.15

`js
// 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

`js
// 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',
},
],
},
},
}
`

$3

`shell
npm i @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining -D
`

`js
// babel.config.js

module.exports = {
plugins: [
'@babel/plugin-proposal-nullish-coalescing-operator',
'@babel/plugin-proposal-optional-chaining',
],
}
`

`js
// 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()
},
}
`

$3

Vue CLI 2 & 1 pull the template from vuejs-templates/webpack.

`shell
npm i @babel/core@latest @babel/preset-env@latest babel-loader@latest -D
`

`js
// babel.config.js

module.exports = {
presets: [
'@babel/preset-env',
],
}
`

`js
// 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')],
},
],
},
}
`

$3

`shell
npm rm json-editor-vue && npm i json-editor-vue
`

> [!Warning]
>
> Not working for major version bump, fot that you can specify dependency versions (if necessary)

$3

`json5
// package.json
{
// npm/cnpm/bun
"overrides": {
"vanilla-jsoneditor": "*",
"vue-demi": "*"
},
// yarn/bun
"resolutions": {
"vanilla-jsoneditor": "*",
"vue-demi": "*"
},
// pnpm
"pnpm": {
"overrides": {
"vanilla-jsoneditor": "*",
"vue-demi": "*"
}
}
}
`

With Scope:

`json5
// package.json
{
// npm/cnpm/bun
"overrides": {
"json-editor-vue": {
"vanilla-jsoneditor": "*",
"vue-demi": "*"
}
},
// yarn/bun
"resolutions": {
"json-editor-vue/vanilla-jsoneditor": "*",
"json-editor-vue/vue-demi": "*"
},
// pnpm
"pnpm": {
"overrides": {
"json-editor-vue>vanilla-jsoneditor": "*",
"json-editor-vue>vue-demi": "*"
}
}
}
`

Props

| 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 | Mode.tree |
| debounce | debounce delay to update the binding value when typing in text mode, in milliseconds | number | 300 |
| stringified | whether to keep the binding value as stringified JSON in text mode | boolean | true |
| ... | properties of svelte-jsoneditor | | |

$3

- parsed JSON: what we commonly refer to as JSON, which can be of any data type.
- stringified JSON: serialized JSON, which is always a string type.

$3

- svelte-jsoneditor: An object contains a parsed JSON or a stringified 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:

`html
:content="content"
:onChange="(updatedContent) => {
content = updatedContent
}"
/>
`

$3

> [!Important]
>
> The input value is independent of modes, except:
>
> Input value of string type will be treated as a normal string under tree mode, as a stringified JSON under text mode by default.
>
> The output value of tree mode is a parsed JSON, the output value of text mode is a stringified JSON.
>
> But this correspondence can be disrupted by programmatic changes or mode switching.
>
> See https://github.com/josdejong/svelte-jsoneditor/pull/166 for more details.

FAQ: How to keep the value as parsed JSON in text mode?

> [!Caution]
>
> - Not performant for large JSON documents.
> - Adjust the debounce value based on the size of your JSON.
> - Will output empty value when the input value is invalid.

`vue



`

$3

Support camelCase and kebab-case for tag & property name.

> [!Tip]
>
> When using json-editor-vue or any Vue component via CDN (HTML), kebab-case must be used exclusively due to HTML's case insensitivity.

$3

Including the boolean properties of svelte-jsoneditor like readOnly with no value will imply true:

- ✓

- ✓

Exposes

| Name | Description | Type |
| ---------- | ------------------- | ------ |
| jsonEditor | JSONEditor instance | object |

$3

`vue



`

BigInt

`shell
npm i lossless-json
`

`vue



`

Dark Theme

`vue



``

Changelog

Detailed changes for each release are documented in the release notes

Donate

You can buy us a coffee via WeChat Pay 💗