visual-json
Getting StartedCore APIReact ComponentsVue ComponentsChangelog

Getting Started

visual-json is the visual JSON editor. Schema-aware, embeddable, extensible. It provides tree view, form view, diff view, and raw editing modes — all powered by a headless core library with React and Vue components.

Packages

visual-json is split into focused packages:

PackageDescription
@visual-json/coreHeadless tree model, operations, schema resolution, diffing, search, and validation
@visual-json/reactReact UI components — TreeView, FormView, DiffView, and more
@visual-json/vueVue 3 UI components — TreeView, FormView, DiffView, and more
@visual-json/vscodeVS Code extension — open any JSON/JSONC file with a visual editor

Installation

Install the core library and your framework's components:

# React
npm install @visual-json/core @visual-json/react

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

Quick Start (React)

Wrap your UI in the VisualJson provider, then use any combination of the built-in components:

import { VisualJson, TreeView, FormView } from "@visual-json/react";
import { useState } from "react";

function Editor() {
  const [value, setValue] = useState({ hello: "world" });

  return (
    <VisualJson value={value} onChange={setValue}>
      <div style={{ display: "flex", gap: 16 }}>
        <TreeView />
        <FormView />
      </div>
    </VisualJson>
  );
}

Quick Start (Vue)

Same pattern — the VisualJson component provides state to all child components:

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

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

<template>
  <VisualJson :value="value" @change="value = $event">
    <div style="display: flex; gap: 16px">
      <TreeView />
      <FormView />
    </div>
  </VisualJson>
</template>

The VisualJson component manages all internal state — tree structure, selection, expand/collapse, undo/redo, search, and schema. Child components read from and write to this shared context automatically.

View Modes

visual-json supports multiple ways to view and edit your data:

  • Tree View — Hierarchical tree with expand/collapse, drag-and-drop reordering, keyboard navigation, and context menus
  • Form View — Schema-aware form editor with descriptions, required fields, and enum dropdowns
  • Diff View — Side-by-side comparison of original vs. edited JSON, with color-coded additions, removals, and changes
  • Raw View — Direct text editing of the underlying JSON

VS Code Extension

visual-json is also available as a VS Code extension. Open any .json or .jsonc file, right-click the tab, and choose "Open With..." > "visual-json" to use the visual editor.

The extension includes a tree sidebar, form editor, schema support (auto-detected from $schema or known filenames like package.json and tsconfig.json), and adapts to your VS Code theme colors automatically.

Next Steps