v3-jsoneditor

Vue 3 JSONEditor
82,224 4
Install
npm install v3-jsoneditor
Latest Version:0.0.7
License:MIT
Last Updated:Apr 15, 2026
Links: GitHub  ·  npm
Maintainer: pratikpatel227

v3-jsoneditor

"Vue 3 JSON Editor" is a web-based application built with the Vue 3 JavaScript framework that allows users to easily create, view, and edit JSON data in a user-friendly interface.

Try the demo

https://v3-jsoneditor.netlify.app/

Installation

npm install v3-jsoneditor

Using

Import globally

import {createApp} from 'vue'
import App from './App.vue'
import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue'

const app = createApp(App)

// Register the VJsoneditor component globally
app.component('vue3-jsoneditor', Vue3Jsoneditor)

app.mount('#app')

Import

import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue'

export default {
    name: 'app',
    components: {
        Vue3Jsoneditor
    },
    data() {
        return {
            json: {
                "hello": "vue"
            }
        }
    },
}
<Vue3Jsoneditor ref="editor" v-model="json" :options="options"></Vue3Jsoneditor>

Options

Name Description type default
options Jsoneditor params, You can look at the detailed configuration Object { mode: 'code' }
v-model Object value Object { }
currentMode current edit mode String code
height Default height String -

Events

Name Description
change called on json update
update:modelValue Called on model value update
error Error callback

Support

If this helped you in any way, you can contribute to this project for long term survival by supporting me

💜 Support my open-source work on GitHub

Be sure to check out my sponsor page.

Thank you so much!!!

License

MIT

Related Packages

sr-content

A nuxt 3 JSON Content UI/Editor, by Sr3pp

5,088
jsonschema-builder-vue

Vue 3 Visual JSON Schema editor for creating and manipulating JSON Schema defini...

3,441 5
@visual-json/vue

Vue 3 components for visual-json — the visual JSON editor. Schema-aware, embedda...

3,339
@fett/jsonschema-editor

Vue 3 Visual JSON Schema editor for creating and manipulating JSON Schema defini...

163

Version History

Version Released License
0.0.7 MIT
0.0.6 MIT
0.0.5 MIT
0.0.4 MIT
0.0.3 MIT