react

@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