@kbmjj123/json-editor

@kbmjj123/json-editor

A framework-agnostic JSON editor for the web: CodeMirror 6 editing, live validation with error-line location, format/minify, and a searchable read-only tree view. Use it as a Vue 3 component, a custom element (<json-editor>), or a plain script tag from a CDN.

All processing happens in the browser — your JSON never leaves the device.

• Demo / playground
• Package source

Features

• CodeMirror 6 editor with JSON syntax highlighting, line numbers and error line highlighting.
• Live validation — reports parse errors with line/column location and a one-click jump to the error line.
• Format / minify toolbar actions.
• Read-only tree view — collapse/expand, search keys and values, copy path, JSONPath or value.
• Three view modes — editor only, tree only, or split side-by-side.
• Light / dark / auto theming via CSS custom properties.
• Zero runtime dependencies for the CDN bundle (Vue + CodeMirror are bundled).
• Small Vue peer-dependency footprint for the npm build.
• Optional attribution badge (attribution prop) to help visitors find the original project — default is off.

Install

npm / pnpm / yarn

npm install @kbmjj123/json-editor
# or
pnpm add @kbmjj123/json-editor

Peer dependencies (Vue 3 + CodeMirror 6 packages) must be installed by the consumer:

npm install vue @codemirror/commands @codemirror/lang-json @codemirror/language @codemirror/state @codemirror/view @lezer/highlight

CDN / script tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kbmjj123/json-editor@latest/dist/json-editor.iife.css">
<script src="https://cdn.jsdelivr.net/npm/@kbmjj123/json-editor@latest/dist/json-editor.iife.js"></script>

<json-editor
  value='{"hello": "world"}'
  view="both"
  theme="light"
></json-editor>

The CDN build is also available on unpkg and can be submitted to cdnjs.

Usage

Vue 3

<script setup lang="ts">
import { ref } from 'vue'
import JsonEditor from '@kbmjj123/json-editor'
import '@kbmjj123/json-editor/style.css'

const value = ref('{"name": "JSON Toolbox"}')
</script>

<template>
  <JsonEditor
    v-model="value"
    v-model:view="view"
    theme="dark"
    locale="en"
    height="400px"
  />
</template>

Props

Events

The custom element emits the same information as DOM events — input, error, select — with the payload on event.detail.

Web Component / custom element

Register manually if you do not use the CDN bundle (which auto-registers):

import { registerJsonEditor } from '@kbmjj123/json-editor/wc'
import '@kbmjj123/json-editor/style.css'

registerJsonEditor()

<json-editor
  value='{"hello": "world"}'
  view="both"
  theme="light"
  height="320px"
></json-editor>

By default the element renders into an open shadow root, so the page CSS cannot leak in. Set use-shadow="false" to render into the light DOM instead.

Imperative API

Useful when you want full control over the host element:

import { defineJsonEditor } from '@kbmjj123/json-editor/wc'
import '@kbmjj123/json-editor/style.css'

const editor = defineJsonEditor(document.getElementById('host'), {
  value: '{"a": 1}',
  view: 'editor',
  theme: 'dark',
})

editor.format()
editor.on('change', (value) => console.log(value))
editor.destroy()

Framework-agnostic core

If you only need JSON utilities, import the core module directly:

import { parseJson, formatJson, buildTree, searchTree } from '@kbmjj123/json-editor/core'

Styling

The component ships with its own CSS and uses the --je-* custom property namespace. Override variables in your own stylesheet:

:root {
  --je-bg: #ffffff;
  --je-fg: #1f2937;
  --je-key: #0451a5;
  --je-string: #a31515;
  --je-number: #098658;
}

Dark mode variables are applied automatically when theme="dark" or when an ancestor has .je-dark.

Backlinks / attribution

If you embed the editor on a public page, enabling the optional attribution badge (attribution prop) is the easiest way to give the project a natural backlink. It is off by default and never added without your consent.

License

MIT