xiry.

Development · Web app

visual-json

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

From the Xiry library · Updated 10 October 2026

Visit github.com ↗

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.

What it's 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
Topic
Developer Tools
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: 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

    Curated React performance rules and coding-agent skills by Vercel

  • Agentation

    Connects AI coding agents to browser annotations for automated UI reviews

  • claude-office-skills

    Office document creation and editing skills for Claude Code CLI.

  • Domain SDK

    TypeScript SDK for adding and managing custom customer domains across platforms

  • ECC

    Agent harness optimization system with skills, hooks, and configs for coding agents

  • Eight Dev Tools, Zero Fluff — Part 6

    Curated list of eight front-end design and developer utility tools

All 13 in Developer Tools →

Updated