Vue 2.6/2.7/3 & Nuxt 2/3 isomorphic JSON editor, viewer, formatter and validator.
English | 简体中文
> [!Important]
>
> json-editor-vue had surpassed 1 million downloads (not including CDN): 
>
> While having a extremely dismal number of Stars: 
>
> Please consider hitting the Star to show your support for the ongoing maintenance if you find it useful. 🙏
## Features
- 🚀 Performant
- Handle large JSON documents up to 512 MB
- 💪 Powerful
- View, edit, format, validate, compact, sort, query, filter, transform, repair, highlight JSON
- 7 primitive data types including `BigInt` and `Symbol` are supported
- 3 edit modes: text mode & tree mode & table mode
- 2 themes: light theme & dark theme
- 2-way binding: [parsed or stringified JSON](#parsed-json-vs-stringified-json)
- 🤸 Flexible
- Vue 2.6/2.7/3 isomorphic
- Support SSR, Nuxt 2/3 isomorphic
- Support Vite, Vue CLI, webpack, CDN...
- Support microfrontends ([wujie](https://github.com/Tencent/wujie), [qiankun](https://github.com/umijs/qiankun), [single-spa](https://github.com/single-spa/single-spa)...)
- Local registration & configuration, or global registration & configuration (Powered by [vue-global-config](https://github.com/cloydlau/vue-global-config))
## Install
### Dependencies
As of v0.11, it's no longer necessary to explicitly install [vanilla-jsoneditor](https://github.com/josdejong/svelte-jsoneditor).
If you want to specify dependency versions:
```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": "***"
}
}
}
```
or scoped:
```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": "***"
}
}
}
```
### Vue 3
```shell
# npm
npm i json-editor-vue
# jsr
npx jsr add @cloydlau/json-editor-vue
```
#### Local Registration
```vue
```
#### Global Registration
```ts
import { createApp } from 'vue'
import JsonEditorVue from 'json-editor-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](https://github.com/josdejong/svelte-jsoneditor/discussions/196) if you need it.
```html
```
### Vue 2.7
```shell
# npm
npm i json-editor-vue
# jsr
npx jsr add @cloydlau/json-editor-vue
```
#### Local Registration
```vue
```
#### Global Registration
```ts
import Vue from 'vue'
import JsonEditorVue from 'json-editor-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](https://github.com/josdejong/svelte-jsoneditor/discussions/196) if you need it.
```html
```
### Vue 2.6 or Earlier
```shell
# npm
npm i @vue/composition-api json-editor-vue
# jsr
npm i @vue/composition-api
npx jsr add @cloydlau/json-editor-vue
```
#### Local Registration
```vue
```
#### Global Registration
```ts
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)
})
```
#### CDN + ESM
```html
```
#### CDN + IIFE
> [!Warning]
>
> Not yet supported because vanilla-jsoneditor does not export IIFE or UMD,
>
> please leave a message [here](https://github.com/josdejong/svelte-jsoneditor/discussions/196) if you need it.
```html
```
### Nuxt 3
```shell
# npm
npm i json-editor-vue
# jsr
npx jsr add @cloydlau/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
```
### Nuxt 2 + Vue 2.7
```shell
# npm
npm i json-editor-vue
# jsr
npx jsr add @cloydlau/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 Vue from 'vue'
import JsonEditorVue from 'json-editor-vue'
Vue.use(JsonEditorVue, {
// global props & attrs (one-way data flow)
})
```
```vue
```
### Nuxt 2 + Vue 2.6 or Earlier
```shell
# npm
npm i @vue/composition-api json-editor-vue
# jsr
npm i @vue/composition-api
npx jsr add @cloydlau/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 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)
})
```
```vue
```
### Vite
Ready to use right out of the box.
### Vue CLI 5 (webpack 5)
Ready to use right out of the box.
### Vue CLI 4 (webpack 4)
≥ 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',
},
],
},
},
}
```
### Vue CLI 3 (webpack 4)
```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()
},
}
```
### Vue CLI 2 & 1 (webpack 3)
Vue CLI 2 & 1 pull the template from [vuejs-templates/webpack](https://github.com/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')],
},
],
},
}
```
## 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 milliseconds | number | `100` |
| stringified | whether to keep the binding value as stringified JSON in text mode | boolean | `true` |
| ... | properties of [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) | | |
### parsed JSON vs. stringified JSON
- 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.
### Binding value difference between svelte-jsoneditor and json-editor-vue
- 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
```
### The association between binding value and modes
> [!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.
```html
```
### Naming convention
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.
### Boolean properties
Including the boolean properties of svelte-jsoneditor like `readOnly` with no value will imply `true`:
- ✓ ``
- ✓ ``
## Expose
| Name | Description | Type |
| ---------- | ------------------- | ------ |
| jsonEditor | JSONEditor instance | object |
### Calling the methods of svelte-jsoneditor
```vue
```
## Dark Theme
```vue
```
## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/cloydlau/json-editor-vue/releases)
