MCPcopy Index your code
hub / github.com/cloydlau/json-editor-vue

github.com/cloydlau/json-editor-vue @v0.18.1

Chat with this repo
repository ↗ · DeepWiki ↗ · release v0.18.1 ↗ · + Follow
13 symbols 58 edges 39 files 0 documented · 0% 1 cross-repo links
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

JSON Editor Vue version

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

English | 简体中文

playground

npm version JSR Scope

created at build status minzipped size

code style conventional commits semantic release attw Start new PR in StackBlitz Codeflow

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: npm downloads jsDelivr downloads

While having a extremely dismal number of Stars: GitHub Stars

Please consider starring ⭐ or donating to support our ongoing maintenance if it helps: GitHub issues closed

Install

Vue 3

npm i json-editor-vue

Local Registration

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

const value = ref()
</script>

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

Global Registration

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

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

CDN + ESM

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>



      <json-editor-vue v-model="value"></json-editor-vue>




    <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",
          "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor",
          "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.18/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>

CDN + IIFE

[!Warning]

Not yet supported because vanilla-jsoneditor does not export IIFE or UMD,

please leave a message here if you need it.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>



      <json-editor-vue v-model="value"></json-editor-vue>




    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>

    <script src="https://github.com/cloydlau/json-editor-vue/raw/v0.18.1/vanilla-jsoneditor.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script>
    <script>
      const { createApp, ref } = Vue

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

Vue 2.7

npm i json-editor-vue

Local Registration

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

const value = ref()
</script>

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

Global Registration

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

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

CDN + ESM

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>



      <json-editor-vue v-model="value"></json-editor-vue>




    <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",
          "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor",
          "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.18/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>

CDN + IIFE

[!Warning]

Not yet supported because vanilla-jsoneditor does not export IIFE or UMD,

please leave a message here if you need it.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>



      <json-editor-vue v-model="value"></json-editor-vue>




    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>

    <script src="https://github.com/cloydlau/json-editor-vue/raw/v0.18.1/vanilla-jsoneditor.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script>
    <script>
      new Vue({
        components: { JsonEditorVue },
        data() {
          return {
            value: undefined,
          }
        },
      }).$mount('#app')
    </script>
  </body>
</html>

Vue 2.6 or Earlier

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

Local Registration

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

Vue.use(VCA)

export default {
  components: { JsonEditorVue },
  data() {
    return {
      value: undefined,
    }
  },
}
</script>

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

Global Registration

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>



      <json-editor-vue v-model="value"></json-editor-vue>




    <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",
          "vanilla-jsoneditor": "https://cdn.jsdelivr.net/npm/vanilla-jsoneditor",
          "json-editor-vue": "https://cdn.jsdelivr.net/npm/json-editor-vue@0.18/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>

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

Extension points exported contracts — how you extend this code

Parser (Interface)
(no doc)
src/index.ts

Core symbols most depended-on inside this repo

onChangeMode
called by 1
src/index.ts
updateModelValue
called by 1
src/index.ts
transformIndexHtml
called by 0
vite.config.ts
install
called by 0
src/index.ts
[updateModelValueEvent]
called by 0
src/index.ts
setup
called by 0
src/index.ts
onChange
called by 0
src/index.ts
mergeFunction
called by 0
src/index.ts

Shape

Function 10
Enum 2
Interface 1

Languages

TypeScript100%

Modules by API surface

src/index.ts10 symbols
vite.config.ts1 symbols
demo/nuxt2+vue2.7/nuxt.config.js1 symbols
demo/nuxt2+vue2.6/nuxt.config.js1 symbols

Used by 1 indexed graphs manifest dependencies, hub-wide

github.com/mealie-recipes/mealie

For agents

$ claude mcp add json-editor-vue \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact

Ask about this repo answers extend the page