{"id":13625574,"url":"https://github.com/1602/json-viewer","last_synced_at":"2025-10-20T15:05:17.533Z","repository":{"id":57285484,"uuid":"128641802","full_name":"json-tools/json-viewer","owner":"json-tools","description":"JSON value viewer.","archived":false,"fork":false,"pushed_at":"2024-04-08T15:11:21.000Z","size":425,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-13T21:36:47.081Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://json-tools.github.io/json-viewer/","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/json-tools.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}},"created_at":"2018-04-08T13:02:24.000Z","updated_at":"2024-04-08T15:11:01.000Z","dependencies_parsed_at":"2024-04-21T17:40:18.432Z","dependency_job_id":"86aa7280-9548-463d-b4fb-eaa9759fa95b","html_url":"https://github.com/json-tools/json-viewer","commit_stats":null,"previous_names":["1602/json-viewer"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json-tools%2Fjson-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json-tools%2Fjson-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json-tools%2Fjson-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json-tools%2Fjson-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/json-tools","download_url":"https://codeload.github.com/json-tools/json-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223700608,"owners_count":17188363,"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-08-01T21:01:57.836Z","updated_at":"2025-10-20T15:05:12.174Z","avatar_url":"https://github.com/json-tools.png","language":"Elm","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"# json-viewer\n\nJSON value viewer. [Demo](https://json-tools.github.io/json-viewer/).\n\n## When to use this module\n\n### Debugging\n\nAlternative to state debugger. In case if you want to see a value, but don't want to write decoder and presentation.\n\n### Presentation of unknown data structures\n\nIn the times of continuous delivery we often encounter unknown data structures even on production (think of rich error details object, which may contain information about the context of an error).\n\n## Features\n\n- [x] standard init-update-view API\n- [x] expand/collapse of nested values (object, array)\n- [x] preview of expandable values\n- [x] visual highlight of some JSON values (number, string, null, boolean)\n- [x] custom element `\u003cjson-viewer value='{ \"foo\": \"bar\" }'\u003e\u003c/json-viewer\u003e`\n- [x] preview of object/array with values for collapsed nodes\n- [x] display newlines characters as ↵\n\n## Upcoming features\n\n- [ ] configurable appearance\n- [ ] display hidden unicode characters\n- [ ] configurable pagination for long arrays\n- [ ] node operation (copy to clipboard, save as file, etc..)\n- [ ] configurable expandable view of long strings\n- [ ] configurable preview of media data\n\n## Usage\n\nThere are two ways of using this component:\n\n- as custom element (using web-components API)\n- as elm library\n\n### Custom element\n\n1. Register custom element\n```\n\u003cscript src=\"//unpkg.com/json-viewer-custom-element\"\u003e\u003c/script\u003e\n```\n\n2. Use in your code, as html\n```\n\u003cjson-viewer value='{ \"foo\": \"bar\" }'\u003e\u003c/json-viewer\u003e\n```\n\nCurrently there's only one attribute supported: `value` which should be a valid JSON value, more attributes will be added in future releases in order to support additional feature, such as copying node to clipboard. [See demo of web-component usage](http://jsfiddle.net/6w7jfrq5/26).\n\n3. Customize web component\n\nExample styling using colors from dark theme of chrome devtools\n\n```\n--font-family: menlo, monospace;\n--preview-background: transparent;\n--key-color: #e36eec;\n--string-value-color: #e93f3b;\n--numeric-value-color: #9980ff;\n--null-value-color: #7f7f7f;\n--boolean-value-color: #9980ff;\n--toggle-color: #bbb;\n```\n\nTo replace collapse/expand button content use\n\n```\n--collapsed-node-bullet: \"▶\"\n--expanded-node-bullet: \"▼\"\n```\n\n### Elm library\n\n1. Install dependency\n\n```\nelm-package install 1602/json-viewer\n```\n\n2. Use in your code, as elm component. This component uses standard init-update-view cycle. Check [API documentation](http://package.elm-lang.org/packages/1602/json-viewer/latest) for examples of usage.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1602%2Fjson-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F1602%2Fjson-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1602%2Fjson-viewer/lists"}