{"id":16793070,"url":"https://github.com/maxwroc/sonj-review","last_synced_at":"2025-03-22T01:30:42.170Z","repository":{"id":45269112,"uuid":"369012291","full_name":"maxwroc/sonj-review","owner":"maxwroc","description":"Extendable JSON viewer","archived":false,"fork":false,"pushed_at":"2024-09-20T11:28:34.000Z","size":453,"stargazers_count":3,"open_issues_count":7,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T06:51:25.165Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/maxwroc.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}},"created_at":"2021-05-19T22:05:12.000Z","updated_at":"2024-09-20T11:26:24.000Z","dependencies_parsed_at":"2024-09-16T15:53:16.948Z","dependency_job_id":"329c4959-a775-4d19-b3ab-a1a35b57f526","html_url":"https://github.com/maxwroc/sonj-review","commit_stats":{"total_commits":98,"total_committers":1,"mean_commits":98.0,"dds":0.0,"last_synced_commit":"f05eba176f8acdc759165d87df8cb7f702d15361"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":"maxwroc/typescript-project-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwroc%2Fsonj-review","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwroc%2Fsonj-review/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwroc%2Fsonj-review/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwroc%2Fsonj-review/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxwroc","download_url":"https://codeload.github.com/maxwroc/sonj-review/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244893321,"owners_count":20527574,"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":[],"created_at":"2024-10-13T08:48:05.294Z","updated_at":"2025-03-22T01:30:41.835Z","avatar_url":"https://github.com/maxwroc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sonj-review / json-viewer\n[![npm](https://img.shields.io/npm/dm/sonj-review?label=npm%20downloads)](https://www.npmjs.com/package/sonj-review)\n[![npm version](https://img.shields.io/npm/v/sonj-review?color=blue)](https://www.npmjs.com/package/sonj-review)\n![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/maxwroc/sonj-review/Pull%20Request%20Testing/master?label=tests)\n\nYet another json viewer lib. \n\n## Features\n\n* View any size of JSON as long your browser can parse/load it\n* Vanilla javascript (no additional libs required)\n* Built-in plugins\n  * [Auto expand](#auto-expand)\n  * [Search](#search)\n  * [Groups](#groups)\n  * [Teaser](#teaser) (displaying number of elements/properties; specified property values)\n  * [Truncate](#truncate)\n  * [Actions menu](#actions-menu)\n* Extensible\n* Easy to adjust CSS\n\n## Demo \n\nhttps://maxwroc.github.io/sonj-review/\n\n## Initialization\n\n```js\nlet plugins = [];\nlet jsonViewer = new SonjReview.JsonViewer(data, \"NameOfTheRootNode\", plugins);\njsonViewer.render(\"container-id\");\n```\n\n## Plugins\n\nNote: plugin order matters - please be aware of it when initializing the json viewer (use the order as listed above/below)\n\n### Auto expand\n\nBy default JSON nodes are rendered collapsed. This plugin alows you to change it. You can specify depth for which nodes should be rendered open.\n\n```js\n// root node and it's children will be rendered open\nconst autoExpandPlugin = SonjReview.plugins.autoExpand(2);\n```\n![image](https://user-images.githubusercontent.com/8268674/124646232-4b986b80-de8c-11eb-822a-8bf9b038ebe6.png)\n\n### Search \n\nAllows you to find a string in the JSON regardless if it is in the property name or value.\n\n```js\nconst searchPlugin = SonjReview.plugins.search(\n    data, {\n        // whether to turn on/off case-sensitive search\n        caseSensitive: false\n    });\n\nconst searchInput = document.getElementById(\"search-box\");\nsearchInput.addEventListener(\"keyup\", evt =\u003e evt.keyCode == 13 \u0026\u0026 searchPlugin.query(searchInput.value));\n```\n\n### Groups\n\nLimit the number of rendered child nodes. This way your browser won't stuck trying to render very big object. Properties or elements which won't be rendered are available in expandable groups.\n\n```js\n// limit number of rendered child nodes to 10 (and then group by 10)\nconst groupsPlugin = SonjReview.plugins.propertyGroups(10);\n```\n\n![image](https://user-images.githubusercontent.com/8268674/124648967-cd3dc880-de8f-11eb-9e76-4bc1478c5369.png)\n\n\n### Teaser\n\nDisplays additional info next to the collapsed node. You can control whether the number of elements (in case of arrays) or properties (in case of objects) should be shown. You can specify as well property names which values should be shown.\n\n```js\n// root node and it's children will be rendered open\nconst teaserPlugin = SonjReview.plugins.propertyTeaser({ \n    properties: { \n        // list of the property names (their values will be shown whenever they exist)\n        names: [\"fname\", \"sname\", \"email\"], \n        // limit of the number of properties to show \n        // (so you can specify longer prioritized list above but show only few of them found)\n        maxCount: 2,\n        // whether to print property name next to the value\n        printNames: false,\n        // max length of the single value\n        maxValueLength: 20,\n    },\n    // max length of the total teaser length\n    maxTotalLenght: 40,\n    // whether to display counts (of array items or properties)\n    showCounts: true,\n}));;\n```\n\n![image](https://user-images.githubusercontent.com/8268674/124646420-869a9f00-de8c-11eb-9895-c60a9b0b1551.png)\n\n### Truncate\n\nIf you know that your JSON may contain long values/strings this plugin will help you.\n\n```js\nconst truncatePlugin = SonjReview.plugins.truncate({ \n    // max length for property name\n    maxNameLength: 20,\n    // max length for property value\n    maxValueLength: 40,\n    // whether to show full length info pill\n    showLengthPill: true, \n    // whether to make info pill clickable (showing full, not truncated value)\n    enableClickToExpand: true,\n})\n```\n\n![image](https://user-images.githubusercontent.com/8268674/124651325-ae8d0100-de92-11eb-9e0c-f4c2402cbdac.png)\n\n\n### Actions menu\n\nHandy menu allowing you to do various actions. You can easily add your custom ones.\n\n```js\n// default menu items (copy name/value, copy formatted JSON)\nconst menuPlugin = SonjReview.plugins.propertyMenu();\n```\n\n![image](https://user-images.githubusercontent.com/8268674/124652129-a4b7cd80-de93-11eb-83a6-c4ae483ceb35.png)\n\n\n#### Default menu items\n* `copyName` - Copies property name to clippord\n* `copyValue` - Copies property value to clipboard (in case of the object it converts it to JSON string)\n* `copyFormattedValue` - Copies formatted JSON value (this option is available only for object value types) \n\n#### Converting JSON string to object - menu item\n\n![image](https://user-images.githubusercontent.com/8268674/138968966-0dcdd245-caf1-4caa-943a-b5dda35b4f42.gif)\n\nThis menu item has to be added manually (it is not a part of the default menu items set). It appears only when value looks like a JSON object.\n\n```typescript\nconst menuItems = SonjReview.plugins.propertyMenu.items;\nconst menuPlugin = SonjReview.plugins.propertyMenu([\n    menuItems.parseJsonValue, // menu item for converting JSON strings\n    menuItems.copyName,\n    menuItems.copyValue,\n]\n```\n\n#### Sort menu item\n\nSorts values (in case of arrays) or properties (in case of objects). Sorting twice does the reverse/descending sort.\n\nThis menu item has to be added manually.\n\n```typescript\nconst menuItems = SonjReview.plugins.propertyMenu.items;\nconst menuPlugin = SonjReview.plugins.propertyMenu([\n    menuItems.sortProperties, // sorting menu item\n    menuItems.copyName,\n    menuItems.copyValue,\n]\n```\n\n#### Custom menu item definition example\n\n```typescript\nconst copyFormattedValue: IPropertyMenuItem = {\n    text: \"Copy formatted JSON\",\n    isHidden: context =\u003e !context.node.isExpandable,\n    onClick: context =\u003e {\n        navigator.clipboard.writeText(\n            context.node.isExpandable ? \n                JSON.stringify(context.node.data, null, 2) : \n                context.node.data);\n    }\n};\n```\nInitialization with custom menu item example\n\n```js\nconst menuPlugin = SonjReview.plugins.propertyMenu([\n    // using one of the default menu items\n    SonjReview.plugins.propertyMenu.items.copyName,\n    // your custom menu item\n    myCustomMenuItem,\n    // using one of the default menu items\n    SonjReview.plugins.propertyMenu.items.copyFormattedValue,\n]);\n```\n\n## CDN\n\n* unpkg: [[sonj-review.min.js](https://unpkg.com/sonj-review/dist/sonj-review.min.js)]\n* jsdelivr: [[sonj-review.min.js](https://cdn.jsdelivr.net/npm/sonj-review/dist/sonj-review.min.js)]\n\n## Development\n\nThis component is still under development so please be aware that there might be breaking changes in the next releases!\n\n## Feedback\n\nLike it? **Star it!**\n\nIf something doesn't work or you have any suggestions how to improve it please create an issue on github.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxwroc%2Fsonj-review","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxwroc%2Fsonj-review","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxwroc%2Fsonj-review/lists"}