{"id":22897284,"url":"https://github.com/center-key/pretty-print-json","last_synced_at":"2025-05-15T20:01:38.593Z","repository":{"id":39526116,"uuid":"158070427","full_name":"center-key/pretty-print-json","owner":"center-key","description":"🦋 Pretty-print JSON data into HTML to indent and colorize (with TypeScript declarations)","archived":false,"fork":false,"pushed_at":"2025-01-02T06:09:49.000Z","size":424,"stargazers_count":137,"open_issues_count":4,"forks_count":27,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T00:35:59.769Z","etag":null,"topics":["color","html","javascript","json","pretty-print","pretty-print-json","trailing-commas","typescript"],"latest_commit_sha":null,"homepage":"https://pretty-print-json.js.org","language":"TypeScript","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/center-key.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-18T10:05:07.000Z","updated_at":"2025-02-11T16:50:27.000Z","dependencies_parsed_at":"2023-12-07T10:31:54.912Z","dependency_job_id":"aa798857-24d0-4cda-815b-16a8dd8992ca","html_url":"https://github.com/center-key/pretty-print-json","commit_stats":{"total_commits":289,"total_committers":12,"mean_commits":"24.083333333333332","dds":"0.12456747404844293","last_synced_commit":"56a4c4f22ce1bd7172e87dc447780cfd2cf9866c"},"previous_names":[],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/center-key%2Fpretty-print-json","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/center-key%2Fpretty-print-json/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/center-key%2Fpretty-print-json/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/center-key%2Fpretty-print-json/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/center-key","download_url":"https://codeload.github.com/center-key/pretty-print-json/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247761052,"owners_count":20991532,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["color","html","javascript","json","pretty-print","pretty-print-json","trailing-commas","typescript"],"created_at":"2024-12-14T00:16:25.393Z","updated_at":"2025-04-08T01:37:33.898Z","avatar_url":"https://github.com/center-key.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pretty-print-json\n\u003cimg src=https://centerkey.com/graphics/center-key-logo.svg align=right width=200 alt=logo\u003e\n\n_Pretty-print JSON data into HTML to indent and colorize_\n\n[![License:MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/center-key/pretty-print-json/blob/main/LICENSE.txt)\n[![npm](https://img.shields.io/npm/v/pretty-print-json.svg)](https://www.npmjs.com/package/pretty-print-json)\n[![Hits](https://data.jsdelivr.com/v1/package/npm/pretty-print-json/badge?style=rounded)](https://www.jsdelivr.com/package/npm/pretty-print-json)\n[![Build](https://github.com/center-key/pretty-print-json/actions/workflows/run-spec-on-push.yaml/badge.svg)](https://github.com/center-key/pretty-print-json/actions/workflows/run-spec-on-push.yaml)\n\nSource is written in functional TypeScript, and **pretty-print-json.min.js** (minified) is 2.1 KB.\n\n![Screenshot](docs/screenshot.png)\n\n## A) Try It Out\nInteractive online tool to format JSON:\u003cbr\u003e\nhttps://pretty-print-json.js.org\n\n## B) Setup\n### 1. Web browser\nLoad from the [jsdelivr.com CDN](https://www.jsdelivr.com/package/npm/pretty-print-json):\n```html\n\u003clink rel=stylesheet href=https://cdn.jsdelivr.net/npm/pretty-print-json@3.0/dist/css/pretty-print-json.css\u003e\n...\n\u003cscript src=https://cdn.jsdelivr.net/npm/pretty-print-json@3.0/dist/pretty-print-json.min.js\u003e\u003c/script\u003e\n```\nThe minified JS file is 2 KB.\n\nFor **dark mode**, replace `pretty-print-json.css` with `pretty-print-json.dark-mode.css` in\nthe `\u003clink\u003e` tag.\n\nOr to automatically sense **dark mode** based on the `prefers-color-scheme` CSS media feature, use `pretty-print-json.prefers.css` instead.\n### 2. Node.js server\nInstall package for node:\n```shell\n$ npm install pretty-print-json\n```\nImport into your application:\n```javascript\nimport { prettyPrintJson } from 'pretty-print-json';\n```\n\n## C) Usage\n### 1. API\n```javascript\nconst html = prettyPrintJson.toHtml(data, options?);\n```\n### 2. Example\n##### HTML:\n```html\n\u003cpre id=account class=json-container\u003e\u003c/pre\u003e\n```\n##### JavaScript:\nPass data into `prettyPrintJson.toHtml(data, options)` and display the results.\n```javascript\nconst data = {\n   active: true,\n   mode:   '🚃',\n   codes:  [48348, 28923, 39080],\n   city:   'London',\n   };\nconst elem = document.getElementById('account');\nelem.innerHTML = prettyPrintJson.toHtml(data);\n```\n### 3. Options\n| Name (key)       | Type        | Default | Description                                                 |\n| :--------------- | :---------- | :-----: | :---------------------------------------------------------- |\n| `indent`         | **integer** | `3`     | Number of spaces for indentation.                           |\n| `lineNumbers`    | **boolean** | `false` | Wrap HTML in an `\u003col\u003e` tag to support line numbers.\u003cb\u003e*\u003c/b\u003e |\n| `linkUrls`       | **boolean** | `true`  | Create anchor tags for URLs.                                |\n| `linksNewTab`    | **boolean** | `true`  | Add a `target=_blank` attribute setting to anchor tags.     |\n| `quoteKeys`      | **boolean** | `false` | Always double quote key names.                              |\n| `trailingCommas` | **boolean** | `true`  | Append a comma after the last item in arrays and objects.   |\n\n\u003cb\u003e*\u003c/b\u003eWhen setting `lineNumbers` to `true`, do not use the `\u003cpre\u003e` tag as the `white-space: pre;`\nstyling is applied to each line (`\u003cli\u003e`).\n\n![Screenshot](docs/screenshot-dark.png)\n\n## D) TypeScript Declarations\nSee the TypeScript declarations at the top of the\n[pretty-print-json.ts](dist/pretty-print-json.ts) file.\n\nCustomize the output of the function `prettyPrintJson.toHtml(data: unknown, options?: FormatOptions)`\nusing the `options` parameter.\n\nThe `options` parameter is a `FormatOptions` object:\n```typescript\ntype FormatOptions = {\n   indent?:         number,   //number of spaces for indentation\n   lineNumbers?:    boolean,  //wrap HTML in an \u003col\u003e tag to support line numbers\n   linkUrls?:       boolean,  //create anchor tags for URLs\n   linksNewTab?:    boolean,  //add a target=_blank attribute setting to anchor tags\n   quoteKeys?:      boolean,  //always double quote key names\n   trailingCommas?: boolean,  //append a comma after the last item in arrays and objects\n   };\n```\n\nExample TypeScript usage with explicit types:\n```typescript\nimport { prettyPrintJson, FormatOptions } from 'pretty-print-json';\n\nconst data = {\n   active: true,\n   mode:   '🚃',\n   codes:  [48348, 28923, 39080],\n   city:   'London',\n   };\nconst options: FormatOptions = { linkUrls: true };\nconst html: string = prettyPrintJson.toHtml(data, options);\n```\n\n## E) Build Environment\nCheck out the `runScriptsConfig` section in [package.json](package.json) for an\ninteresting approach to organizing build tasks.\n\n**CLI Build Tools for package.json**\n   - 🎋 [add-dist-header](https://github.com/center-key/add-dist-header):\u0026nbsp; _Prepend a one-line banner comment (with license notice) to distribution files_\n   - 📄 [copy-file-util](https://github.com/center-key/copy-file-util):\u0026nbsp; _Copy or rename a file with optional package version number_\n   - 📂 [copy-folder-util](https://github.com/center-key/copy-folder-util):\u0026nbsp; _Recursively copy files from one folder to another folder_\n   - 🪺 [recursive-exec](https://github.com/center-key/recursive-exec):\u0026nbsp; _Run a command on each file in a folder and its subfolders_\n   - 🔍 [replacer-util](https://github.com/center-key/replacer-util):\u0026nbsp; _Find and replace strings or template outputs in text files_\n   - 🔢 [rev-web-assets](https://github.com/center-key/rev-web-assets):\u0026nbsp; _Revision web asset filenames with cache busting content hash fingerprints_\n   - 🚆 [run-scripts-util](https://github.com/center-key/run-scripts-util):\u0026nbsp; _Organize npm package.json scripts into groups of easy to manage commands_\n   - 🚦 [w3c-html-validator](https://github.com/center-key/w3c-html-validator):\u0026nbsp; _Check the markup validity of HTML files using the W3C validator_\n\n\u003cbr\u003e\n\n---\nTo see some example HTML results, run `npm install`, `npm test`, and then `node spec/examples.js`.\n\nFeel free to submit questions at:\u003cbr\u003e\n[github.com/center-key/pretty-print-json/issues](https://github.com/center-key/pretty-print-json/issues)\n\n[MIT License](LICENSE.txt) |\n[Blog post](https://blog.centerkey.com/2013/05/javascript-colorized-pretty-print-json.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcenter-key%2Fpretty-print-json","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcenter-key%2Fpretty-print-json","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcenter-key%2Fpretty-print-json/lists"}