cloydlau/json-editor-vue | DeepWiki (original) (raw)

Overview

Relevant source files

json-editor-vue is a Vue and Nuxt 2/3 compatible component library that provides a feature-rich JSON editor, viewer, formatter, and validator. It wraps the vanilla-jsoneditor library to create a seamless Vue integration, offering two-way data binding, reactivity, and proper component lifecycle management across the Vue ecosystem.

For detailed installation and setup instructions, see Installation & Setup. For comprehensive API documentation, see Component API.

Sources: README.md7-9 package.json7

Core Architecture

The library is built around a single Vue component (JsonEditorVue) that serves as a wrapper for the vanilla-jsoneditor library while adding Vue-specific functionality and cross-version compatibility.

Component Structure

Sources: src/index.ts1-9 src/index.ts64-84 README.md35-53

Data Flow

The diagram below illustrates how data flows between a Vue application, the JsonEditorVue component, and the underlying vanilla-jsoneditor implementation:

Sources: src/index.ts114-137 src/index.ts199-237

Key Features

json-editor-vue provides a comprehensive set of features for JSON editing and viewing:

Feature Category Capabilities
Editing Modes Text mode, Tree mode, Table mode
Performance Handles large JSON documents (up to 512 MB), Fast parsing with destr (up to 35.96x faster than JSON.parse)
JSON Types Supports 7 primitive data types including BigInt and Symbol
Appearance Light theme and Dark theme support
Integration Vue 2.6/2.7/3 compatibility, SSR support, Nuxt 2/3 integration
Validation JSON validation, repair functionality
Formatting Pretty printing, compacting, sorting, querying, filtering

Sources: README.md35-53

Editing Modes

The component supports three different editing modes:

  1. Text Mode: Traditional text editing with syntax highlighting
  2. Tree Mode: Structured tree-based editor for hierarchical navigation
  3. Table Mode: Table-like presentation for array-based data

The component includes a screenshot of text mode and tree mode in the README:

Sources: README.md31 README.md42-44

Data Binding

json-editor-vue offers flexible two-way data binding with support for both parsed JSON and stringified JSON:

The binding value behavior depends on the editing mode:

  1. In tree mode, the output value is always a parsed JSON object
  2. In text mode, the output value is a stringified JSON by default
  3. When using stringified: false in text mode, the component deserializes JSON before emitting it

Sources: README.md987-1039 src/index.ts108-120

Component Implementation

The JsonEditorVue component is implemented using Vue's composition API, making it compatible with Vue 2 (via @vue/composition-api) and Vue 3.

Key implementation aspects:

  1. Uses defineComponent to create a Vue component with TypeScript support
  2. Leverages vue-demi for cross-version compatibility
  3. Implements a plugin system with install method for global registration
  4. Uses Vue's reactivity system to sync props and component state
  5. Manages the lifecycle of the vanilla-jsoneditor instance

Sources: src/index.ts64-284

Version Compatibility

The component uses conditional logic to handle differences between Vue 2 and Vue 3:

Sources: src/index.ts18-28

Component API

Props

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 Mode.tree
debounce Debounce delay for text mode updates (ms) number 300
stringified Keep value as stringified JSON in text mode boolean true
readOnly Make the editor read-only boolean -
parser Custom JSON parser and stringifier object { parse: safeDestr, stringify: JSON.stringify }

Sources: README.md979-986 src/index.ts30-62

Events

Name Description Payload
update:modelValue (Vue 3) / input (Vue 2) Emitted when content changes JSON or string
update:mode Emitted when mode changes Mode value

Sources: src/index.ts73-80

Exposed Methods

The component exposes the jsonEditor object that provides direct access to all methods of the underlying vanilla-jsoneditor instance:

Sources: README.md1059-1083 src/index.ts144

Build and Distribution

The library is built using Vite and distributed in multiple formats for compatibility with different module systems:

The package exports different entry points for different module systems:

Sources: package.json39-51 package.json69-71

Advanced Features

BigInt Support

To handle BigInt values in JSON, the library can be configured with lossless-json:

Sources: README.md1087-1102

Dark Theme

The component supports a dark theme through CSS classes:

Sources: README.md1106-1117

Integration Methods

json-editor-vue can be integrated into projects in multiple ways:

  1. Local Registration - Import and use the component directly in a Vue component
  2. Global Registration - Register the component globally with Vue.use()
  3. Nuxt Module - Use the dedicated Nuxt module for Nuxt 3 projects
  4. Nuxt Plugin - Register as a plugin in Nuxt 2/3 projects

The library supports various build tools including Vite, Vue CLI (both webpack 4 and 5), and works in both development and production environments.

Sources: README.md107-910

Notable Users

The component has over 2 million downloads and is used by several prominent projects including:

Sources: README.md56-101

Conclusion

json-editor-vue provides a powerful, versatile JSON editor component for Vue applications with cross-version compatibility, multiple editing modes, and advanced features like BigInt support. Its architecture ensures seamless integration with the Vue ecosystem while maintaining high performance even with large JSON documents.

Sources: README.md35-53 README.md100-103