Registry / serialization / json-editor-vue

json-editor-vue

library0.18.1jsnpmunverified

json-editor-vue is an isomorphic Vue component that functions as a comprehensive JSON editor, viewer, formatter, and validator. It leverages the underlying `vanilla-jsoneditor` library to provide its core functionality. The package is actively maintained, with the current stable version being v0.18.1, reflecting a frequent update schedule that includes both bug fixes and feature enhancements, such as regular upgrades to its `vanilla-jsoneditor` dependency. Key differentiators include its robust support for Server-Side Rendering (SSR) in Nuxt environments, comprehensive validation capabilities (indicated by AJV keywords), and broad compatibility across Vue 2 and Vue 3 versions. It offers multiple editing modes (text, tree, table) and handles large JSON documents efficiently, partly due to its use of `destr` for deserialization.

serialization web-framework

npm install json-editor-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · JSON-EDITOR-VUE

json-editor-vue

serializationjavascriptv0.18.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

JsonEditorVue

✓ import JsonEditorVue from 'json-editor-vue'

✗ import { JsonEditorVue } from 'json-editor-vue'

The component is exported as a default export. Using named import syntax will result in an undefined module.

Mode

✓ import type { Mode } from 'vanilla-jsoneditor'

✗ import { Mode } from 'json-editor-vue'

The `Mode` enum (e.g., 'tree', 'text', 'form') was removed as a direct export from `json-editor-vue` in v0.15.0. It must now be imported directly from the `vanilla-jsoneditor` package for type hints or programmatic control.

JSONContent

✓ import type { JSONContent } from 'vanilla-jsoneditor'

Types for the editor's content structure, like `JSONContent`, should be imported directly from `vanilla-jsoneditor` as `json-editor-vue` is a wrapper and re-exports are not guaranteed or explicit for all types.

This quickstart demonstrates how to integrate `json-editor-vue` into a Vue 3 component using the Composition API. It showcases data binding with `v-model`, setting the editor mode, enabling UI elements like the menu and navigation bar, and handling `update:json` and `error` events for robust interaction. Types for `Mode` and `JSONContent` are imported from `vanilla-jsoneditor` for type safety.

<template> <div class="json-editor-container"> <h2>Edit Your JSON Data</h2> <p>Current mode: {{ mode }}</p> <JsonEditorVue v-model="jsonData" :mode="mode" :mainMenuBar="true" :navigationBar="true" :statusBar="true" :indentation="2" @update:json="handleJsonUpdate" @error="handleError" class="my-editor" /> <h3>Raw JSON Output:</h3> <pre class="json-output">{{ JSON.stringify(jsonData, null, 2) }}</pre> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import JsonEditorVue from 'json-editor-vue'; import type { Mode, JSONContent } from 'vanilla-jsoneditor'; const initialData: object | null = { "user": { "id": 123, "name": "Alice", "email": "alice@example.com", "settings": { "theme": "dark", "notifications": true, "language": "en-US" }, "tags": ["admin", "premium", "active"], "lastLogin": "2024-04-18T10:00:00Z" }, "products": [ { "productId": "A1", "price": 29.99, "inStock": true }, { "productId": "B2", "price": 12.50, "inStock": false } ] }; const jsonData = ref<object | null>(initialData); const mode = ref<Mode>('tree'); // 'tree', 'text', 'form', 'code', 'preview' options available function handleJsonUpdate(newValue: object | null) { console.log('JSON content updated:', newValue); // You can perform further actions with the updated JSON here } function handleError(error: Error) { console.error('JSON Editor encountered an error:', error.message); // Display error to user or log for debugging } </script> <style> .json-editor-container { font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } h2 { color: #333; text-align: center; margin-bottom: 20px; } .my-editor { height: 500px; /* Essential for the editor to display */ width: 100%; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 20px; } .json-output { background-color: #f8f8f8; border: 1px solid #ddd; padding: 10px; border-radius: 4px; white-space: pre-wrap; word-break: break-all; } </style>

Debug

Known issues

breakingIn v0.16.0, `json-editor-vue` changed its default JSON deserialization from `JSON.parse` to `destr` and began shallowly merging properties. This affects how default properties and complex configurations are handled, potentially altering expected behavior for deep object merges or specific parsing edge cases.

fix

Review any code that relies on deep merging of component properties or specific `JSON.parse` behaviors. Adjust property assignment logic to explicitly handle deep merges if required, or ensure configurations are structured to accommodate shallow merging.

affects: >=0.16.0

breakingThe `Mode` enum, previously exported directly from `json-editor-vue`, was removed in v0.15.0. Users who relied on `import { Mode } from 'json-editor-vue'` for defining editor modes will encounter import errors.

fix

Update import statements to retrieve `Mode` directly from the upstream `vanilla-jsoneditor` package: `import type { Mode } from 'vanilla-jsoneditor';`.

affects: >=0.15.0

gotchaThe primary component `JsonEditorVue` is a default export, not a named export. Attempting to import it using named import syntax (e.g., `import { JsonEditorVue } from 'json-editor-vue'`) will result in an undefined module import or similar runtime errors.

fix

Always use the default import syntax: `import JsonEditorVue from 'json-editor-vue'`.

affects: >=0.1.0

gotchaThis library frequently upgrades its core dependency, `vanilla-jsoneditor`. While `json-editor-vue`'s own changelog may not always mark these as breaking, major `vanilla-jsoneditor` updates (e.g., v1.0 in 0.17.0, v2.0 in 0.17.3, v3.0 in 0.18.0) can introduce API changes, UI shifts, or behavior modifications that implicitly affect `json-editor-vue`'s functionality or user experience.

fix

When upgrading `json-editor-vue`, it is highly recommended to also consult the `vanilla-jsoneditor` changelog for potential breaking changes or significant feature updates. Thoroughly test your application after any upgrade.

affects: >=0.17.0

Errors

Common errors & fixes

Failed to resolve import "json-editor-vue" from "src/App.vue". Does the file exist?

The `json-editor-vue` package is not correctly installed, or there's a module resolution issue in your bundler (Vite, Webpack, Nuxt).

fix

Ensure `json-editor-vue` is installed via your package manager (`npm install json-editor-vue` or `yarn add json-editor-vue`). Verify your build tool's configuration for alias resolution and ensure it correctly handles Vue component imports. For Nuxt, ensure it's imported correctly within a Nuxt plugin or component.

[Vue warn]: Failed to resolve component: JsonEditorVue

The `JsonEditorVue` component was not successfully imported or registered in your Vue application before being used in the template.

fix

Confirm that `import JsonEditorVue from 'json-editor-vue'` is present at the top of your script. If using the Options API, ensure it's listed in the `components` option. For `<script setup>`, the import statement is sufficient for local registration.

Property 'Mode' does not exist on type 'typeof import("json-editor-vue")'

Attempting to access or import the `Mode` enum directly from `json-editor-vue` after its removal in v0.15.0.

fix

Update your import statement to `import type { Mode } from 'vanilla-jsoneditor';` to correctly access the `Mode` type from its new location.

Upgrade

Version history

0.18.1latest on npm

Audit

Dependencies

vuerequiredVue framework dependency, supports versions 2 and 3.

@vue/composition-apioptionalRequired for Vue 2 projects to enable Composition API features. Not needed for Vue 3.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/cloydlau/json-editor-vue ↗

packagehttps://www.npmjs.com/package/json-editor-vue ↗

homepagehttps://json-editor-vue.jd1378.dev ↗