vanilla-jsoneditor

vanilla-jsoneditor is the framework-agnostic build of svelte-jsoneditor, a web-based tool to view, edit, format, transform, and validate JSON. It combines a low-level text editor with high-level tree and table views, so users can work with JSON however suits the task, and it can be dropped into vanilla JavaScript or any framework such as React, Vue, Angular, or SolidJS.

Built on CodeMirror, it offers color highlighting, undo/redo, search and replace, JSON schema validation with pluggable custom validators, and query and transform tools powered by JSONQuery, JMESPath, and JSONPath. It repairs malformed JSON, handles documents up to 512 MB, and ships handy utilities like a color picker and timestamp tags.

What You Get

• A single createJSONEditor entry point usable in vanilla JS, React, Vue, Angular, or SolidJS
• Text, tree, and table editing modes for the same JSON document
• JSON schema validation with support for pluggable custom validators
• Query, filter, sort, and transform tools via JSONQuery, JMESPath, and JSONPath
• JSON repair, format/compact, search and replace, undo/redo, and a standalone browser bundle

Common Use Cases

• Embedding a rich JSON editor into an admin panel or internal tool
• Letting users view and edit configuration or API payloads with schema validation
• Exploring, querying, and transforming large JSON documents in the browser

Under The Hood

Architecture - The editor is authored as Svelte components under src/lib/components with the core logic in src/lib/logic and plugins in src/lib/plugins. Two entry points are built from the same source: src/lib/index.ts for the Svelte package and src/lib/index-vanilla.ts, which wraps the Svelte component in a createJSONEditor factory so it can be mounted imperatively from any framework. Rollup configs (rollup.config.vanilla-library.js, vanilla-bundle, vanilla-types) produce the ES library, a standalone browser bundle, and TypeScript types.

Tech Stack - TypeScript and Svelte with SCSS styling, built via Vite and Rollup. The editing surface is powered by CodeMirror 6 (state, view, lang-json, lint, search, autocomplete), with Ajv for schema validation, jsonrepair for fixing malformed input, immutable-json-patch for edits, and JSONQuery/JMESPath/jsonpath-plus for querying. Utilities include lodash-es, vanilla-picker, and svelte-select.

Code Quality - The project uses Vitest (vitest.config.js) for testing, ESLint (flat config) for linting, and strong typing throughout, with generated type declarations shipped for consumers. It is a mature, single-maintainer-led project with 26 contributors; recent development activity has slowed but the codebase is well-organized into logic, components, and plugins.

API Design - Integration is deliberately simple: import createJSONEditor, pass a target element and options, and call methods like update, set, and get on the returned instance. The same options object drives all three edit modes and validation, and a standalone.js bundle removes the need for a build step, though the large dependency set means the bundled build can be sizable if not deduplicated.