svelte-jsoneditor

A web-based tool to view, edit, format, transform, and validate JSON. The library is written with Svelte but can also be used in plain JavaScript and other frameworks like React, Vue, Angular, etc.

Key Features

• View and edit JSON with low-level text editing or high-level tree/table views
• Format, compact, sort, filter, and transform JSON
• JSON schema validation and custom validation
• Color highlighting, undo/redo, search and replace
• Handles large JSON documents up to 512 MB

Target Audience

Developers working with JSON data who need a versatile editor with features like validation, transformation, and multi-mode editing (text/tree/table).

Svelte Support

The library is built with Svelte and provides first-class Svelte integration, including two-way binding (bind:json). It also offers a vanilla JavaScript version (vanilla-jsoneditor) for use in other frameworks.

Notable Capabilities

• Multi-mode editing: Switch between tree, text, and table views
• Customizable rendering: Modify how values are displayed using onRenderValue
• Query languages: Supports JSONQuery, JMESPath, JSONPath, and JavaScript for transformations
• Styling: Customizable themes (including dark mode) via CSS variables

Example Use Cases

• Editing configuration files
• Debugging API responses
• Transforming JSON data with queries
• Validating JSON against schemas

For more details, visit the demo site or explore the GitHub repository.