Visual JSON
https://github.com/vercel-labs/visual-json- Category
- Developer Tools
- Rank
- No. 789Tools index
- Pricing
- Open Source
- Type
- TOOL
- Use case
- Coding
- Interfaces
- SDK
- Builder
- vercel-labs
- GitHub
- 951 stars
- Latest release
- v0.4.0
- Date
About
Schema-aware visual JSON editor that you can embed and extend. Edit complex configs in a tree view without writing UI from scratch.
What it does
Visual JSON is a small toolkit for turning JSON or YAML data into an editable tree that people can browse and change without touching raw text. A framework-neutral core handles parsing, mutating, validating and diffing the data, while separate component sets plug that core into React, Vue or Svelte apps. A VS Code extension applies the same idea inside the editor, replacing a flat file view with a collapsible tree and a form.
Why it's ranked here
This is an Apache-2.0 licensed project with real architecture behind it, not just a demo: the core separates data operations from rendering, returns new state on every edit for clean undo and redo, and now covers three UI frameworks plus a VS Code extension. It carries a Labs banner, and the extension is marked beta, so treat the newest surfaces as less proven than the core.
What's good
The editing model is genuinely reusable: every operation returns a new tree with structural sharing, so undo, redo and diffing come for free instead of being bolted on later. Schema resolution, per-node validation and full-text search are part of the core, not left to each framework wrapper. React, Vue and Svelte all get matching components, so switching frameworks does not mean losing features. YAML edits run through the same tree and validation logic as JSON.
Tradeoffs
The VS Code extension is marked beta, so it is the least battle-tested surface. Shared logic behind the tree and form views for each framework lives in an internal package that is not published, meaning you cannot reuse those pieces directly if you want a framework the project does not already support. Releases follow a manual, single-PR process with no changeset automation, so shipping a change to any package waits on a maintainer bumping and syncing versions by hand.
How to use it well
Reach for this when you are building an admin panel or settings UI that lets people edit JSON or YAML configuration by hand, especially formats like GitHub Actions workflows, Docker Compose files, or Home Assistant configs that the schema detector already recognizes. Pull in the component package matching your framework and let the core handle validation and diffing. Outside React, Vue, or Svelte, the headless core package still works, you would just write your own thin UI on top. Use the VS Code extension for quick file review, not as your only editing path yet, given its beta status.
Technical notes+
The core package's index.ts exports a functional API: fromJson and toJson convert between plain values and a TreeState, and operations like setValue, setKey, addProperty, insertNode, removeNode, moveNode, reorderChildren and changeType each return a new TreeState via structural sharing rather than mutating in place, per the core package's own README. Schema handling (resolveSchema, getPropertySchema, validateNode) and search or diff (searchNodes, computeDiff) live in the same package. The VS Code extension (apps/vscode/src/extension.ts) registers a custom editor provider and a webview panel provider and activates on json, jsonc and yaml-like language IDs. Framework packages for React, Svelte and Vue (each package's own index.ts) each export matching TreeView, FormView, DiffView, SearchBar, Breadcrumbs and ContextMenu components, with the React and Vue packages pulling shared helpers from an internal @internal/ui package. AGENTS.md documents a manual release process: bump the core package version, run a version-sync script, and update the changelog before merging, at which point CI publishes all @visual-json packages together. The workspace (package.json, pnpm-workspace.yaml, turbo.json) uses pnpm and Turborepo, with vitest configured as the test runner.
Observed
- License
- Apache-2.0
- Language
- TypeScript
- Packaging
- Published to npm as scoped packages under @visual-json (core, react, svelte, vue, yaml)
- Interfaces
- Headless library plus framework component sets for React, Vue, and Svelte, and a VS Code extension
- Data formats
- JSON and YAML, handled through the same tree model
- Monorepo tooling
- pnpm workspaces with Turborepo for builds
- Test runner
- Vitest, configured at the workspace root
- VS Code extension status
- Described as Beta in its extension manifest
Read from README.md, package.json, packages/@visual-json/core/src/index.ts, packages/@visual-json/core/README.md, packages/@visual-json/react/src/index.ts, packages/@visual-json/svelte/src/index.ts, packages/@visual-json/vue/src/index.ts, packages/@visual-json/yaml/src/index.ts, apps/vscode/src/extension.ts, apps/vscode/package.json, AGENTS.md, CHANGELOG.md, LICENSE, pnpm-workspace.yaml, turbo.json.
What it can do
Edit JSON data in visual tree format
JSON data → Modified JSON data
Validate JSON against schema
JSON data and JSON schema → Validation results and error messages
Generate tree view interface from JSON schema
JSON schema definition → Interactive tree-based editor interface
Embed JSON editor in existing application
Host application and configuration settings → Integrated JSON editing component
Edit complex configuration files visually
Configuration files in JSON format → Updated configuration files
Navigate nested JSON structures
Multi-level JSON objects and arrays → Expandable/collapsible tree navigation
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.