{"id":42939941,"url":"https://github.com/chenckang/react-json-pretty","last_synced_at":"2026-01-30T20:04:20.663Z","repository":{"id":45625341,"uuid":"48735340","full_name":"chenckang/react-json-pretty","owner":"chenckang","description":"A react component for prettifying JSON in browser","archived":false,"fork":false,"pushed_at":"2022-11-14T23:42:33.000Z","size":9285,"stargazers_count":159,"open_issues_count":7,"forks_count":24,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-29T08:32:57.246Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chenckang.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-29T07:50:22.000Z","updated_at":"2025-06-14T09:16:04.000Z","dependencies_parsed_at":"2022-08-12T12:00:12.505Z","dependency_job_id":null,"html_url":"https://github.com/chenckang/react-json-pretty","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/chenckang/react-json-pretty","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenckang%2Freact-json-pretty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenckang%2Freact-json-pretty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenckang%2Freact-json-pretty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenckang%2Freact-json-pretty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chenckang","download_url":"https://codeload.github.com/chenckang/react-json-pretty/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenckang%2Freact-json-pretty/sbom","scorecard":{"id":276018,"data":{"date":"2025-08-11","repo":{"name":"github.com/chenckang/react-json-pretty","commit":"2a59d3f401e6255c69324fcab64cf207b15e2349"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"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"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-17T14:24:43.883Z","repository_id":45625341,"created_at":"2025-08-17T14:24:43.883Z","updated_at":"2025-08-17T14:24:43.883Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28918235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T19:10:10.838Z","status":"ssl_error","status_checked_at":"2026-01-30T19:06:40.573Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-30T20:04:19.957Z","updated_at":"2026-01-30T20:04:20.657Z","avatar_url":"https://github.com/chenckang.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React JSON Pretty\n\n[![npm version](https://badge.fury.io/js/react-json-pretty.svg)](https://badge.fury.io/js/react-json-pretty)\n[![npm downloads](https://img.shields.io/npm/dm/react-json-pretty.svg)](https://www.npmjs.com/package/react-json-pretty)\n[![build status](https://api.travis-ci.org/chenckang/react-json-pretty.svg?branch=master)](https://travis-ci.org/chenckang/react-json-pretty)\n![MIT license](https://img.shields.io/github/license/mashape/apistatus.svg)\n\n## Introduction\n\nThis is a lightweight and tiny react component that helps you to format and prettify the JSON data. \n\n## Install\n```bash\nnpm install --save react-json-pretty\n```\n\n## Usage\n\n### Basic\n\nThe usage is quite simple, assuming that you already have an application using React. If you don't, visit [Facebook React](https://reactjs.org/) to create one or take a look at the [example](https://github.com/chenckang/react-json-pretty/tree/master/example) provided.\n\nFirstly, you need to require the react-json-pretty:\n\n```javascript\nvar JSONPretty = require('react-json-pretty');\n```\nOr use the es2015 syntax with the help of tools like babel:\n\n```javascript\nimport JSONPretty from 'react-json-pretty';\n```\n\nNext, use it in your React component:\n\n```jsx\n\u003cJSONPretty id=\"json-pretty\" data={yourData}\u003e\u003c/JSONPretty\u003e\n```\n\nWhere the property `data` is the JSON string or just a plain JavaScript object.\n\nLastly, you can add themes stated below.\n\n***Note: if `yourData` is not a plain object, use `circular-json` or other similar tools to preprocess it before being passed to `JSONPretty`.***\n\n### Themes\n\n#### Use themes with css-loader and webpack\n\nAnd also you can import the style to the document, here is an example of using webpack loaders(`style!css`) to load style, You can visit [webpack](https://webpack.js.org/) to get more details:\n\n```javascript\nrequire('react-json-pretty/themes/monikai.css');\n```\n\nOr\n\n```javascript\nimport 'react-json-pretty/themes/monikai.css';\n```\n\n#### Use themes with `theme` property\n\nIf you don't want to use css, `theme` property is also available. Properties of `theme` will be used as `style` property of the target DOM element.\n\n```jsx\nvar JSONPrettyMon = require('react-json-pretty/dist/monikai');\n\u003cJSONPretty data={yourJSON} theme={JSONPrettyMon}\u003e\u003c/JSONPretty\u003e\n```\n\nVisit the [example](https://github.com/chenckang/react-json-pretty/tree/master/example) to get some details.\n\nThe preview is as below:\n\n![previews, you can also find it in the example folder](https://github.com/chenckang/react-json-pretty/blob/master/example/preview.png?raw=true)\n\n### Custom style\n\n#### Using ***type***Style property\n\nThis can make control the extra styles of the specific type of value: \n\n```\nmainStyle?: string;\nkeyStyle?: string;\nvalueStyle?: string;\nbooleanStyle?: string;\nstringStyle?: string;\nerrorStyle: string;\n```\n\nFor example: set padding of the main area and the font size the normal value\n\n```jsx\n\u003cJSONPretty id=\"json-pretty\" style={{fontSize: \"1.1em\"}} data={youJSON} mainStyle=\"padding:1em\" valueStyle=\"font-size:1.5em\"\u003e\u003c/JSONPretty\u003e\n```\n\n## Others\n\n### Error\n\nUse `onJSONPrettyError` function property to get `JSON.parse` errors.\n\n```jsx\n\u003cJSONPretty data={invalid} onJSONPrettyError={e =\u003e console.error(e)}\u003e\u003c/JSONPretty\u003e\n```\n\n### Formation\n\nActually, react-json-pretty is based on `JSON.stringify(value[, replacer[, space]])`. However, `JSON.stringify(value[, replacer[, space]])` has some optional parameters additionally such as `replacer` and `space`. This is also available in `react-json-pretty`.\n\nHere is an example:\n\n```jsx\n\u003cJSONPretty data={yourData} replacer={\n    function (key, value) {\n        if (key === 'cccc') {\n            value += '~~~abc';\n        }\n        if (key === 'gggg') {\n            value *=10;\n        }\n        return value;\n    }\n} space=\"4\"\n\u003e\n\u003c/JSONPretty\u003e\n```\n\n***Note: The default value for property `replacer` is `null`，and `space` is `2`.***\n\nYou can visit the [example](https://github.com/chenckang/react-json-pretty/tree/master/example) to see the details.\n\n### Custom `themeClassName`\n\nYour can also define your custome `themeClassName`, the default value is `__json-pretty__`.\n\n***Note: this may lead to the usage of default themes provided with css being invalid.***\n\n```jsx\n// The final className will be 'custom-json-pretty'\n\u003cJSONPretty themeClassName=\"custom-json-pretty\" data={yourData}\u003e\u003c/JSONPretty\u003e\n```\n\n### Custom Themes\n\nThere are some default themes provided including `\"Adventure Time\"`, `acai` and `1337`, to provide users more ready-made options.\n\n![Adventure Time](https://github.com/chenckang/react-json-pretty/blob/master/example/at.png?raw=true)\n![1337](https://github.com/chenckang/react-json-pretty/blob/master/example/1337.png?raw=true)\n![acai](https://github.com/chenckang/react-json-pretty/blob/master/example/acai.png?raw=true)\n\nAll the css theme files are placed in the `themes` folder.\n\nIt is also prossible to define a custom theme\n\n#### Using `themes` property\n\nHere is the property schema:\n\n```\n{\n  main?: string,\n  error?: string,\n  key?: string,\n  string?: string,\n  value?: string,\n  boolean?: string'\n}\n```\n\nFor example: \n\n```js\n{\n  main: 'line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;',\n  error: 'line-height:1.3;color:#66d9ef;background:#272822;overflow:auto;',\n  key: 'color:#f92672;',\n  string: 'color:#fd971f;',\n  value: 'color:#a6e22e;',\n  boolean: 'color:#ac81fe;',\n}\n```\n\n#### Using css file\n\nFor example the `monokai.styl`:\n\n```\n.__json-pretty__ \n  line-height 1.3\n  color rgba(248,248,242,1)\n  background #1e1e1e\n  overflow auto\n\n  .__json-key__\n    color rgba(255,94,94,1)\n\n  .__json-value__\n    color rgba(253,176,130,1)\n\n  .__json-string__\n    color rgba(233,253,172,1)\n\n  .__json-boolean__\n    color rgba(102,153,204,1)\n\n.__json-pretty-error__\n  line-height 1.3\n  color rgba(248,248,242,1)\n  background #1e1e1e\n  overflow auto\n```\n\n## License\n\nMIT (http://www.opensource.org/licenses/mit-license.php)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenckang%2Freact-json-pretty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenckang%2Freact-json-pretty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenckang%2Freact-json-pretty/lists"}