# json-editor-vue: a JSON editor that works in Vue 2, Vue 3 and SSR > json-editor-vue is an isomorphic JSON editor, viewer, formatter and validator for Vue, offering text, tree and table modes, JSON Schema validation, BigInt support and a 512 MB document ceiling, with the same component working under Nuxt 2, 3 and 4 and in microfrontend setups. The published bundle is large for what it does, and that is the trade a team should look at first. **cloydlau/json-editor-vue** — Vue 2/3 isomorphic JSON editor, viewer, formatter and validator. - Repository: https://github.com/cloydlau/json-editor-vue - Website: https://cloydlau.github.io/playground/json-editor-vue/ - Stars: 695 · Forks: 35 - Language: TypeScript - License: MIT - Published: 2026-10-21 · Updated: 2026-10-21 · Language: en - Canonical page: https://hysenlabs.com/projects/cloydlau-json-editor-vue ## One component, three editing modes, and the same code on both Vue majors json-editor-vue is a Vue 2 and Vue 3 isomorphic JSON editor, viewer, formatter and validator, written in TypeScript. The word isomorphic is the load bearing part of that description: the same component is expected to render on a server and hydrate on a client. The feature list is broad but the structure is simple. There are three edit modes, text mode, tree mode and table mode, and the readme shows the text and tree views side by side. Two themes are provided, a light theme and a dark theme. Two-way binding works over either a parsed JSON object or a stringified one, and there is a section of the documentation dedicated to that distinction, which is the part that decides how you wire the component to your store. The data type coverage is wider than most editors offer. Seven primitive data types are supported, including BigInt and Symbol, which means a document containing large integers or a symbol key does not have to be mangled by a round trip through JSON.parse before it reaches the editor. The operations listed for the component cover viewing, editing, formatting, validating, compacting, sorting, querying, filtering, transforming, repairing and highlighting. That list is long enough that the practical question is which of them you would otherwise implement yourself in a textarea, because for a plain read and write case a textarea with JSON.parse is genuinely enough. The build is a Vite and tsup setup with Vitest for tests, a VitePress documentation site, and the package is published to npm as json-editor-vue and to JSR under the @cloydlau scope. ## The performance claim comes from a different parser, not a faster editor The performance story has two parts and it is worth separating them. The first is document size. The readme states the component handles JSON documents up to 512 MB, and the tree and table views are what make that number meaningful, since a tree view of a huge document is the case that usually falls over. The second is deserialization, and here the mechanism is specific. Documents are deserialized with destr by default, and the readme claims that is up to 35.96x faster than JSON.parse. destr is a hardened JSON parse from the unjs ecosystem, so the number is not about the editor at all, it is about the first step of getting data into the component. That distinction matters when you read the claim. A 35.96x speedup on parsing says nothing about how fast the tree view re-renders as the user types, and for an editor component the re-render path is usually the bottleneck, not the initial parse. The readme does not publish a rendering benchmark, and the coverage badge and the minzipped size badge are the only quantitative signals in the readme besides the parse figure. So the honest reading is: the ceiling on document size is documented, the parser is genuinely faster, and the editing performance of the tree view is asserted rather than measured. A team with a hundred kilobyte configuration file will not feel any of this, and a team with a multi megabyte document should measure it themselves. ## Where the bytes go, and the 334 kB badge The minzipped size badge in the readme reads 334 kB, and that is the number to look at before anything else. Three features explain it. Validation is included, and the keywords in the package manifest list ajv, so the component ships a JSON Schema validator rather than delegating to one you provide. The theme support and the transform and query operations add code. And the component is built to work in Vue 2 and Vue 3 at the same time, which means the vue-demi compatibility layer and both build targets are in the artifact. The package manifest shows the distribution shape. There is an ES module build, a UMD build, and separate declaration files for each, with the ESM and UMD entry points exposed through the exports map, and the wildcard subpath export means you can import internal pieces directly. The published files are dist, docs and nuxt.ts, and the unpkg and jsdelivr fields point at the UMD build for script tag usage. The Nuxt module is shipped as a separate file, nuxt.ts, which is how the Nuxt 2, 3 and 4 support is delivered, and the source of that integration is visible in the repository root rather than hidden in a build step. For a component that most teams will use on a handful of admin screens, 334 kB minzipped is defensible. For a component that ends up on a public marketing page, it is not, and the read only case is where the bundle really does matter. ## Where the package comes from and what it ships There is no install command to copy, because the readme points you at the published packages rather than at a script. The component is on npm as json-editor-vue and on JSR under the @cloydlau scope, and the readme links a live playground where you can try the modes before installing anything. The package manifest shows what the published artifact contains. The entry points cover both module systems, with a separate declaration file for each: ```json "main": "./dist/json-editor-vue.umd.js", "module": "./dist/json-editor-vue.mjs", "unpkg": "./dist/json-editor-vue.umd.js", "jsdelivr": "./dist/json-editor-vue.umd.js", "types": "./dist/json-editor-vue.d.ts", ``` That set of fields is what tells you a script tag, a bundler import and a CDN URL all resolve to a working build, and the wildcard export in the manifest means you can also reach into subpaths of the package directly if you need a specific piece. Two smaller publishing details are worth knowing. The manifest names the package json-editor-vue with a PascalCasedName of JsonEditorVue, which is what you use as the component name when registering it locally. And the published files are dist, docs and nuxt.ts, so the Nuxt module and the documentation travel with the package. The readme also carries a JSR scope badge, so the same library is consumable from a JSR based toolchain, and a StackBlitz badge for opening a pull request preview in the browser without a local checkout. ## Registration is local or global, and the demos show the matrix The component can be registered and configured locally, or globally through vue-global-config, which is the maintainer's own package. The global path is what lets you set a default schema, a default theme or a default mode once for an application, which is the difference between a component you can drop into twenty screens and one you reconfigure in twenty places. The demo directory in the repository is the most useful documentation in the project, because it is a matrix rather than a prose description. There are separate demos for Vue 2.6, Vue 2.7 and Vue 3, for Nuxt 2 with Vue 2.6, Nuxt 2 with Vue 2.7 and Nuxt 3, for Vue CLI 2, 3, 4 and 5, and one for wujie, which is the Chinese microfrontend runtime. That last one is a good signal about the scope, because microfrontend support is not a feature most component libraries bother with. The other environments named as supported are Vite, Vue CLI, webpack and CDN usage, plus PC and mobile devices. The Nuxt 2 demo tells you the library is careful about not breaking older setups that still exist inside organisations. The type surface is maintained as well, with an are the types wrong badge in the readme, a typegen script that runs tsup with dts-only to produce declaration files, and a separate test:types script that runs Vitest in typecheck only mode. ## What the CI signals say about the project A few details in the readme tell you how the project is run, and they are worth reading because they are the difference between a hobby component and one you can depend on. The coverage badge reads 100 percent, and the scripts confirm it is measured rather than asserted, with a test:coverage script running Vitest with coverage and a separate script that updates the coverage numbers in the documentation. The test suite itself is Vitest, with watch, UI and typecheck modes alongside the plain run. The release process is automated. The readme carries badges for Conventional Commits, semantic-release, and the code style comes from the antfu eslint config, with the corresponding eslint.config.mjs in the repository root. A commitlint.config.mjs and a pnpm workspace with a pnpm-lock.yaml and pnpm-workspace.yaml make up the tooling, and there is a jsr.json for the JSR publication, plus a .fossa.yml for licence scanning. The versions tell their own story. v0.19.0, v0.19.1 and v0.19.2 came in July and August 2026, with v0.19.0 and v0.19.1 published on the same day, which is the pattern of a project iterating quickly on small fixes rather than shipping big features. The package version in the manifest is 0.19.2, matching the latest release, and the last push was on 2026-08-24. The zero version number is worth noting for a dependency decision. The project is pre 1.0, which in practice means minor versions can carry breaking changes under semantic release conventions, and the readme does not make a stability promise about the API surface the way some libraries do. ## The alternative is usually a viewer, and the choice depends on the task There are two real alternatives, and they suit different tasks. The first is a read only JSON viewer. The package keywords list vue-json-pretty and vue-json-viewer, and either would render a document in a fraction of the bundle, with none of the editing, validation or transformation machinery. If the requirement is to show a payload on a details page, that is the right choice and this component is overbuilt for it. The second is a full JSON editor of the kind the readme is clearly positioned against, with a tree view, schema validation, a text view and formatting. The difference in approach is in how much of the editing surface lives in the library rather than in your code. A general purpose editor gives you a component with a rich API, a large dependency footprint and a bundle you did not choose, while a hand rolled textarea plus JSON.parse plus a schema validator library gives you exactly what you need at a fraction of the size and with none of the tree view. The middle path that many teams end up on is a read only viewer for display and a plain textarea for editing, which is roughly what a text mode gives you without the rest of the component. So the honest framing is that json-editor-vue earns its size when the user genuinely needs to navigate and edit a document in a tree or table, especially with schema validation and a large file. If the user is pasting a small config into a form, the alternatives are smaller and simpler. ## Conclusion Adopt json-editor-vue if you need a JSON editing surface inside a Vue application, especially an admin panel, a configuration tool or a debug view, and you need the same component to work in Vue 2 and Vue 3, under Nuxt, or inside a microfrontend. Do not adopt it if bundle size is a hard constraint, since the minzipped size badge reads 334 kB, or if you only need to display a JSON payload, where a read only viewer is a smaller dependency. Before you commit, install it in the one project where you care most about startup cost, measure the bundle delta yourself, and confirm the schema validation you need is the Ajv based validation the component ships rather than a custom rule set. ## FAQ ### Does json-editor-vue work with both Vue 2 and Vue 3? Yes, it is described as a Vue 2.6, 2.7 and 3 isomorphic library, and the repository carries separate demos for each of those versions plus Nuxt 2 and Nuxt 3, so the same component is expected to render on a server and hydrate on a client. ### What are the editing modes in json-editor-vue? There are three, text mode, tree mode and table mode, along with a light and a dark theme. The component also supports viewing, formatting, validating, compacting, sorting, querying, filtering, transforming, repairing and highlighting JSON, plus two-way binding over either parsed or stringified JSON. ### How large is the json-editor-vue package? The minzipped size badge in the readme reads 334 kB. The weight comes from the included Ajv based schema validation, the theme and transformation support, and the requirement to build for both Vue 2 and Vue 3, which the package manifest shows through separate ESM and UMD outputs. ### Does json-editor-vue support schema validation? Yes, validation is one of the listed operations, and the package keywords include ajv, indicating that the Ajv validator is bundled rather than supplied by the consumer. ### How is json-editor-vue installed and registered? It is published on npm as json-editor-vue and on JSR under the @cloydlau scope, with a Nuxt module shipped as nuxt.ts. It can be registered and configured locally or globally through the maintainer's vue-global-config package, and the repository holds a demo directory covering Vue 2.6, 2.7, 3, Nuxt 2 and 3, Vue CLI 2 to 5 and wujie microfrontends. ## Sources - [cloydlau/json-editor-vue on GitHub](https://github.com/cloydlau/json-editor-vue) - [License: MIT](https://github.com/cloydlau/json-editor-vue/blob/main/LICENSE) - [Project website](https://cloydlau.github.io/playground/json-editor-vue/) - [README](https://github.com/cloydlau/json-editor-vue/blob/main/README.md) - [Releases](https://github.com/cloydlau/json-editor-vue/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/cloydlau-json-editor-vue