@visual-json/react

React 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/react @visual-json/core

Peer dependency: React 18 or 19.

Quick start

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

import { useState } from "react";
import { JsonEditor } from "@visual-json/react";

function App() {
  const [value, setValue] = useState({ hello: "world" });
  return <JsonEditor value={value} onChange={setValue} />;
}

Props

Prop	Type	Description
`value`	`JsonValue`	Controlled JSON value
`defaultValue`	`JsonValue`	Uncontrolled initial value
`onChange`	`(value: JsonValue) => void`	Change callback
`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
`className` / `style`	—	Standard container styling

Composable API

For full control, use the lower-level primitives:

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

function CustomEditor({ value, onChange }) {
  return (
    <VisualJson value={value} onChange={onChange}>
      <SearchBar />
      <TreeView />
      <FormView />
    </VisualJson>
  );
}

Components

Component	Description
`VisualJson`	Context provider — manages tree state, history, and search
`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

Hooks

Hook	Description
`useStudio()`	Access `state` and `actions` from the nearest `VisualJson` provider

Theming

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

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

See the default variable list for all available tokens.

License

Apache-2.0