@visual-json/vue

Vue 3 components for visual-json — the visual JSON editor. Schema-aware, embeddable, extensible.
3,339
vue editor json tree visual
Install
npm install @visual-json/vue
Latest Version:0.4.0
Vue:3
License:Apache-2.0
Last Updated:Apr 8, 2026
Links: npm
Maintainer: ctate

@visual-json/vue

Vue 3 UI components for visual-json — the visual JSON editor. Schema-aware, embeddable, extensible.

Tree view, form view, diff view, search, breadcrumbs, and more — all themeable via CSS custom properties.

Install

npm install @visual-json/vue @visual-json/core

Peer dependency: Vue 3.3 or later.

Quick start

JsonEditor is the batteries-included component — it bundles a tree sidebar, form editor, search bar, and keyboard navigation.

<script setup>
import { ref } from "vue";
import { JsonEditor } from "@visual-json/vue";

const value = ref({ hello: "world" });
</script>

<template>
  <JsonEditor :value="value" @change="value = $event" />
</template>

Props

Prop Type Description
value JsonValue Controlled JSON value
defaultValue JsonValue Uncontrolled initial value
schema JsonSchema | null Optional JSON Schema for validation and hints
readOnly boolean Disable editing
sidebarOpen boolean Show/hide tree sidebar
treeShowValues boolean Display values in tree nodes
treeShowCounts boolean Display child counts in tree nodes
editorShowDescriptions boolean Show schema descriptions in the form
editorShowCounts boolean Show child counts in the form
height / width string | number Container dimensions
style Record<string, string> CSS custom property overrides

Events

Event Payload Description
change JsonValue Emitted when the data changes

Composable API

For full control, use the lower-level primitives:

<script setup>
import { VisualJson, TreeView, FormView, SearchBar } from "@visual-json/vue";
</script>

<template>
  <VisualJson :value="json" @change="onJsonChange">
    <SearchBar />
    <TreeView />
    <FormView />
  </VisualJson>
</template>

Components

Component Description
VisualJson Provider — manages tree state, history, and search via provide/inject
TreeView Collapsible tree with drag-and-drop, keyboard nav, and context menu
FormView Inline key/value editor with schema-aware inputs
DiffView Side-by-side structural diff between two JSON values
SearchBar Cmd+F search with match navigation
Breadcrumbs Path breadcrumbs with typeahead navigation
ContextMenu Right-click menu for tree operations (uses <Teleport>)

Composables

Composable Description
useStudio() Access state and actions from the nearest VisualJson provider
useDragDrop() Drag-and-drop state and handlers for tree reordering

Theming

All components read CSS custom properties for colors, fonts, and spacing. Override them via the style prop or on a parent element:

<JsonEditor
  :value="data"
  :style="{
    '--vj-bg': '#ffffff',
    '--vj-text': '#111111',
    '--vj-border': '#e5e5e5',
    '--vj-accent': '#2563eb',
    '--vj-font': '\'Fira Code\', monospace',
  }"
  @change="data = $event"
/>

See the default variable list for all available tokens.

License

Apache-2.0

Related Packages

jsonschema-builder-vue

Vue 3 Visual JSON Schema editor for creating and manipulating JSON Schema defini...

3,441 5
editor json visual vue schema
@fett/jsonschema-editor

Vue 3 Visual JSON Schema editor for creating and manipulating JSON Schema defini...

163
editor json visual vue schema
vue-json-tree

Vue component that renders JSON data in a collapsible tree structure.

141,887 50
json tree vue
json-tree-view-vue3

JSON tree rendering Vue3 component

110,063 39
json tree vue3
@ctechhindi/vue3-json-viewer

A modern, sleek Vue 3 JSON viewer component with tree and text modes

12,436 11
editor json tree vue composition-api typescript viewer vue3

Version History

Version Released Vue License
0.4.0 ^3.3.0 Apache-2.0
0.3.1 ^3.3.0 Apache-2.0
0.3.0 ^3.3.0 Apache-2.0