josdejong/jsoneditor

This system is a JavaScript library for editing and viewing JSON data, featuring multiple interface modes such as tree, form, code, and text. It provides advanced capabilities including JSON schema validation, dynamic autocomplete, and customizable theming with support for dark modes. The library is designed for flexible integration, offering examples for React, Require.js, and vanilla JavaScript, while leveraging the Ace editor for its underlying text editing engine.

7 changes.

The project underwent a significant architectural overhaul, introducing a modern build pipeline with Gulp, Webpack, and Babel while restructuring the source code into modular components and mixins. Legacy files and HTML previews were removed to focus on the library core, and comprehensive unit tests were added to ensure the reliability of schema resolution and autocomplete features. The period also saw the expansion of browser-based examples to demonstrate advanced API capabilities and the upgrade of key dependencies like React and Babel.

8 changes.

This period focused on improving the JSON Editor's integration capabilities by supporting external Ace instances and adding React demo examples, while resolving bundling issues for dependencies like jsonlint and Selectr. Concurrently, the project modernized its styling architecture by refactoring SCSS to use the @use directive and introduced new theming options, including a dark theme example.

A new demo application has been added to the examples/requirejs\_demo directory to demonstrate how to integrate JSONEditor using Require.js. The entry point (requirejs\_demo.html) loads the Require.js library and configures a main script (scripts/main.js) that dynamically loads the JSONEditor module from the dist folder, initializes the editor in a container, and provides buttons to set and retrieve JSON data.

_examples/requirejs\demo · high confidence

A new CSS file (examples/css/darktheme.css) has been added to provide a dark color scheme for the JSON editor. This example demonstrates how to customize the appearance of the editor's tree mode, including specific colors for strings, numbers, booleans, and other JSON value types, as well as styling for menus, search results, and interactive states.

examples/css · high confidence

Added two new Create React App-based examples in the \examples/react\_demo\ and \examples/react\_advanced\_demo\ directories. The basic demo (\react\_demo\) provides a simple integration of the JSONEditor component with an \onChangeJSON\ callback to sync state, while the advanced demo (\react\_advanced\_demo\) demonstrates a more complex setup featuring schema validation, multiple editing modes (tree, form, view, code, text), and \onChangeText\ callbacks.

_examples/react\demo · high confidence

The \img/images.html\ file, which served as an HTML-based preview for icon rendering, and the \img/license.txt\ file, which contained attribution for icons copied from Chromium Developer Tools, have been deleted. This cleanup removes the legacy visual reference and associated licensing text from the image assets directory.

img · high confidence

The repository has been restructured to support modern JavaScript development. A new build pipeline using Gulp and Webpack has been introduced to bundle the library, including tasks for minification and CSS processing. Babel is now configured via \.babelrc\ to transpile source code, allowing the use of modern JavaScript features. The project now exports a CommonJS module via \index.js\ and includes updated documentation in \README.md\ and \CONTRIBUTING.md\, alongside a new \SECURITY.md\ policy. Legacy web application files (such as \index.html\ and \interface.css\) have been removed, focusing the repository on the library component.

(repo-wide) · high confidence

The main JSON Editor stylesheet has been refactored to use the modern Sass \@use\ rule for importing internal modules (such as reset, variables, autocomplete, contextmenu, editor, menu, navigationbar, searchbox, statusbar, and treepath) and external assets (Selectr). This change replaces the legacy \@import\ directive, improving namespace isolation and aligning with current Sass best practices.

src/scss · high confidence

The JSON Editor's internal styling has been reorganized into modular SCSS partials (such as \_autocomplete, \_contextmenu, \_editor, and \_variables) that now utilize the modern @use directive instead of the legacy @import. This change centralizes design tokens like colors, fonts, and icon paths in a dedicated variables file, improving maintainability and ensuring consistent styling across the editor's components, including the menu, search box, and tree view.

src/scss/jsoneditor · high confidence

The JSONEditor source code has been restructured to improve maintainability and modularity. Core functionalities are now encapsulated in dedicated classes such as ContextMenu, ErrorTable, FocusTracker, Highlighter, and History, replacing previous inline implementations. The editor modes (tree, text, preview) are now implemented as mixins applied to the main JSONEditor class, allowing for cleaner separation of concerns. Additionally, the main menu bar has been renamed to the navigation bar, and the internal editor reference has been renamed from 'editor' to 'aceEditor' to avoid naming conflicts.

src/js · high confidence

The examples directory has been completely restructured and rewritten to demonstrate the current JSONEditor API. The new set of 24 numbered HTML files covers core usage patterns including basic editing, viewer mode, mode switching, and file I/O. It introduces dedicated examples for advanced features such as JSON schema validation with $ref support, item templates, and three tiers of autocomplete (static, dynamic, and advanced with JSONPath). The examples also showcase modern API capabilities like custom validation (synchronous and asynchronous), context menu customization via onCreateMenu, selection APIs, event logging, and editor synchronization. Styling examples demonstrate custom CSS classes and dark themes, while internationalization is covered with language switching. Additional demos include running queries via a custom language interface, opening editors in new windows, and highlighting differences between two JSON objects.

examples · high confidence

The JSONEditor now intelligently detects and reuses an existing Ace editor instance loaded on the page (via \window.ace\) rather than always forcing its own embedded copy, which prevents conflicts when multiple libraries use Ace. If no external instance is found, it loads the \ace-builds\ library along with necessary plugins (JSON mode, searchbox, language tools) and a custom \jsoneditor\ theme. This change ensures that the editor's styling and functionality are consistent whether Ace is provided externally or bundled internally, and it resolves issues where the embedded theme was not being applied correctly in minimalist builds.

src/js/ace · high confidence

The Selectr dropdown asset in the project has been updated from version 2.4.0 to 2.4.13. This update includes fixes for XSS vulnerabilities and resolves a regression in the Transform model where select boxes were not highlighting matches correctly. The component is now integrated as a local copy to address maintenance and webpack compatibility issues with the upstream project.

src/js/assets/selectr · high confidence

The jsonlint library is now included directly in the project source (src/js/assets/jsonlint) as a copied file from the josdejong/jsonlint fork, rather than being referenced as an external dependency. This change resolves bundling issues with tools like jspm that do not support linking directly to GitHub projects, ensuring the JSON parser works reliably in the browser environment.

src/js/assets/jsonlint · high confidence

The vanilla-picker entry point has been updated to prevent build failures in environments where the 'vanilla-picker' package is not installed. It now attempts to require the library within a try-catch block, falling back to an existing global instance if available, or remaining undefined if neither is present, rather than throwing an error immediately.

src/js/vanilla-picker · high confidence

Added unit tests for the \Node.\_findSchema\ method to verify correct schema lookup across nested objects, arrays, and \$ref\ references, and added tests for \SchemaTextCompleter\ to validate that code completions correctly resolve single, triple, and recursive schema references.

test · high confidence

The React example projects (react\_demo and react\_advanced\_demo) now use React 19.2.4, and the main project's build tooling has been upgraded to Babel 8.0.1. These dependency updates in the package manifests and lockfiles ensure the examples and development environment are aligned with the latest major versions of these libraries.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 47 → 47 (+0.4)
• Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 27 → 27 (+0.0)
• Architecture 100 → 100 (+0.0)
• Maturity 61 → 61 (+0.0)
• Readiness 54 → 55 (+1.5)
• Security 90 → 90 (+0.7)

• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Documentation: no installation or build instructions (README.md)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• _createFrame (cyclomatic 17) (src/js/treemode.js)
• _findOneSchema (cyclomatic 24) (src/js/Node.js)
• _onChange (cognitive 24) (src/js/treemode.js)
• _onChange (cyclomatic 17) (src/js/treemode.js)
• _onEvent (cyclomatic 32) (src/js/treemode.js)
• _onKeyDown (cognitive 28) (src/js/treemode.js)
• _onKeyDown (cyclomatic 27) (src/js/treemode.js)
• create (cyclomatic 24) (src/js/previewmode.js)
• create (cyclomatic 38) (src/js/textmode.js)
• expand (cognitive 16) (src/js/treemode.js)
• registerMode (cognitive 19) (src/js/JSONEditor.js)
• setSchema (cognitive 22) (src/js/JSONEditor.js)
• validate (cognitive 17) (src/js/textmode.js)

• FileTooLong: js/treemode.js (src/js/treemode.js)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• JSONEditor.JSONEditor.registerMode (cognitive 19) (src/js/JSONEditor.js)
• JSONEditor.JSONEditor.setSchema (cognitive 22) (src/js/JSONEditor.js)
• Node.Node._findOneSchema (cyclomatic 24) (src/js/Node.js)
• Outdated (npm): ajv
• Outdated (npm): jsoneditor
• Outdated (npm): react
• Outdated (npm): react-dom
• previewmode.previewmode.create (cyclomatic 24) (src/js/previewmode.js)
• selectr.Selectr.add (cognitive 26) (src/js/assets/selectr/selectr.js)
• selectr.Selectr.bindEvents (cognitive 112) (src/js/assets/selectr/selectr.js)
• selectr.Selectr.bindEvents (cyclomatic 65) (src/js/assets/selectr/selectr.js)
• selectr.Selectr.search (cognitive 27) (src/js/assets/selectr/selectr.js)
• selectr.Selectr.select (cognitive 20) (src/js/assets/selectr/selectr.js)
• selectr.Selectr.setSelected (cognitive 33) (src/js/assets/selectr/selectr.js)
• selectr.Selectr.setSelected (cyclomatic 26) (src/js/assets/selectr/selectr.js)
• …and 9 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

josdejong/jsoneditor was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.