- 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