JSON Editor Vue

0.18.1 · active · verified Sun Apr 19

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.

Common errors

```
Failed to resolve import "json-editor-vue" from "src/App.vue". Does the file exist?
```
cause 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
```
cause 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")'
```
cause 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.

Warnings

breaking In 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.
breaking The `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';`.
gotcha The 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'`.
gotcha This 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.

Install

npm install json-editor-vue npm
yarn add json-editor-vue yarn
pnpm add json-editor-vue pnpm

Imports

JsonEditorVue
wrong:
```
import { JsonEditorVue } from 'json-editor-vue'
```
correct:
```
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
wrong:
```
import { Mode } from 'json-editor-vue'
```
correct:
```
import type { Mode } from 'vanilla-jsoneditor'
```
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.

Quickstart

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.

<!-- MyJsonEditorComponent.vue -->
<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>

view raw JSON →