npmpackage.info

Gathering detailed insights and metrics for json-editor-vue

Other packages similar to json-editor-vue

vue-json-editor

1.4.3

A json editor of vue

json-editor-vue3

1.1.1

[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url]

vue3-json-editor

1.1.5

A json editor of vue

json-schema-editor-vue

2.3.0

A json-schema editor of high efficient and easy-to-use, base on Vue

Gathering detailed insights and metrics for json-editor-vue

json-editor-vue - 0.18.1 | npmpackage.info

json-editor-vue

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

0.18.1

593

MIT

TypeScript

777.47 kB

2,726,191

Installations

npm install json-editor-vue

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

23.9.0

NPM Version

10.9.2 Score

Supply Chain

95.4

Quality

79.9

Maintenance

Vulnerability

98.2

License

Pull Requests

Open

22

Total

43

Closed

14

Merged

7

Issues

Open

1

Total

67

Closed

66

Releases

v0.18.1

Updated on Mar 05, 2025

v0.18.0

Updated on Feb 28, 2025

v0.17.3

Updated on Oct 28, 2024

v0.17.2

Updated on Oct 11, 2024

v0.17.1

Updated on Oct 08, 2024

v0.17.0

Updated on Sep 24, 2024

View All 47 releases

Languages

TypeScript

JavaScript

HTML

TypeScript (90.28%)

JavaScript (8.4%)

HTML (1.32%)

Developer

cloydlau

Download Statistics

Total Downloads

2,726,191

Last Day

882

Last Week

32,276

Last Month

140,453

Last Year

1,336,693

GitHub Statistics

MIT License

593 Stars

725 Commits

29 Forks

5 Watchers

22 Branches

6 Contributors

Updated on Aug 29, 2025

Maintainers

View All 6 Contributors

Package Meta Information

Latest Version

0.18.1

Package Id

json-editor-vue@0.18.1

Unpacked Size

777.47 kB

Size

476.34 kB

File Count

NPM Version

10.9.2

Node Version

23.9.0

Published on

Mar 05, 2025

Total Downloads

Cumulative downloads

Total Downloads

2,726,191

Last Day

-33.8%

882

Compared to previous day

Last Week

-10%

32,276

Compared to previous week

Last Month

7.4%

140,453

Compared to previous month

Last Year

48.3%

1,336,693

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

JSON Editor Vue

Vue and Nuxt 2/3 isomorphic JSON editor, viewer, formatter and validator.
English | 简体中文

text mode table mode

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

Vue 3

1npm i json-editor-vue

Local Registration

1<script setup>
2import JsonEditorVue from 'json-editor-vue'
3
4const value = ref()
5</script>
6
7<template>
8  <JsonEditorVue
9    v-model="value"
10    v-bind="{/* local props & attrs */}"
11  />
12</template>

Global Registration

1import JsonEditorVue from 'json-editor-vue'
2import { createApp } from 'vue'
3
4createApp()
5  .use(JsonEditorVue, {
6    // global props & attrs (one-way data flow)
7  })
8  .mount('#app')

CDN + ESM

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5  </head>
6
7  <body>
8    <div id="app">
9      <json-editor-vue v-model="value"></json-editor-vue>
10    </div>
11
12    <script type="importmap">
13      {
14        "imports": {
15          "vue": "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm-browser.prod.js",
16          "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v3/index.mjs",
17          "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor",
18          "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.18/dist/json-editor-vue.mjs"
19        }
20      }
21    </script>
22    <script type="module">
23      import { createApp, ref } from 'vue'
24      import JsonEditorVue from 'json-editor-vue'
25
26      createApp({
27        setup: () => ({
28          value: ref(),
29        }),
30      })
31        .use(JsonEditorVue)
32        .mount('#app')
33    </script>
34  </body>
35</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.

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5  </head>
6
7  <body>
8    <div id="app">
9      <json-editor-vue v-model="value"></json-editor-vue>
10    </div>
11
12    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
13    <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
14    <!-- TODO -->
15    <script src="./vanilla-jsoneditor.umd.js"></script>
16    <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script>
17    <script>
18      const { createApp, ref } = Vue
19
20      createApp({
21        setup: () => ({
22          value: ref(),
23        }),
24      })
25        .use(JsonEditorVue)
26        .mount('#app')
27    </script>
28  </body>
29</html>

Vue 2.7

1npm i json-editor-vue

Local Registration

1<script setup>
2import JsonEditorVue from 'json-editor-vue'
3
4const value = ref()
5</script>
6
7<template>
8  <JsonEditorVue
9    v-model="value"
10    v-bind="{/* local props & attrs */}"
11  />
12</template>

Global Registration

1import JsonEditorVue from 'json-editor-vue'
2import Vue from 'vue'
3
4Vue.use(JsonEditorVue, {
5  // global props & attrs (one-way data flow)
6})

CDN + ESM

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5  </head>
6
7  <body>
8    <div id="app">
9      <json-editor-vue v-model="value"></json-editor-vue>
10    </div>
11
12    <script type="importmap">
13      {
14        "imports": {
15          "vue": "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.esm.browser.min.js",
16          "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v2.7/index.mjs",
17          "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor",
18          "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.18/dist/json-editor-vue.mjs"
19        }
20      }
21    </script>
22    <script type="module">
23      import Vue from 'vue'
24      import JsonEditorVue from 'json-editor-vue'
25
26      new Vue({
27        components: { JsonEditorVue },
28        data() {
29          return {
30            value: undefined,
31          }
32        },
33      }).$mount('#app')
34    </script>
35  </body>
36</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.

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5  </head>
6
7  <body>
8    <div id="app">
9      <json-editor-vue v-model="value"></json-editor-vue>
10    </div>
11
12    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
13    <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
14    <!-- TODO -->
15    <script src="./vanilla-jsoneditor.umd.js"></script>
16    <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script>
17    <script>
18      new Vue({
19        components: { JsonEditorVue },
20        data() {
21          return {
22            value: undefined,
23          }
24        },
25      }).$mount('#app')
26    </script>
27  </body>
28</html>

Vue 2.6 or Earlier

1npm i @vue/composition-api json-editor-vue

Local Registration

1<script>
2import VCA from '@vue/composition-api'
3import JsonEditorVue from 'json-editor-vue'
4import Vue from 'vue'
5
6Vue.use(VCA)
7
8export default {
9  components: { JsonEditorVue },
10  data() {
11    return {
12      value: undefined,
13    }
14  },
15}
16</script>
17
18<template>
19  <JsonEditorVue
20    v-model="value"
21    v-bind="{/* local props & attrs */}"
22  />
23</template>

Global Registration

1import VCA from '@vue/composition-api'
2import JsonEditorVue from 'json-editor-vue'
3import Vue from 'vue'
4
5Vue.use(VCA)
6Vue.use(JsonEditorVue, {
7  // global props & attrs (one-way data flow)
8})

CDN + ESM

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5  </head>
6
7  <body>
8    <div id="app">
9      <json-editor-vue v-model="value"></json-editor-vue>
10    </div>
11
12    <script>
13      window.process = { env: { NODE_ENV: 'production' } }
14    </script>
15    <script type="importmap">
16      {
17        "imports": {
18          "vue": "https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.esm.browser.min.js",
19          "@vue/composition-api": "https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.mjs",
20          "@vue/composition-api/dist/vue-composition-api.mjs": "https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.mjs",
21          "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi/lib/v2/index.mjs",
22          "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor",
23          "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.18/dist/json-editor-vue.mjs"
24        }
25      }
26    </script>
27    <script type="module">
28      import { createApp, ref } from '@vue/composition-api'
29      import JsonEditorVue from 'json-editor-vue'
30
31      const app = createApp({
32        setup: () => ({
33          value: ref(),
34        }),
35      })
36
37      app.use(JsonEditorVue)
38      app.mount('#app')
39    </script>
40  </body>
41</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.

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5  </head>
6
7  <body>
8    <div id="app">
9      <json-editor-vue v-model="value"></json-editor-vue>
10    </div>
11
12    <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
13    <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api"></script>
14    <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
15    <!-- TODO -->
16    <script src="./vanilla-jsoneditor.umd.js"></script>
17    <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script>
18    <script>
19      const { createApp, ref } = VueCompositionAPI
20
21      const app = createApp({
22        setup: () => ({
23          value: ref(),
24        }),
25      })
26
27      app.use(VueCompositionAPI)
28      app.use(JsonEditorVue)
29      app.mount('#app')
30    </script>
31  </body>
32</html>

Nuxt 3

1npm i json-editor-vue

Local Registration

1<!-- ~/components/JsonEditorVue.client.vue -->
2
3<script setup>
4import JsonEditorVue from 'json-editor-vue'
5
6const attrs = useAttrs()
7</script>
8
9<template>
10  <JsonEditorVue v-bind="attrs" />
11</template>

1<script setup>
2const value = ref()
3</script>
4
5<template>
6  <JsonEditorVue
7    v-model="value"
8    v-bind="{/* local props & attrs */}"
9  />
10</template>

Global Registration as a Module

1// nuxt.config.ts
2
3export default defineNuxtConfig({
4  modules: ['json-editor-vue/nuxt'],
5})

1<script setup>
2const value = ref()
3</script>
4
5<template>
6  <JsonEditorVue
7    v-model="value"
8    v-bind="{/* local props & attrs */}"
9  />
10</template>

Global Registration as a Plugin

1// ~/plugins/JsonEditorVue.client.ts
2
3import JsonEditorVue from 'json-editor-vue'
4
5export default defineNuxtPlugin((nuxtApp) => {
6  nuxtApp.vueApp.use(JsonEditorVue, {
7    // global props & attrs (one-way data flow)
8  })
9})

1<script setup>
2const value = ref()
3</script>
4
5<template>
6  <JsonEditorVue
7    v-model="value"
8    v-bind="{/* local props & attrs */}"
9  />
10</template>

Nuxt 2 + Vue 2.7

1npm i json-editor-vue

Local Registration

1// nuxt.config.js
2
3export default {
4  build: {
5    // Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default
6    // Therefore Vite-≥4-built outputs should be transpiled in webpack 4
7    transpile: ['json-editor-vue'],
8    extend(config) {
9      // Getting webpack to recognize the `.mjs` file
10      config.module.rules.push({
11        test: /\.mjs$/,
12        include: /node_modules/,
13        type: 'javascript/auto',
14      })
15    },
16  },
17}

1<script setup>
2import { ref } from 'vue'
3
4function JsonEditorVue() {
5  return process.client
6    ? import('json-editor-vue')
7    : Promise.resolve({ render: h => h('div') })
8}
9
10const value = ref()
11</script>
12
13<template>
14  <JsonEditorVue
15    v-model="value"
16    v-bind="{/* local props & attrs */}"
17  />
18</template>

Global Registration

1// nuxt.config.js
2
3export default {
4  plugins: ['~/plugins/JsonEditorVue.client'],
5  build: {
6    // Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default
7    // Therefore Vite-≥4-built outputs should be transpiled in webpack 4
8    transpile: ['json-editor-vue'],
9    extend(config) {
10      // Getting webpack to recognize the `.mjs` file
11      config.module.rules.push({
12        test: /\.mjs$/,
13        include: /node_modules/,
14        type: 'javascript/auto',
15      })
16    },
17  },
18}

1// ~/plugins/JsonEditorVue.client.js
2
3import JsonEditorVue from 'json-editor-vue'
4import Vue from 'vue'
5
6Vue.use(JsonEditorVue, {
7  // global props & attrs (one-way data flow)
8})

1<script setup>
2import { ref } from 'vue'
3
4const value = ref()
5</script>
6
7<template>
8  <ClientOnly>
9    <JsonEditorVue
10      v-model="value"
11      v-bind="{/* local props & attrs */}"
12    />
13  </ClientOnly>
14</template>

Nuxt 2 + Vue 2.6 or Earlier

1npm i @vue/composition-api json-editor-vue

Local Registration

1// nuxt.config.js
2
3export default {
4  build: {
5    // Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default
6    // Therefore Vite-≥4-built outputs should be transpiled in webpack 4
7    transpile: ['json-editor-vue'],
8    extend(config) {
9      // Getting webpack to recognize the `.mjs` file
10      config.module.rules.push({
11        test: /\.mjs$/,
12        include: /node_modules/,
13        type: 'javascript/auto',
14      })
15    },
16  },
17}

1<script>
2import VCA from '@vue/composition-api'
3import Vue from 'vue'
4
5Vue.use(VCA)
6
7export default {
8  components: {
9    JsonEditorVue: () => process.client
10      ? import('json-editor-vue')
11      : Promise.resolve({ render: h => h('div') }),
12  },
13  data() {
14    return {
15      value: undefined,
16    }
17  },
18}
19</script>
20
21<template>
22  <JsonEditorVue
23    v-model="value"
24    v-bind="{/* local props & attrs */}"
25  />
26</template>

Global Registration

1// nuxt.config.js
2
3export default {
4  plugins: ['~/plugins/JsonEditorVue.client'],
5  build: {
6    // Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default
7    // Therefore Vite-≥4-built outputs should be transpiled in webpack 4
8    transpile: ['json-editor-vue'],
9    extend(config) {
10      // Getting webpack to recognize the `.mjs` file
11      config.module.rules.push({
12        test: /\.mjs$/,
13        include: /node_modules/,
14        type: 'javascript/auto',
15      })
16    },
17  },
18}

1// ~/plugins/JsonEditorVue.client.js
2
3import VCA from '@vue/composition-api'
4import JsonEditorVue from 'json-editor-vue'
5import Vue from 'vue'
6
7Vue.use(VCA)
8Vue.use(JsonEditorVue, {
9  // global props & attrs (one-way data flow)
10})

1<script>
2export default {
3  data() {
4    return {
5      value: undefined,
6    }
7  },
8}
9</script>
10
11<template>
12  <ClientOnly>
13    <JsonEditorVue
14      v-model="value"
15      v-bind="{/* local props & attrs */}"
16    />
17  </ClientOnly>
18</template>

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

1// vue.config.js
2
3module.exports = {
4  // Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default
5  // Therefore Vite-≥4-built outputs should be transpiled in webpack 4
6  transpileDependencies: ['json-editor-vue'],
7}

＜ v4.5.15

1// vue.config.js
2
3module.exports = {
4  // Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default
5  // Therefore Vite-≥4-built outputs should be transpiled in webpack 4
6  transpileDependencies: ['json-editor-vue'],
7  configureWebpack: {
8    module: {
9      rules: [
10        // Getting webpack to recognize the `.mjs` file
11        {
12          test: /\.mjs$/,
13          include: /node_modules/,
14          type: 'javascript/auto',
15        },
16      ],
17    },
18  },
19}

Vue CLI 3 (webpack 4)

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

1// babel.config.js
2
3module.exports = {
4  plugins: [
5    '@babel/plugin-proposal-nullish-coalescing-operator',
6    '@babel/plugin-proposal-optional-chaining',
7  ],
8}

1// vue.config.js
2
3module.exports = {
4  // Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default
5  // Therefore Vite-≥4-built outputs should be transpiled in webpack 4
6  transpileDependencies: ['json-editor-vue'],
7  chainWebpack(config) {
8    // Getting webpack to recognize the `.mjs` file
9    config.module
10      .rule('mjs')
11      .include
12      .add(/node_modules/)
13      .type('javascript/auto')
14      .end()
15  },
16}

Vue CLI 2 & 1 (webpack 3)

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

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

1// babel.config.js
2
3module.exports = {
4  presets: [
5    '@babel/preset-env',
6  ],
7}

1// webpack.base.conf.js
2
3module.exports = {
4  module: {
5    rules: [
6      // Getting webpack to recognize the `.mjs` file
7      {
8        test: /\.mjs$/,
9        loader: 'babel-loader',
10        include: [resolve('src'), resolve('test'), resolve('node_modules/json-editor-vue')],
11      },
12    ],
13  },
14}

Update Dependency Versions

1npm 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)

Specify Dependency Versions

1// package.json
2{
3  // npm/cnpm/bun
4  "overrides": {
5    "vanilla-jsoneditor": "***",
6    "vue-demi": "***"
7  },
8  // yarn/bun
9  "resolutions": {
10    "vanilla-jsoneditor": "***",
11    "vue-demi": "***"
12  },
13  // pnpm
14  "pnpm": {
15    "overrides": {
16      "vanilla-jsoneditor": "***",
17      "vue-demi": "***"
18    }
19  }
20}

With Scope:

1// package.json
2{
3  // npm/cnpm/bun
4  "overrides": {
5    "json-editor-vue": {
6      "vanilla-jsoneditor": "***",
7      "vue-demi": "***"
8    }
9  },
10  // yarn/bun
11  "resolutions": {
12    "json-editor-vue/vanilla-jsoneditor": "***",
13    "json-editor-vue/vue-demi": "***"
14  },
15  // pnpm
16  "pnpm": {
17    "overrides": {
18      "json-editor-vue>vanilla-jsoneditor": "***",
19      "json-editor-vue>vue-demi": "***"
20    }
21  }
22}

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

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:

1<JsonEditorVue
2  :content="content"
3  :onChange="(updatedContent) => {
4    content = updatedContent
5  }"
6/>

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.

1<script setup>
2import { Mode } from 'vanilla-jsoneditor'
3</script>
4
5<template>
6  <JsonEditorVue :mode="Mode.text" :stringified="false" />
7</template>

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:

✓ <JsonEditorVue readOnly />
✓ <JsonEditorVue :readOnly="true" />

Exposes

Name	Description	Type
jsonEditor	JSONEditor instance	object

Calling the methods of svelte-jsoneditor

1<script setup>
2import { onMounted, useTemplateRef } from 'vue'
3
4// Vue ≥ v3.5
5const jsonEditorVueRef = useTemplateRef('jsonEditorVueRef')
6// Vue < v3.5
7// const jsonEditorVueRef = ref()
8
9onMounted(() => {
10  jsonEditorVueRef.value.jsonEditor.focus()
11})
12</script>
13
14<template>
15  <JsonEditorVue ref="jsonEditorVueRef" />
16</template>

BigInt

1npm i lossless-json

1<script setup>
2import JsonEditorVue from 'json-editor-vue'
3import { parse, stringify } from 'lossless-json'
4</script>
5
6<template>
7  <JsonEditorVue :parser="{ parse, stringify }" />
8</template>

Dark Theme

1<script setup>
2import JsonEditorVue from 'json-editor-vue'
3import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
4</script>
5
6<template>
7  <JsonEditorVue class="jse-theme-dark" />
8</template>

Changelog

Detailed changes for each release are documented in the release notes

Donate

You can buy us a coffee via WeChat Pay 💗

No vulnerabilities found.

Other packages similar to json-editor-vue

Other packages similar to json-editor-vue

json-editor-vue

Installations

Developer Guide

Yes

CommonJS, ESM

23.9.0

10.9.2

Score

Pull Requests

22

43

14

7

Issues

1

67

66

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

2,726,191

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

JSON Editor Vue

Features

Cases

Install

Vue 3

Local Registration

Global Registration

CDN + ESM

CDN + IIFE

Vue 2.7

Local Registration

Global Registration

CDN + ESM

CDN + IIFE

Vue 2.6 or Earlier

Local Registration

Global Registration

CDN + ESM

CDN + IIFE

Nuxt 3

Local Registration

Global Registration as a Module

Global Registration as a Plugin

Nuxt 2 + Vue 2.7

Local Registration

Global Registration

Nuxt 2 + Vue 2.6 or Earlier

Local Registration

Global Registration

Vite

Vue CLI 5 (webpack 5)

Vue CLI 4 (webpack 4)

Vue CLI 3 (webpack 4)

Vue CLI 2 & 1 (webpack 3)

Update Dependency Versions

Specify Dependency Versions

Props

parsed JSON vs. stringified JSON

Binding value difference between svelte-jsoneditor and json-editor-vue

The association between binding value and modes

Naming convention

Boolean properties

Exposes

Calling the methods of svelte-jsoneditor

BigInt

Dark Theme