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