🌐
npm
npmjs.com › package › vue-json-editor
vue-json-editor - npm
import vueJsonEditor from 'vue-json-editor' export default { data () { return { json: { msg: 'demo of jsoneditor' } } }, components: { vueJsonEditor · }, methods: { onJsonChange (value) { console.log('value:', value) } } } </script> vue-json-editor · vuejsoneditor ·
      » npm install vue-json-editor
Published   Nov 13, 2020
Version   1.4.3
Author   liuqi41
Repository   https://github.com/dirkliu/vue-json-editor
Homepage   https://github.com/dirkliu/vue-json-editor#readme
🌐
GitHub
github.com › dirkliu › vue-json-editor
GitHub - dirkliu/vue-json-editor: A jsoneditor of vue
<template> <div> <p>vue-json-editor</p> <vue-json-editor v-model="json" :show-btns="true" :expandedOnStart="true" @json-change="onJsonChange"></vue-json-editor> </div> </template> <script> import vueJsonEditor from 'vue-json-editor' export default { data () { return { json: { msg: 'demo of jsoneditor' } } }, components: { vueJsonEditor }, methods: { onJsonChange (value) { console.log('value:', value) } } } </script>
Starred by 229 users
Forked by 92 users
Languages   JavaScript 98.4% | CSS 1.3% | JavaScript 98.4% | CSS 1.3%
🌐
GitHub
github.com › cloydlau › json-editor-vue
GitHub - cloydlau/json-editor-vue: Vue 2/3 isomorphic JSON editor, viewer, formatter and validator. · GitHub
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="app"> <json-editor-vue v-model="value"></json-editor-vue> </div> <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>
Starred by 657 users
Forked by 31 users
Languages   TypeScript 90.3% | JavaScript 8.4% | HTML 1.3%
🌐
Js
jsonui.js.org
vue-json-ui-editor
We cannot provide a description for this page right now
🌐
GitHub
github.com › Kassaila › vue-json-editor
GitHub - Kassaila/vue-json-editor: Visual JSON editor - built as a vue component
JSON visual editor - built as a Vue.js component. Provides a basic GUI · Current package version work with Vue.js 2. Support for Vue.js 3 is not yet planned. Please preview - demo example · Install package from npm: npm i @kassaila/vue-json-editor · Single file component ·
Starred by 11 users
Forked by 3 users
Languages   Vue 46.9% | JavaScript 34.3% | SCSS 16.4% | HTML 2.4% | Vue 46.9% | JavaScript 34.3% | SCSS 16.4% | HTML 2.4%
🌐
GitHub
github.com › yourtion › vue-json-ui-editor
GitHub - yourtion/vue-json-ui-editor: Edit JSON in UI form with JSON Schema and Vue.js
<template> <json-editor ref="JsonEditor" :schema="schema" v-model="model"> <button @click="submit">submit</button> <button @click="reset">Reset</button> </json-editor> </template> <script> const SCHEMA = { type: 'object', title: 'vue-json-editor demo', properties: { name: { type: 'string', }, email: { type: 'string', }, }, }; // import vue-json-ui-editor import JsonEditor from 'vue-json-ui-editor'; export default { components: { JsonEditor }, data: () => ({ // init json schma file ( require('@/schema/newsletter') ) schema: SCHEMA, // data model: { name: 'Yourtion', }, }), methods: { submit(_e) { alert(JSON.stringify(this.model)); }, reset() { this.$refs.JsonEditor.reset(); }, }, }; </script> More info on: Example-Subscription Schema: newsletter.json ·
Starred by 527 users
Forked by 92 users
Languages   TypeScript 76.4% | Vue 17.6% | JavaScript 5.8% | HTML 0.2% | TypeScript 76.4% | Vue 17.6% | JavaScript 5.8% | HTML 0.2%
🌐
npm
npmjs.com › package › json-editor-vue
json-editor-vue - npm
import JsonEditorVue from 'json-editor-vue' import Vue from 'vue' Vue.use(JsonEditorVue, { // global props & attrs (one-way data flow) }) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="app"> <json-editor-vue v-model="value"></json-editor-vue> </div> <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>
      » npm install json-editor-vue
Published   Mar 05, 2025
Version   0.18.1
Author   Cloyd Lau
Repository   https://github.com/cloydlau/json-editor-vue
Homepage   https://github.com/cloydlau/json-editor-vue#readme
🌐
GitHub
github.com › bestkolobok › vue3-jsoneditor
GitHub - bestkolobok/vue3-jsoneditor
Open the editor in read-only mode: no changes can be made, non-relevant buttons are hidden from the menu, and the context menu is not enabled. ... Number of spaces use for indentation when stringifying JSON, or a string to be used as indentation like '\t' to use a tab as indentation, or ' ' to use 4 spaces (which is equivalent to configuring indentation: 4).
Starred by 80 users
Forked by 13 users
Languages   TypeScript 70.8% | Vue 28.4% | TypeScript 70.8% | Vue 28.4%
🌐
CodeSandbox
codesandbox.io › examples › package › vue-json-editor
vue-json-editor examples - CodeSandbox
vue-json-editor-demo · night1008 · Vuetify active tab (v-tabs component) (forked) jaeh · zxh1 · zgq456 · common-crud-example · mercutiojohn · vue-json-editor-demo (forked) WillianRod · zxh1 (forked) oteroweb · vue-json-editor-demo (forked) a234146540 ·
🌐
Vue.js Examples
vuejsexamples.com › json-editor-with-vue-js
JSON Editor with Vue.js
May 6, 2019 - Vue JSONEditor. View Demo Download Source · npm install v-jsoneditor ·
Find elsewhere
🌐
GitHub
github.com › yansenlei › VJsoneditor
GitHub - yansenlei/VJsoneditor: :large_blue_diamond: vue use jsoneditor
import VJsoneditor from 'v-jsoneditor' export default { name: 'app', components: { VJsoneditor }, data() { return { json: { "hello": "vue" } } }, methods: { onError() { console.log('error') } } }
Starred by 184 users
Forked by 45 users
Languages   Vue 43.4% | JavaScript 29.1% | HTML 27.5% | Vue 43.4% | JavaScript 29.1% | HTML 27.5%
🌐
Vue.js Feed
vuejsfeed.com › blog › a-schema-aware-json-editor-developed-with-vue-js
A schema-aware JSON Editor developed with Vue.js - Vue.js Feed
A schema-aware editor for JSON document. It provides a tree view to present the structure of a JSON document, the user can manipulate the JSON from the context menu. There is a text view to present the content of the JSON document and user may ...
🌐
Vue Script
vuescript.com › home › other › powerful json viewer & editor for vue 3/2
Powerful JSON Viewer & Editor For Vue 3/2 - Vue Script
July 29, 2025 - Powerful JSON Viewer & Editor For ... $ yarn add json-editor-vue # NPM $ npm i json-editor-vue · This is a powerful JSON viewer & editor based on svelte-jsoneditor....
🌐
npm
npmjs.com › package › vue-json-ui-editor
vue-json-ui-editor - npm
<template> <json-editor ref="JsonEditor" :schema="schema" v-model="model"> <button @click="submit">submit</button> <button @click="reset">Reset</button> </json-editor> </template> <script> const SCHEMA = { type: 'object', title: 'vue-json-editor demo', properties: { name: { type: 'string', }, email: { type: 'string', }, }, }; // import vue-json-ui-editor import JsonEditor from 'vue-json-ui-editor'; export default { components: { JsonEditor }, data: () => ({ // init json schma file ( require('@/schema/newsletter') ) schema: SCHEMA, // data model: { name: 'Yourtion', }, }), methods: { submit(_e) { alert(JSON.stringify(this.model)); }, reset() { this.$refs.JsonEditor.reset(); }, }, }; </script> More info on: Example-Subscription Schema: newsletter.json ·
      » npm install vue-json-ui-editor
Published   Aug 18, 2025
Version   2.0.0
Author   Vue JSON UI Editor Contributors
Repository   https://github.com/vue-json-ui-editor/vue-json-ui-editor
Homepage   https://github.com/vue-json-ui-editor/vue-json-ui-editor#readme
🌐
GitHub
github.com › jinkin1995 › vue-json-edit
GitHub - jinkin1995/vue-json-edit: Visual JSON editor built as an vue component. Provides a basic GUI
Visual JSON editor built as an vue component. Provides a basic GUI - jinkin1995/vue-json-edit
Starred by 287 users
Forked by 87 users
Languages   Vue 33.1% | Less 27.0% | HTML 19.2% | CSS 16.6% | JavaScript 4.1% | Vue 33.1% | Less 27.0% | HTML 19.2% | CSS 16.6% | JavaScript 4.1%
🌐
npm
npmjs.com › package › v-jsoneditor
v-jsoneditor - npm
import Vue from 'vue' import VJsoneditor from 'v-jsoneditor' Vue.use(VJsoneditor) import VJsoneditor from 'v-jsoneditor' export default { name: 'app', components: { VJsoneditor }, data() { return { json: { "hello": "vue" } } }, methods: { onError() { console.log('error') } } } <script src='https://unpkg.com/vue@latest'></script> <script src="./dist/v-jsoneditor.min.js"></script> <v-jsoneditor v-model="json" :options="options" :plus="false" height="400px" @error="onError"> # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build ·
      » npm install v-jsoneditor
Published   Aug 10, 2021
Version   1.4.5
Author   leiyswork@gmail.com
Repository   https://github.com/yansenlei/VJsoneditor
Homepage   https://github.com/yansenlei/VJsoneditor#readme
🌐
Morioh
morioh.com › p › 83af05be31a2
Visual JSON Editor built as an Vue Component
Visual JSON Editor built as an vue component. Provides a basic GUI
🌐
Vue Script
vuescript.com › home › text › visual json editor for vue.js – vue-jsoneditor
Visual JSON Editor For Vue.js - vue-jsonEditor - Vue Script
October 15, 2020 - Visual JSON Editor For Vue.js – vue-jsonEditor · jinkin1995 Added 5 years ago · Live Demo Download Source Code · # Yarn $ yarn add vue-json-edit # NPM $ npm install vue-json-edit --save · A visual JSON editor component for Vue.js. import Vue from 'vue' import JsonEditor from 'vue-json-edit' Vue.use(JsonEditor) new Vue({ el: '#app', render: h => (h)(App) }) v1.4.3 (10/14/2020) Bugfix ·
🌐
CodeSandbox
codesandbox.io › examples › package › vue-json-ui-editor
vue-json-ui-editor examples - CodeSandbox
Use this online vue-json-ui-editor playground to view and fork vue-json-ui-editor example apps and templates on CodeSandbox.
🌐
Npm
npm.io › package › vue-json-editor
Vue-json-editor NPM | npm.io
<template> <div> <p>vue-json-editor</p> <vue-json-editor v-model="json" :show-btns="true" :expandedOnStart="true" @json-change="onJsonChange"></vue-json-editor> </div> </template> <script> import vueJsonEditor from 'vue-json-editor' export default { data () { return { json: { msg: 'demo of jsoneditor' } } }, components: { vueJsonEditor }, methods: { onJsonChange (value) { console.log('value:', value) } } } </script>