A modular, easy to use, react component, to view, edit, and debug javascript objects.
Installations
npm install react-json-editor-ajrmDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
16.14.1
NPM Version
8.5.0
Score
94.4
Supply Chain
95.6
Quality
76.2
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (98.88%)
HTML (0.94%)
CSS (0.18%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
AndrewRedican
Download Statistics
Total Downloads
15,438,919
Last Day
12,182
Last Week
63,396
Last Month
255,595
Last Year
3,437,185
GitHub Statistics
MIT License
358 Stars
391 Commits
127 Forks
10 Watchers
4 Branches
16 Contributors
Updated on Feb 11, 2025
Bundle Size
45.03 kB
Minified
13.16 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
2.5.14
Package Id
react-json-editor-ajrm@2.5.14
Unpacked Size
341.83 kB
Size
55.97 kB
File Count
36
NPM Version
8.5.0
Node Version
16.14.1
Published on
Jan 29, 2023
Total Downloads
Cumulative downloads
Total Downloads
15,438,919
Last Day
4.6%
12,182
Compared to previous day
Last Week
14.9%
63,396
Compared to previous week
Last Month
29.5%
255,595
Compared to previous month
Last Year
-17.9%
3,437,185
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Warning:
As you may already know, the react-json-editor-ajrm's orignal project is not actively maintained and that it will eventually be deprecated. So I've decided to set an official date for deprecation. The tentative date for this is June 15, 2023.
What does deprecation mean?
- It means the Github project will be archived as read only.
- It means the npm packages will appear deprecated, but it WILL NOT be deleted.
- It means the new project will be available officially on that date.
I would like to thank those who used it in their projects and those who have contributed in some way to the project. I simply no longer wish to maintain this project. It was made in the early days of my software engineer career, and it has not caught up to today's standards nor mine.
But don't fret. I intend to breathe new life into this project rewriting it from the ground up.
I would like to take the learnings of the past, and avoid some of the issues react-json-editor-ajrm currently has. I would also like to highlight the things done well, and I wish to carry on.
I've setup home for this new project here enio. I've also set up a discussion here if you have any questions or comments.
react-json-editor-ajrm
A stylish, editor-like, modular, react component for viewing, editing, and debugging javascript object syntax!
Installing Dependency
- Using node package manager:
$ npm i --save react-json-editor-ajrm
How to Use
import JSONInput from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';
<JSONInput
id = 'a_unique_id'
placeholder = { sampleObject }
colors = { darktheme }
locale = { locale }
height = '550px'
/>
Hint: There are two different root paths: react-json-editor-ajrm and react-json-editor-ajrm/es. The first contains polyfilled ES5 code, the second unpolyfilled ES6. The react-json-editor-ajrm/es version is not compatible with create-react-app. If you are unsure of which one you need/want, pick the first - it has the best compatibility with tools and browsers.
Examples
The ./examples folder contains two examples:
- webpack-project - A basic example without much overload
- create-react-app-project - A small example using the create-react-app template
Testing right away!
- Fork and/or clone this Github repository
- Go to an example project under react-json-editor-ajrm/example:
$ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
- Install example project dependencies:
$ npm i
- Serve sample website to port 8080:
$ npm start
- Open
http://localhost:8080in the web browser
Latest Spotlight Release Notes [v2.5.12] - October 15, 2020
- Fixed import issue.
Upcoming Features
- Bug fixes.
Features
- Write as if you are in a text editor.
- Checks for syntax mistakes and provides feedback; Custom errors can also be overlaid on the editor.
- You can customize color palette as you please.
- Accepts a javascript object in
placeholderproperty to display after component mounts. - For any valid textContent, calculates and makes available in this.state as plain text, markup text, and javascript object.
- Locale support for
English,German,Spanish,Chinese,French,Indonesian,Russian,Hindi,JapaneseandTamil.
Component Properties
| Name | Description | Type | Required |
|---|---|---|---|
| locale | The locale of your editor. Import locales like this: import locale from 'react-json-editor-ajrm/locale/en'. Learn More | object | Mandatory |
| id | An optional id to assign to the actual text input DOM node. Asides the from the text input, the following nodes will also receive an id: {id}-outer-box, {id}-container, {id}-warning-box, {id}-labels | string | Optional |
| placeholder | Send a valid javascript object to be shown once the component is mounted. Assign a different value to have the component's initial content re-rendered. | object | Optional |
| reset | Send true to have component always re-render or 'reset' to the value provided on the placeholder property. | boolean | Optional |
| viewOnly | Send true if you would like for content shown not to be editable. | boolean | Optional |
| onChange | Whenever onKeyPress event take place, it will return content values. | object | Optional |
| onBlur | Whenever onBlur event take place, it will return content values. | object | Optional |
| confirmGood | Send false if you would like for the checkmark to confirm good syntax to be hidden. | boolean | Optional |
| height | A shorthand property to set a specific height for the entire component. | string | Optional |
| width | A shorthand property to set a specific width for the entire component. | string | Optional |
| onKeyPressUpdate | Send false if you would like for component not to automatically update on key press. | boolean | Optional |
| waitAfterKeyPress | Amount of milliseconds to wait before re-rendering content after keypress. Value defaults to 1000 when not specified. In other words, component will update if there is no additional keystroke after the last one within 1 second. Less than 100 milliseconds does not makes a difference. | number | Optional |
| modifyErrorText | A custom function to modify the component's original warning text. This function will receive a single parameter of type string and must equally return a string. | function | Optional |
| error | Contains the following properties: | object | Optional |
| error.reason | A string containing a custom error messsage | string | Optional |
| error.line | A number indicating the line number related to the custom error message | number | Optional |
| theme | Specify which built-in theme to use. | string | Optional |
| colors | Contains the following properties: | object | Optional |
| colors.default | Hex color code for any symbols, like curly braces, and comma. | string | Optional |
| colors.string | Hex color code for tokens identified as string values. | string | Optional |
| colors.number | Hex color code for tokens identified as integeter, double, or float values. | string | Optional |
| colors.colon | Hex color code for tokens identified as colon. | string | Optional |
| colors.keys | Hex color code for tokens identified as keys or property names. | string | Optional |
| colors.keys_whiteSpace | Hex color code for tokens identified as keys wrapped in quotes. | string | Optional |
| colors.primitive | Hex color code for tokens identified as boolean values and null. | string | Optional |
| colors.error | Hex color code for tokens marked with an error tag. | string | Optional |
| colors.background | Hex color code for component's background. | string | Optional |
| colors.background_warning | Hex color code for warning message displaying at the top in component. | string | Optional |
| style | Contains the following properties: | object | Optional |
| style.outerBox | Property to modify the default style of the outside container div of component. | object | Optional |
| style.container | Property to modify the default style of the container of component. | object | Optional |
| style.warningBox | Property to modify the default style of the container div of the warning message. | object | Optional |
| style.errorMessage | Property to modify the default style of the warning message. | object | Optional |
| style.body | Property to modify the default style of the container div of row labels and code. | object | Optional |
| style.labelColumn | Property to modify the default style of the container div of row labels. | object | Optional |
| style.labels | Property to modify the default style of each row label. | object | Optional |
| style.contentBox | Property to modify the default style of the container div of the code. | object | Optional |
Component Sections
outerBox
+-- container
+--- warningBox
+---- errorMessage
+--- body
+---- labelColumn
+----- labels
+---- contentBox
+----- auto generated markup
Content Values
Whenever RJEA re-renders its content, any function passed onto onChange property will receive a single object parameter with the following keys and values:
| Key | Description |
|---|---|
| plainText | A string representation of then content which includes linebreaks and indentation. Great to console.log() |
| markupText | A string representation of the auto-generated markup used to render content. |
| json | A JSON.stringify version of content. |
| jsObject | A javascript object version of content. Will return undefined if the content's syntax is incorrect. |
| lines | Number of lines rendered for content to be displayed. |
| error | Returns false unless the content's syntax is incorrect, in which case returns an object with a token and a line number which corresponds to the location at which error occurred and a reason |
Built-In Themes
RJEA supports built-in theme. Here is the list.
Built With
- React.js
- Babel.js for transpiling.
- Enzyme for react-specific testing utilities.
- Jest for unit testing, also react-specific tests.
- Travis CI for continuous integration.
License
This project is licensed under the MIT License - see the LICENSE.md file for details.
Contributors
Thanks goes to these wonderful people :smile::
This project follows the all-contributors specification. Contributions of any kind welcome!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
Found 1/13 approved changesets -- score normalized to 0
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 18 are checked with a SAST tool
Reason
132 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-3329-pjwv-fjpg
- Warn: Project is vulnerable to: GHSA-p6j9-7xhc-rhwp
- Warn: Project is vulnerable to: GHSA-89gv-h8wf-cg8r
- Warn: Project is vulnerable to: GHSA-gcv8-gh4r-25x6
- Warn: Project is vulnerable to: GHSA-gmv4-r438-p67f
- Warn: Project is vulnerable to: GHSA-8h2f-7jc4-7m3m
- Warn: Project is vulnerable to: GHSA-3vjf-82ff-p4r3
- Warn: Project is vulnerable to: GHSA-g694-m8vq-gv9h
- Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
- Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.7
/10
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to react-json-editor-ajrm
@types/react-json-editor-ajrm
TypeScript definitions for react-json-editor-ajrm
react-json-editor-ajrm-example
A simple website to showcase react-json-editor-ajrm component
@cto.ai/react-json-editor-ajrm
This repository is a fork of the [React JSON Editor (AJRM)](https://github.com/AndrewRedican/react-json-editor-ajrm) project by [Andrew Redican](https://github.com/AndrewRedican). The original project aimed to provide a versatile JSON editor for React app
@praslar/react-json-editor-ajrm
A stylish, editor-like, modular, react component for viewing, editing, and debugging javascript object syntax!