React Components

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

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

VisualJson

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

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

<VisualJson value={json} onChange={setJson} schema={schema}>
  {/* child components */}
</VisualJson>

TreeView

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

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

<TreeView className="h-full" />

Utility

getVisibleNodes(root: TreeNode, expandedIds: Set<string>): TreeNode[] returns the flat list of nodes currently visible in the tree.

FormView

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

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

<FormView className="p-4" />

DiffView

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

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

<DiffView originalJson={original} currentJson={current} />

PropertyEditor

Editor panel for the currently selected node. Allows editing the key, value, and type, plus actions like add, remove, copy path, and copy value.

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

<PropertyEditor className="w-80" />

Breadcrumbs

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

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

<Breadcrumbs className="px-2 py-1" />

SearchBar

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

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

<SearchBar className="w-full" />

ContextMenu

Rendered by TreeView on right-click. Can also be used standalone.

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

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

useStudio Hook

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

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

function MyComponent() {
  const { state, actions } = useStudio();

  return (
    <button onClick={() => actions.undo()} disabled={!actions.canUndo}>
      Undo
    </button>
  );
}

State

Actions