@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

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

Hooks

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