# visual-json

> Open-source, schema-aware visual editor for JSON and YAML structures.

visual-json is a developer tool and UI component library created by Vercel Labs for viewing and editing JSON and YAML data through an interactive tree. It replaces raw text manipulation with inline row editing, breadcrumb navigation for nested paths, and drag-and-drop reordering. The project is modular, offering headless models, web framework bindings (React, Svelte, Vue), and a dedicated VS Code extension.

Website: https://github.com/vercel-labs/visual-json

## What it is for

- Edit configuration files like package.json without syntax errors
- Navigate deeply nested JSON schemas using breadcrumb and tree drilldowns
- Embed interactive JSON or YAML editing into custom React, Vue, or Svelte dashboards
- Reorder complex array entries via drag-and-drop instead of cut-and-paste

## Features

- Two-pane visual editing layout with tree view and key-value forms
- Breadcrumb navigation for drilling into deeply nested object paths
- Schema awareness to guide and validate data input
- Drag-and-drop reordering of list elements and properties
- Support for JSON, JSONC, and YAML files
- Component bindings for React, Svelte 5, and Vue
- Available as a VS Code extension and an embeddable headless core

## Pricing

Open source. Free (Apache-2.0 license)

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [Developer Tools](https://xiry.app/topics/development/developer-tools.md)
- Open source: yes
- Platforms: Web, Code library, Browser extension
- For: Developers and technical users managing JSON or YAML configuration files.
- Alternative to: JSON Editor Online, VS Code built-in JSON editor
- Tags: json, yaml, editor, vscode extension, developer tools, ui components

## Why it was saved

- [@ctatedev, 21 February 2026](https://x.com/ctatedev/status/2025041118937620913): A nicer way to view and edit JSON (e.g. package.json) without raw text editing — inline editing of values, collapsible tree navigation, drag-and-drop reordering.

## Related

- [react-best-practices](https://xiry.app/resources/react-best-practices): Curated React performance rules and coding-agent skills by Vercel (GitHub repo, Open source)
- [Agentation](https://xiry.app/resources/agentation): Connects AI coding agents to browser annotations for automated UI reviews (Web app, Open source)
- [claude-office-skills](https://xiry.app/resources/claude-office-skills): Office document creation and editing skills for Claude Code CLI. (GitHub repo, Open source)
- [Domain SDK](https://xiry.app/resources/domain-sdk): TypeScript SDK for adding and managing custom customer domains across platforms (GitHub repo, Open source)
- [ECC](https://xiry.app/resources/ecc): Agent harness optimization system with skills, hooks, and configs for coding agents (GitHub repo, Open source)
- [Eight Dev Tools, Zero Fluff — Part 6](https://xiry.app/resources/eight-dev-tools-zero-fluff-part-6): Curated list of eight front-end design and developer utility tools (List)

Updated 10 October 2026. Page: https://xiry.app/resources/visual-json

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.