react-json-editor-ajrm

react-json-editor-ajrm renders a stylish, editor-like text area purpose-built for JSON. It behaves like a lightweight code editor: keystrokes are tokenized on the fly and rendered with syntax-aware coloring for keys, strings, numbers, punctuation, and errors, while an internal parser checks the content against valid JavaScript object syntax and reports mistakes with the offending line number.

The component exposes its state as plain text, markup text, and a parsed JavaScript object, so consumers can hook into onChange/onBlur and read back whichever representation they need. Two built-in color themes ship out of the box (a VS Code dark tribute and a light theme), and every color, spacing, and layout value can be overridden through colors and style props. Locale strings for validation warnings are supplied as a separate import from ten languages including English, German, Spanish, Hindi, Chinese, and Japanese.

The project’s author has flagged it as no longer actively maintained, with the GitHub repo intended for archival and a from-scratch successor in progress under a different name. The npm package itself is not being removed, so existing installs continue to work, but new projects should weigh that maintenance status before adopting it.

What You Get

• Live syntax highlighting - keys, string values, numbers, colons, and punctuation are colored independently as the user types
• Inline validation - invalid JSON syntax surfaces a warning banner with the offending line number, without blocking further edits
• Multiple output formats - onChange/onBlur callbacks return the current content as plain text, HTML markup, and a parsed JS object simultaneously
• Built-in and custom themes - ships with a VS Code-style dark theme and a light theme, and every color token can be overridden via the colors prop
• Ten-language locale support - validation and warning copy can be localized by importing a locale file (English, German, Spanish, Hindi, Indonesian, Portuguese, Chinese, French, Russian, Japanese, Tamil)
• View-only mode - the same component can render non-editable JSON for display/debug purposes via the viewOnly prop

Common Use Cases

• Admin/config panels - letting an internal tool’s operator hand-edit a JSON config blob or feature-flag payload with immediate feedback on typos
• API debugging UIs - displaying a request/response payload as formatted, colorized JSON inside a support or developer-tools dashboard
• No-code/low-code builders - exposing an escape hatch where advanced users can edit a node’s raw JSON configuration directly
• CMS or schema editors - editing structured metadata (SEO fields, custom attributes) stored as JSON alongside a content record

Under The Hood

Architecture The entire component lives in a single 1,800-line class, JSONInput in src/index.js, which handles prop normalization (updateInternalProps), keystroke-driven tokenizing (tokenize), markup generation (createMarkup), caret tracking (getCursorPosition/setCursorPosition), and a polling-based scheduled update loop (setInterval(this.scheduledUpdate, 100)) all in one place — a monolithic, pre-hooks class-component design rather than a layered one. It composes a small set of pure helper modules: src/themes.js (two static color palettes), src/err.js (a hand-rolled assertion library — isUndefined, isNotType, missingKey, etc. — used for internal invariant checks and paired with a stack-trace-parsing getCaller helper), and src/mitsuketa/index.js, an internal deep-object-manipulation utility (locate, getType, identical, key renaming/removal) that the component and its assertions both depend on. Locale strings live under src/locale/ as one file per language, loaded independently by the consumer.

Tech Stack The package targets React via peerDependencies (react/react-dom >=16.2.0) with almost no runtime dependency of its own (@babel/runtime only). It’s built with Babel 7 CLI directly (babel ./src --out-dir ./dist) in two passes — one CommonJS, one ES-module — producing a dual react-json-editor-ajrm / react-json-editor-ajrm/es entry point rather than going through a bundler like Rollup or webpack; a small scripts/copy-files.js step copies non-JS assets into dist. Tests run on Jest 26 with Enzyme 3 (enzyme-adapter-react-16, enzyme-to-json snapshot serializer), and CI is configured via a Travis config pinned to Node 12.

Code Quality A dedicated test/ suite exists and is organized by concern (logic/ for syntax and locale logic, render/ for component rendering, change/ for interaction/change events), run through a single test.js entrypoint — a reasonable structural separation. However, the toolchain is dated: Enzyme has been unmaintained for several React major versions, there is no TypeScript, no linter configuration is present in the repository, and error handling relies on the custom err.js assertion helpers rather than typed guarantees. The project itself carries an explicit deprecation notice from its maintainer.

API Design Day-to-day usage is a single component with a flat prop surface (placeholder, onChange, onBlur, height/width, theme), which is easy to adopt for a basic case. Deeper customization needs more study: locale must be imported from a separate subpath (react-json-editor-ajrm/locale/en) rather than passed as a simple string, and full theming requires assembling a colors object with nine named keys plus a parallel style object with eight nested keys — documented in the README’s prop table but not self-discoverable from the API alone.