---
title: "vue-json-editor — visual JSON editor for Vue apps"
description: "Drop-in Vue component for visually editing JSON. Tree view, type-aware inline editing, no schema lock-in. Open-source."
url: https://symonov.com/projects/vue-json-editor/
---

# vue-json-editor

Visual JSON editor as a Vue component. Tree view, inline editing, type-safe.

**2025** · by **Dmytro Symonov** · shipped · `vue` `typescript` `oss`

[docs](https://kassaila.github.io/vue-json-editor/) [github ↗](https://github.com/Kassaila/vue-json-editor) [npm ↗](https://www.npmjs.com/package/@kassaila/vue-json-editor)

## the problem

Web admin UIs frequently need to expose raw JSON (config blobs, request payloads, RPC bodies) in a way that is editable but not error-prone. Plain `<textarea>` plus `JSON.parse` is a guaranteed support ticket; full schema-driven editors (Monaco / Ajv-based) are heavy and require a schema even when the data is genuinely free-form.

## the approach

A focused Vue component that renders any JSON value as a collapsible tree with type-aware inline editing — toggle booleans, edit numbers/strings in place, add/remove keys with the keyboard. Two-way bound via v-model; emits structured change events for downstream validation.

## stack

- Vue 3 + Composition API
- TypeScript
- Vite library build, demo on GitHub Pages

## links — external resources

- docs: [https://kassaila.github.io/vue-json-editor/](https://kassaila.github.io/vue-json-editor/)
- github: [https://github.com/Kassaila/vue-json-editor](https://github.com/Kassaila/vue-json-editor)
- npm: [https://www.npmjs.com/package/@kassaila/vue-json-editor](https://www.npmjs.com/package/@kassaila/vue-json-editor)