{"id":13406535,"url":"https://github.com/alenaksu/json-viewer","last_synced_at":"2025-05-15T11:06:34.892Z","repository":{"id":37405746,"uuid":"200504440","full_name":"alenaksu/json-viewer","owner":"alenaksu","description":"Web Component to visualize JSON data in a tree view","archived":false,"fork":false,"pushed_at":"2025-04-03T14:48:41.000Z","size":1375,"stargazers_count":202,"open_issues_count":5,"forks_count":32,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T20:56:00.103Z","etag":null,"topics":["json","json-tree","json-viewer","jsonviewer","webcomponent"],"latest_commit_sha":null,"homepage":"https://alenaksu.github.io/json-viewer/","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/alenaksu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2019-08-04T14:43:12.000Z","updated_at":"2025-04-10T08:55:17.000Z","dependencies_parsed_at":"2024-06-18T15:24:51.231Z","dependency_job_id":"b420087f-4b92-4cc6-a169-4d8ec7fcdc0a","html_url":"https://github.com/alenaksu/json-viewer","commit_stats":{"total_commits":137,"total_committers":6,"mean_commits":"22.833333333333332","dds":0.04379562043795615,"last_synced_commit":"a0e6d216e2f2b8fdf49ef68900d2c9642743d2a1"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alenaksu%2Fjson-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alenaksu%2Fjson-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alenaksu%2Fjson-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alenaksu%2Fjson-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alenaksu","download_url":"https://codeload.github.com/alenaksu/json-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328385,"owners_count":22052632,"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":["json","json-tree","json-viewer","jsonviewer","webcomponent"],"created_at":"2024-07-30T19:02:32.916Z","updated_at":"2025-05-15T11:06:34.872Z","avatar_url":"https://github.com/alenaksu.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Real World","Standalone Components"],"sub_categories":["Components"],"readme":"[![GitHub release](https://img.shields.io/github/v/release/alenaksu/json-viewer.svg)](https://github.com/alenaksu/json-viewer/releases)\n[![npm](https://badgen.net/npm/v/@alenaksu/json-viewer)](https://www.npmjs.com/package/@alenaksu/json-viewer)\n[![downloads](https://badgen.net/npm/dt/@alenaksu/json-viewer)](https://www.npmjs.com/package/@alenaksu/json-viewer)\n[![Known Vulnerabilities](https://snyk.io/test/npm/@alenaksu/json-viewer/badge.svg)](https://snyk.io/test/npm/@alenaksu/json-viewer)\n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/alenaksu/json-viewer/master/LICENSE)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@alenaksu/json-viewer)\n\nA Web Component to visualize JSON data in a tree view\n\n---\n\n-   [Installation](#installation)\n    -   [From CDN](#from-cdn)\n    -   [From NPM](#from-npm)\n-   [Usage](#usage)\n    -   [Attributes](#attributes)\n    -   [Properties](#properties)\n    -   [Methods](#methods)\n    -   [CSS Parts](#css-parts)\n    -   [CSS custom properties](#css-custom-properties)\n    -   [Basic Usage](#basic-usage)\n    -   [Load the JSON dynamically](#load-the-json-dynamically)\n    -   [Basic interactions](#basic-interactions)\n    -   [Custom renderer](#custom-renderer)\n-   [Demo](#demo)\n\n## Installation\n\n### From CDN\n\nThe package contains a bundled version of the component which includes also the Lit library. It can be useful in case you want to import the package using a CDN.\n\n```html\n\u003cscript src=\"https://unpkg.com/@alenaksu/json-viewer@2.1.0/dist/json-viewer.bundle.js\"\u003e\u003c/script\u003e\n```\n\n### From NPM\n\nInstall the component through NPM:\n\n```sh\nnpm i @alenaksu/json-viewer\n```\n\n\nImport the package to your project, this way the component will be automatically defined in the custom elements registry with its default tag name `json-viewer`.\n\n```js\nimport '@alenaksu/json-viewer';\n```\n\nIf you want to extend the component or if you just need to use it in scoped registries with a different tag name, then you can import the component class from the package:\n\n```js\nimport { JsonViewer } '@alenaksu/json-viewer/JsonViewer.js';\n\nclass MyJsonViewer extends JsonViewer {\n    ...\n}\n\ncustomElements.define('my-json-viewer', MyJsonViewer);\n```\n\n---\n\n## Usage\n\n```html\n\u003cjson-viewer\u003e\u003c/json-viewer\u003e\n```\n\n### Attributes\n\n-   `data` - the string representation of JSON object to load\n\n### Properties\n\n-   `data` - get/set the JSON object\n\n### Methods\n\n-   `filter (regexOrPath: RegExp|string) =\u003e void` | Maintains only the nodes that match the given criteria\n-   `resetFilter () =\u003e void` | Clear the filter\n-   `expand (regexOrPath: RegExp|string) =\u003e void` | Expand all the nodes that match the given criteria\n-   `expandAll () =\u003e void` | Alias for `expand('**')`\n-   `collapse (regexOrPath: RegExp|string) =\u003e void` | Collapse all the nodes that match the given criteria\n-   `collapseAll () =\u003e void` | Alias for `collapse('**')`\n-   `search (regexOrPath: RegExp|string) =\u003e Iterator` | Return and iterator with which is possible to go through all the matched nodes. It scrolls the page to the node and highlights it.\n\n### CSS Parts\n\n-   `object` - The object wrapper element.\n-   `property` - The wrapper element of a property.\n-   `key` - The key element of a property.\n-   `primitive` - The primitive value.\n-   `primitive--string` - Applied when the primitive is a string.\n-   `primitive--number` - Applied when the primitive is a number.\n-   `primitive--boolean` - Applied when the primitive is a boolean.\n-   `primitive--null` - Applied when the primitive is a null.\n-   `preview` - The value preview of a property.\n-   `highlight` - The highlighted value.\n\n### CSS custom properties\n\nThe appearance of the component can be modified by changing the CSS custom properties\n\n```css\njson-viewer {\n    /* Background, font and indentation */\n    --background-color: #2a2f3a;\n    --color: #f8f8f2;\n    --font-family: Nimbus Mono PS, Courier New, monospace;\n    --font-size: 1rem;\n    --line-height: 1.2rem;\n    --indent-size: 0.5em;\n    --indentguide-size: 1px;\n    --indentguide-style: solid;\n    --indentguide-color: #333;\n    --indentguide-color-active: #666;\n    --indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);\n    --indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);\n    --outline-color: #e0e4e5;\n    --outline-width: 1px;\n    --outline-style: dotted;\n\n    /* Types colors */\n    --string-color: #a3eea0;\n    --number-color: #d19a66;\n    --boolean-color: #4ba7ef;\n    --null-color: #df9cf3;\n    --property-color: #6fb3d2;\n\n    /* Collapsed node preview */\n    --preview-color: #deae8f;\n\n    /* Search highlight color */\n    --highlight-color:  #c92a2a;\n}\n```\n\n### Basic Usage\n\nPut the JSON inside the element\n\n```html\n\u003cjson-viewer\u003e\n    { \"quiz\": { \"sport\": { \"q1\": { \"question\": \"Which one is correct team name in NBA?\", \"options\": [ \"New York Bulls\",\n    \"Los Angeles Kings\", \"Golden State Warriros\", \"Houston Rockets\" ], \"answer\": \"Houston Rockets\" } }, \"maths\": { \"q1\": {\n    \"question\": \"5 + 7 = ?\", \"options\": [ \"10\", \"11\", \"12\", \"13\" ], \"answer\": \"12\" }, \"q2\": { \"question\": \"12 - 8 = ?\",\n    \"options\": [ \"1\", \"2\", \"3\", \"4\" ], \"answer\": \"4\" } } } }\n\u003c/json-viewer\u003e\n```\n\n### Load the JSON dynamically\n\n```html\n\u003cjson-viewer id=\"json\"\u003e\u003c/json-viewer\u003e\n\n\u003cscript\u003e\n    document.querySelector('#json').data = { prop1: true, prop2: 'test' };\n\u003c/script\u003e\n```\n\n### Basic interactions\n\n```js\nconst viewer = document.querySelector('#json');\n\n// Expand/collapse/filter\nviewer.expand('**.name');\nviewer.collapse(/name/);\nviewer.filter('test.*.name');\n\n// Search\nconst searchIterator = viewer.search('value');\n// Scrolls to the node and highlight the value\nsearchIterator.next();\n```\n\n### Custom renderer\n_This is an experimental feature and it may change in the future_\n\nThe rendering of the values can be customized by defining a static method `customRenderer` in the custom element class.\nThe function receives the value and the path of the node and it should return a HTML node or a Lit's `TemplateResult` object.\n\n```js\nimport { JsonViewer } from '@alenaksu/json-viewer/JsonViewer.js';\n\ncustomElements.define(\n    'json-viewer',\n    class extends JsonViewer {\n        static styles = [\n            JsonViewer.styles,\n            css`\n                a {\n                    color: white;\n                    text-decoration: underline;\n                }\n            `\n        ];\n\n        static customRenderer(value, path) {\n            if (typeof value === 'string') {\n                if (URL.canParse(value)) {\n                    return html`\u003ca href=\"${value}\" target=\"_blank\"\u003e${value}\u003c/a\u003e`;\n                } else if (Date.parse(value)) {\n                    return new Date(value).toLocaleString();\n                }\n            } else if (typeof value === 'number') {\n                return value.toFixed(2);\n            }\n\n            return super.customRenderer(value);\n        }\n    }\n);\n\n```\n\n## Demo\n\nThe demo can also be run locally with\n\n```sh\nnpm run start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falenaksu%2Fjson-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falenaksu%2Fjson-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falenaksu%2Fjson-viewer/lists"}