@visual-json/svelte

Svelte 5 UI components for the visual JSON editor. Schema-aware, embeddable, extensible.

Installation

npm install @visual-json/svelte

Usage

Full editor (JsonEditor)

The simplest way to embed a full JSON editor with tree view, form view, search, and breadcrumbs:

<script>
  import { JsonEditor } from "@visual-json/svelte";

  let value = $state({ name: "Alice", age: 30 });
</script>

<JsonEditor {value} onchange={(v) => (value = v)} height="500px" />

Composing individual panels

Use <VisualJson> as a provider and compose <TreeView>, <FormView>, and <SearchBar> manually:

<script>
  import {
    VisualJson,
    TreeView,
    FormView,
    SearchBar,
  } from "@visual-json/svelte";

  let value = $state({});
</script>

<VisualJson {value} onchange={(v) => (value = v)}>
  <SearchBar />
  <div style="display: flex; height: 400px;">
    <TreeView />
    <FormView />
  </div>
</VisualJson>

Schema validation

Pass a JSON Schema to get type-aware editing, enum dropdowns, and required field indicators:

<JsonEditor
  {value}
  schema={{
    type: "object",
    properties: {
      name: { type: "string", title: "Name" },
      age: { type: "number", minimum: 0 },
      role: { type: "string", enum: ["admin", "user", "guest"] },
    },
    required: ["name"],
  }}
  onchange={(v) => (value = v)}
/>

Components

JsonEditor Props

Theming

Override CSS custom properties on a parent element:

.my-editor {
  --vj-bg: #1e1e1e;
  --vj-bg-panel: #252526;
  --vj-bg-hover: #2a2d2e;
  --vj-bg-selected: #094771;
  --vj-text: #cccccc;
  --vj-text-muted: #999999;
  --vj-accent: #007acc;
  --vj-border: #333333;
  --vj-string: #ce9178;
  --vj-number: #b5cea8;
  --vj-boolean: #569cd6;
  --vj-null: #569cd6;
  --vj-font: monospace;
}