- Notifications
You must be signed in to change notification settings - Fork29
Vue and Nuxt 2/3 isomorphic JSON editor, viewer, formatter and validator.
License
NotificationsYou must be signed in to change notification settings
cloydlau/json-editor-vue
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Vue and Nuxt 2/3 isomorphic JSON editor, viewer, formatter and validator.
English |简体中文
- 🚀 Performant
- Handle large JSON documents up to 512 MB
- Deserialize withdestr 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 includingBigInt 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 byvue-global-config)
 |  |  |
 |  |  LangBot |
 Mealie |  |
Important
json-editor-vue had surpassed2 million downloads:
While having a extremely dismal number of Stars:
Please considerstarring ⭐ ordonating to support our ongoing maintenance if it helps:
npm i json-editor-vue
<script setup>importJsonEditorVuefrom'json-editor-vue'constvalue=ref()</script><template> <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}" /></template>
importJsonEditorVuefrom'json-editor-vue'import{createApp}from'vue'createApp().use(JsonEditorVue,{// global props & attrs (one-way data flow)}).mount('#app')
<!doctype html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><scripttype="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><scripttype="module">import{createApp,ref}from'vue'importJsonEditorVuefrom'json-editor-vue'createApp({setup:()=>({value:ref(),}),}).use(JsonEditorVue).mount('#app')</script></body></html>
Warning
Not yet supported because vanilla-jsoneditor does not export IIFE or UMD,
please leave a messagehere if you need it.
<!doctype html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vue-demi"></script><!-- TODO --><scriptsrc="./vanilla-jsoneditor.umd.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script><script>const{ createApp, ref}=VuecreateApp({setup:()=>({value:ref(),}),}).use(JsonEditorVue).mount('#app')</script></body></html>
npm i json-editor-vue
<script setup>importJsonEditorVuefrom'json-editor-vue'constvalue=ref()</script><template> <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}" /></template>
importJsonEditorVuefrom'json-editor-vue'importVuefrom'vue'Vue.use(JsonEditorVue,{// global props & attrs (one-way data flow)})
<!doctype html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><scripttype="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><scripttype="module">importVuefrom'vue'importJsonEditorVuefrom'json-editor-vue'newVue({components:{ JsonEditorVue},data(){return{value:undefined,}},}).$mount('#app')</script></body></html>
Warning
Not yet supported because vanilla-jsoneditor does not export IIFE or UMD,
please leave a messagehere if you need it.
<!doctype html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vue-demi"></script><!-- TODO --><scriptsrc="./vanilla-jsoneditor.umd.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script><script>newVue({components:{ JsonEditorVue},data(){return{value:undefined,}},}).$mount('#app')</script></body></html>
npm i @vue/composition-api json-editor-vue
<script>importVCAfrom'@vue/composition-api'importJsonEditorVuefrom'json-editor-vue'importVuefrom'vue'Vue.use(VCA)exportdefault { components: { JsonEditorVue },data() {return { value:undefined, } },}</script><template> <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}" /></template>
importVCAfrom'@vue/composition-api'importJsonEditorVuefrom'json-editor-vue'importVuefrom'vue'Vue.use(VCA)Vue.use(JsonEditorVue,{// global props & attrs (one-way data flow)})
<!doctype html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><script>window.process={env:{NODE_ENV:'production'}}</script><scripttype="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><scripttype="module">import{createApp,ref}from'@vue/composition-api'importJsonEditorVuefrom'json-editor-vue'constapp=createApp({setup:()=>({value:ref(),}),})app.use(JsonEditorVue)app.mount('#app')</script></body></html>
Warning
Not yet supported because vanilla-jsoneditor does not export IIFE or UMD,
please leave a messagehere if you need it.
<!doctype html><htmllang="en"><head><metacharset="UTF-8"/></head><body><divid="app"><json-editor-vuev-model="value"></json-editor-vue></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.6"></script><scriptsrc="https://cdn.jsdelivr.net/npm/@vue/composition-api"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vue-demi"></script><!-- TODO --><scriptsrc="./vanilla-jsoneditor.umd.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/json-editor-vue@0.18"></script><script>const{ createApp, ref}=VueCompositionAPIconstapp=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>importJsonEditorVuefrom'json-editor-vue'constattrs=useAttrs()</script><template> <JsonEditorVuev-bind="attrs" /></template>
<script setup>constvalue=ref()</script><template> <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}" /></template>
// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:['json-editor-vue/nuxt'],})
<script setup>constvalue=ref()</script><template> <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}" /></template>
// ~/plugins/JsonEditorVue.client.tsimportJsonEditorVuefrom'json-editor-vue'exportdefaultdefineNuxtPlugin((nuxtApp)=>{nuxtApp.vueApp.use(JsonEditorVue,{// global props & attrs (one-way data flow)})})
<script setup>constvalue=ref()</script><template> <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}" /></template>
npm i json-editor-vue
// nuxt.config.jsexportdefault{build:{// Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default// Therefore Vite-≥4-built outputs should be transpiled in webpack 4transpile:['json-editor-vue'],extend(config){// Getting webpack to recognize the `.mjs` fileconfig.module.rules.push({test:/\.mjs$/,include:/node_modules/,type:'javascript/auto',})},},}
<script setup>import {ref }from'vue'functionJsonEditorVue() {returnprocess.client?import('json-editor-vue'):Promise.resolve({render:h=>h('div') })}constvalue=ref()</script><template> <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}" /></template>
// nuxt.config.jsexportdefault{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 4transpile:['json-editor-vue'],extend(config){// Getting webpack to recognize the `.mjs` fileconfig.module.rules.push({test:/\.mjs$/,include:/node_modules/,type:'javascript/auto',})},},}
// ~/plugins/JsonEditorVue.client.jsimportJsonEditorVuefrom'json-editor-vue'importVuefrom'vue'Vue.use(JsonEditorVue,{// global props & attrs (one-way data flow)})
<script setup>import {ref }from'vue'constvalue=ref()</script><template> <ClientOnly> <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}" /> </ClientOnly></template>
npm i @vue/composition-api json-editor-vue
// nuxt.config.jsexportdefault{build:{// Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default// Therefore Vite-≥4-built outputs should be transpiled in webpack 4transpile:['json-editor-vue'],extend(config){// Getting webpack to recognize the `.mjs` fileconfig.module.rules.push({test:/\.mjs$/,include:/node_modules/,type:'javascript/auto',})},},}
<script>importVCAfrom'@vue/composition-api'importVuefrom'vue'Vue.use(VCA)exportdefault { components: {JsonEditorVue: ()=>process.client?import('json-editor-vue'):Promise.resolve({render:h=>h('div') }), },data() {return { value:undefined, } },}</script><template> <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}" /></template>
// nuxt.config.jsexportdefault{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 4transpile:['json-editor-vue'],extend(config){// Getting webpack to recognize the `.mjs` fileconfig.module.rules.push({test:/\.mjs$/,include:/node_modules/,type:'javascript/auto',})},},}
// ~/plugins/JsonEditorVue.client.jsimportVCAfrom'@vue/composition-api'importJsonEditorVuefrom'json-editor-vue'importVuefrom'vue'Vue.use(VCA)Vue.use(JsonEditorVue,{// global props & attrs (one-way data flow)})
<script>exportdefault {data() {return { value:undefined, } },}</script><template> <ClientOnly> <JsonEditorVuev-model="value"v-bind="{/* local props & attrs */}" /> </ClientOnly></template>
Ready to use right out of the box.
Ready to use right out of the box.
≥ v4.5.15
// vue.config.jsmodule.exports={// Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default// Therefore Vite-≥4-built outputs should be transpiled in webpack 4transpileDependencies:['json-editor-vue'],}
＜ v4.5.15
// vue.config.jsmodule.exports={// Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default// Therefore Vite-≥4-built outputs should be transpiled in webpack 4transpileDependencies:['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.jsmodule.exports={plugins:['@babel/plugin-proposal-nullish-coalescing-operator','@babel/plugin-proposal-optional-chaining',],}
// vue.config.jsmodule.exports={// Vite ≥4 (Rollup ≥3) uses ES2020 as compiler target by default// Therefore Vite-≥4-built outputs should be transpiled in webpack 4transpileDependencies:['json-editor-vue'],chainWebpack(config){// Getting webpack to recognize the `.mjs` fileconfig.module.rule('mjs').include.add(/node_modules/).type('javascript/auto').end()},}
Vue CLI 2 & 1 pull the template fromvuejs-templates/webpack.
npm i @babel/core@latest @babel/preset-env@latest babel-loader@latest -D
// babel.config.jsmodule.exports={presets:['@babel/preset-env',],}
// webpack.base.conf.jsmodule.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')],},],},}
npm rm json-editor-vue&& npm i json-editor-vueWarning
Not working for major version bump, fot that you canspecify dependency versions (if necessary)
// 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:
// 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":"***"}}}
| 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 /you can use string in JS | 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 ofsvelte-jsoneditor |
- 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.
- svelte-jsoneditor: An object contains a parsed JSON or a stringified JSON, will do
JSON.parsewhen 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 }"/>
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.
Seejosdejong/svelte-jsoneditor#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
debouncevalue based on the size of your JSON. - Will output
undefinedwhen the input value is invalid.
<script setup>import {Mode }from'vanilla-jsoneditor'</script><template> <JsonEditorVue:mode="Mode.text":stringified="false" /></template>
Tip
You can usemode="text" in JavaScript context without installing vanilla-jsoneditor.
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.
Including the boolean properties of svelte-jsoneditor likereadOnly with no value will implytrue:
✓
<JsonEditorVue readOnly />✓
<JsonEditorVue :readOnly="true" />
| Name | Description | Type |
|---|---|---|
| jsonEditor | JSONEditor instance | object |
<script setup>import {onMounted,useTemplateRef }from'vue'// Vue ≥ v3.5constjsonEditorVueRef=useTemplateRef('jsonEditorVueRef')// Vue < v3.5// const jsonEditorVueRef = ref()onMounted(()=> {jsonEditorVueRef.value.jsonEditor.focus()})</script><template> <JsonEditorVueref="jsonEditorVueRef" /></template>
npm i lossless-json
<script setup>importJsonEditorVuefrom'json-editor-vue'import {parse,stringify }from'lossless-json'</script><template> <JsonEditorVue:parser="{ parse, stringify }" /></template>
<script setup>importJsonEditorVuefrom'json-editor-vue'import'vanilla-jsoneditor/themes/jse-theme-dark.css'</script><template> <JsonEditorVueclass="jse-theme-dark" /></template>
Detailed changes for each release are documented in therelease notes
You can buy us a coffee via WeChat Pay 💗
About
Vue and Nuxt 2/3 isomorphic JSON editor, viewer, formatter and validator.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.