@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

Events

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

Composables

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