{"id":15376712,"url":"https://github.com/bennypowers/json-viewer","last_synced_at":"2025-04-15T16:51:03.469Z","repository":{"id":38009710,"uuid":"228888674","full_name":"bennypowers/json-viewer","owner":"bennypowers","description":"Custom Element that shows a JavaScript object's properties as syntax-highlighted JSON.","archived":false,"fork":false,"pushed_at":"2023-07-18T20:22:40.000Z","size":1486,"stargazers_count":7,"open_issues_count":8,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-07T09:35:08.158Z","etag":null,"topics":["customelements","hacktoberfest","json","json-viewer","syntax-highlighting","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bennypowers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-12-18T17:20:44.000Z","updated_at":"2023-04-25T19:36:10.000Z","dependencies_parsed_at":"2024-06-19T01:55:32.782Z","dependency_job_id":null,"html_url":"https://github.com/bennypowers/json-viewer","commit_stats":{"total_commits":38,"total_committers":2,"mean_commits":19.0,"dds":"0.21052631578947367","last_synced_commit":"d9167266800298407945217744fb7ecbbdcf98fd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Fjson-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Fjson-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Fjson-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bennypowers%2Fjson-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bennypowers","download_url":"https://codeload.github.com/bennypowers/json-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240317410,"owners_count":19782387,"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":["customelements","hacktoberfest","json","json-viewer","syntax-highlighting","webcomponents"],"created_at":"2024-10-01T14:08:43.948Z","updated_at":"2025-03-03T04:30:44.761Z","avatar_url":"https://github.com/bennypowers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# json-viewer\n\nCustom Element that shows a JavaScript object's properties as syntax-highlighted JSON.\n\nThe element will respect `prefers-color-scheme` by default, but if you use the\nCSS Custom Properties listed below, you should customize both light and dark themes.\n\n❤️ Proudly uses [open-wc](https://open-wc.org) tools and recommendations.\n\n## Examples\n\n```javascript\nimport '/path/to/json-viewer.js';\nconst viewer = document.createElement('json-viewer');\n      viewer.allowlist = ['foo', 'bar'];\n      viewer.object = {\n        foo: 'foo',\n        bar: 'bar',\n        baz: 'baz',\n      };\n```\n\n```html\n\u003cscript type=\"module\" src=\"/path/to/json-viewer.js\"\u003e\u003c/script\u003e\n\n\u003cjson-viewer allowlist=\"meenie,minie\"\u003e\n  \u003cscript type=\"application/json\"\u003e\n    {\n      \"eenie\": 1,\n      \"meenie\": true,\n      \"minie\": [{ \"mo\": \"catch a tiger by the toe\" }]\n    }\n  \u003c/script\u003e\n\u003c/json-viewer\u003e\n```\n\n## Properties\n\n| Property    | Attribute   | Type             | Description                                      |\n|-------------|-------------|------------------|--------------------------------------------------|\n| `allowlist` | `allowlist` | `string[]`       | User-defined allowlist of top-level keys for the object.\u003cbr /\u003eOptional for plain objects,\u003cbr /\u003eRequired when setting `object` to a non-serializable object (e.g. an HTMLElement)\u003cbr /\u003eProperty is an Array of strings\u003cbr /\u003eAttribute is a comma-separated string |\n| `error`     |             | `Error`          | JSON.parse error                                 |\n| `object`    | `object`    | `string\\|object` | JavaScript Object to display\u003cbr /\u003eSetting this property will override `\u003cscript type=\"application/json\"\u003e` children |\n\n## Events\n\n| Event              | Type               | Description           |\n|--------------------|--------------------|-----------------------|\n| `json-parse-error` | `CustomEvent\u003cany\u003e` | when JSON parse fails |\n\n## Slots\n\n| Name | Description                                      |\n|------|--------------------------------------------------|\n|      | JSON scripts or JSON strings appended as text nodes will be parsed and displayed |\n\n## CSS Shadow Parts\n\n| Part      | Description                   |\n|-----------|-------------------------------|\n| `boolean` | boolean property values       |\n| `code`    | the wrapping `\u003ccode\u003e` element |\n| `key`     | property keys                 |\n| `null`    | null property values          |\n| `number`  | number property values        |\n| `string`  | string property values        |\n\n## CSS Custom Properties\n\n| Property                      | Description                                      |\n|-------------------------------|--------------------------------------------------|\n| `--json-viewer-background`    | Color for generic text. Light #212121, Dark white |\n| `--json-viewer-boolean-color` | Color for booleans. Light #f76707, Dark #22b8cf  |\n| `--json-viewer-color`         | Color for generic text. Light white, Dark #212121 |\n| `--json-viewer-key-color`     | Color for keys. Light #f76707, Dark #ff922b      |\n| `--json-viewer-null-color`    | Color for nulls. Light #e03131, Dark #ff6b6b     |\n| `--json-viewer-number-color`  | Color for numbers. Light #0ca678, Dark #51cf66   |\n| `--json-viewer-string-color`  | Color for strings. Light #0c8599, Dark #22b8cf   |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbennypowers%2Fjson-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbennypowers%2Fjson-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbennypowers%2Fjson-viewer/lists"}