Vue Components

@visual-json/vue provides a complete set of Vue 3 components for building visual JSON editors. All components are designed to work together inside a VisualJson provider.

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

Peer dependency: Vue 3.3 or later.

VisualJson

The root provider that manages tree state, selection, expansion, undo/redo, search, and schema. All other components must be rendered inside this provider.

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

<template>
  <VisualJson :value="json" :schema="schema" @change="onJsonChange">
    <!-- child components -->
  </VisualJson>
</template>

Prop	Type	Description
`value`	`JsonValue`	The JSON data to edit
`schema`	`JsonSchema \| null`	Optional JSON Schema for validation and form hints

Event	Payload	Description
`change`	`JsonValue`	Emitted when the data changes

JsonEditor

Batteries-included component — bundles a tree sidebar, form editor, search bar, and responsive layout.

<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>

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

Event	Payload	Description
`change`	`JsonValue`	Emitted when the data changes

TreeView

Hierarchical tree with expand/collapse, drag-and-drop, keyboard navigation, and right-click context menus.

<template>
  <TreeView :show-values="true" :show-counts="false" />
</template>

FormView

Schema-aware form editor. Renders fields with descriptions, required indicators, and enum dropdowns when a schema is provided.

<template>
  <FormView :show-descriptions="true" :show-counts="false" />
</template>

DiffView

Side-by-side comparison of two JSON values with color-coded additions, removals, and changes.

<template>
  <DiffView :original-json="original" :current-json="current" />
</template>

Prop	Type	Description
`originalJson`	`unknown`	The original JSON value
`currentJson`	`unknown`	The current/modified JSON value
`class`	`string`	Optional CSS class

Breadcrumbs

Displays the path to the currently selected node as clickable breadcrumbs.

<template>
  <Breadcrumbs />
</template>

SearchBar

Search input with next/previous navigation. Supports Cmd/Ctrl+F to focus.

<template>
  <SearchBar />
</template>

ContextMenu

Rendered by TreeView on right-click. Can also be used standalone via <Teleport>.

<template>
  <ContextMenu
    :x="100"
    :y="200"
    :items="[
      { label: 'Copy', action: handleCopy },
      { separator: true },
      { label: 'Delete', action: handleDelete },
    ]"
    @close="handleClose"
  />
</template>

useStudio Composable

Access the full studio state and actions from any component inside VisualJson.

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

const { state, actions } = useStudio();
</script>

<template>
  <button :disabled="!state.canUndo.value" @click="actions.undo()">
    Undo
  </button>
</template>

State

Field	Type	Description
`tree`	`Ref<TreeState>`	Current tree state
`selectedNodeId`	`Ref<string \| null>`	Currently selected node
`expandedNodeIds`	`Ref<Set<string>>`	Set of expanded node IDs
`schema`	`Ref<JsonSchema \| null>`	Active JSON Schema
`searchQuery`	`Ref<string>`	Current search query
`searchMatches`	`Ref<SearchMatch[]>`	Search results
`searchMatchIndex`	`Ref<number>`	Index of the active match
`searchMatchNodeIds`	`ComputedRef<Set<string>>`	Node IDs with matches
`canUndo`	`ComputedRef<boolean>`	Whether undo is available
`canRedo`	`ComputedRef<boolean>`	Whether redo is available

Actions

Action	Description
`setTree(state)`	Replace the tree state
`selectNode(id)`	Select a node
`toggleExpand(id)`	Toggle node expansion
`expandNode(id)`	Expand a node
`collapseNode(id)`	Collapse a node
`expandAll()`	Expand all nodes
`collapseAll()`	Collapse all nodes
`undo()`	Undo last change
`redo()`	Redo last undone change
`setSearchQuery(q)`	Update search query
`nextSearchMatch()`	Jump to next match
`prevSearchMatch()`	Jump to previous match

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"
/>