{"id":15386665,"url":"https://github.com/zerodevx/svelte-json-view","last_synced_at":"2025-08-10T11:14:41.750Z","repository":{"id":57170587,"uuid":"357145521","full_name":"zerodevx/svelte-json-view","owner":"zerodevx","description":"View JSON data prettily","archived":false,"fork":false,"pushed_at":"2024-11-25T16:10:06.000Z","size":387,"stargazers_count":57,"open_issues_count":4,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-08-05T10:44:41.330Z","etag":null,"topics":["json-tree","pretty-print","svelte","vanillajs"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zerodevx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"zerodevx"}},"created_at":"2021-04-12T10:08:41.000Z","updated_at":"2025-07-17T21:56:49.000Z","dependencies_parsed_at":"2024-12-15T07:05:15.875Z","dependency_job_id":"78fb499e-9ea1-4cef-a639-0409e3a1a504","html_url":"https://github.com/zerodevx/svelte-json-view","commit_stats":{"total_commits":64,"total_committers":2,"mean_commits":32.0,"dds":0.015625,"last_synced_commit":"ee82b91f12229df6d04fc02d5df9d5fe8c7edcf6"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/zerodevx/svelte-json-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fsvelte-json-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fsvelte-json-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fsvelte-json-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fsvelte-json-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zerodevx","download_url":"https://codeload.github.com/zerodevx/svelte-json-view/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerodevx%2Fsvelte-json-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268930285,"owners_count":24330830,"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","status":"online","status_checked_at":"2025-08-05T02:00:12.334Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-tree","pretty-print","svelte","vanillajs"],"created_at":"2024-10-01T14:50:08.177Z","updated_at":"2025-08-10T11:14:41.716Z","avatar_url":"https://github.com/zerodevx.png","language":"Svelte","funding_links":["https://github.com/sponsors/zerodevx"],"categories":[],"sub_categories":[],"readme":"# svelte-json-view\n\n\u003e View JSON data prettily.\n\nDisplay JSON data in a tree-like expandable view. Use as a Svelte component or in Vanilla JS.\n\nHere's a\n[demo](https://zerodevx.github.io/json-pretty-print/H4sIAAAAAAAAA7WaXXOkNhaG7_MrtK692FQaAgIE8tU4tmfjxJ7MepykUklqS4Do1g4NHT5sd1L73_foC2g3bXs83krF0wLpICHpOe854tcvEPoL_kfo6N8iPzpGR8SLKWFBESakIJnvJYkfZn4YHS10NVHl_B4qeqa87E27mMShz1InS7PQCUmWOkkUJg4hHityFjCSpoON9iTrxC2Hdl3Tc3M1ZSWrMnnx6O94QXDiJtS22Iis6xt1b9V1m-Ovv96ULOOrusxd0X0d4PsA27psKesFoSnyLT-ty7qRbdOmvqtsvYqtlcHLuqkY-lDWbLi15DBK1aLga1Zyez2r1xtWbeWN9z9c31ycntg7UE2U8noprbXS2JtN3XQiYy60Gsaxqiv10K989A_qh1-i0KMOjnAy9D7PG962so4fxOikgr6d1n3TLdB5Kf5kt6Is-QK943foit-LrF4g6sX-0Dyt-042Pu9QLofNEavEGq3ZEgyxUvzRM9SKqkObphY5hx9rISuIHG1YIxi8ZsR7aIu4vMxysRGtyES1dNHJmnfTK6jol9ACQX85-qMXKOctb3qwCYXWRdd80_CVepeiQ1lfbpjtlO6PNCdtqkfVRQFWGRJNLyvUZQmN-rJk66xGonJ_a34bJqjhS9F2vOFq7WHPJ44XOV5w4yXHPj3GEXLgl-fZ-iXrRNfn8tXD2nSjIMTUt_fqamlvJp4bJ4TG5lbHlnImflUl9djJgIxtuZJkL8diBlPUr8eyHspYZvmkbr1e13k9qSxn40iVfje9KBoBj5x25C_zr9xL-bgZd5b1DUtFt2LobVlv8yNz_7-LAxb8GQuXNXSboZ9XouNPGsBzBmA_MzlN6BtYaCXfDlZ2xrdsOO9gOckm3_KyhCU92ZN_Q7_UPVqxW44o6quGsxytYcXBNm9dO78Fu61hSvjbphdq-bPNplSdVh2eR1zBo4BgwlOeQgGzh4izC8QizkvDIgtI4NACOBcmReSwNA6cOPPSPCe0oJjMIK5gZTvHuGARhoE77vwXMM728EnG_SSfCrMwh7iDgLs8ub748WqPcLfSVsoV4EpARr8-TLgQS8IRJ0jCYI5wfoROyhRMNyVH1zXLF-g7lvXrlC3Q-543XY2uFeN8j5A9xsEq4Wt0yyUoFNrEBkCRiVzkEkIKc2pvGvZM7ilkAXn0XkWcDexy0akGFSBM_7Fg4m03_r7nTQa7oxN1hUroUQNW9LMUzFr5EAtUF11sWrjP-o4PlXeYJ01b1KkK8Fg7Ii76FhghCW2rtKqfJ6aCQaodyrRnA9L1C6izjPGMQdt3dQuuN7cENxhCHV-D1xq4Di_WRVeaxPxev43JS9RG9ainboFNh6aA5qJzeW3wKvKP5L4Z2s7QwWPBlc56ANMX3QRek5rup5yBjx0fnEF8HITHHj3sDLAbhDSi0YwrcGjgejQmyQFfYKZnJLd-d2OZT1yCkPM_FqfAlwN7WPEV8P9dvUXfsqaB-ejq6kX8Py2ZgNl4z16I_7clX8vl8DPQonk2-kdUTcjve6-Lfs7jnLEgoRxHOY3zh-jHD9CfxHHggx52siLznBBj7qSpzx3ix3maFoz7RTSD_gPqNlh41Aeh8Rnktyt2h_xlzx-C_7K-480WFOR6I5fBs-F_8uHmx-uLOXkr7WXa3JsNePceCHPQASTY_xJFIHEDL_JnHAAFpXYjN73VuBfNnai0vP2ONy3fSnk78R0W_WdWaXI2CMtR0g4_JDB2RJtSphaV2n8YzoDolQ4D8D-9mdVVy0EzG49hoAY4kyXlYCymDQZNSd2yWlc_QNfOB8hNa3LLOQNKC8TKYNr6hH23I_2Tobpm6-BfFCsrwQC-H_SjJ4S2nYYLgx3bUrmpdgQ89FldUiN00Q8G7GZ0le0JB2g_ymXsSZHu-zdedIzxsRce5nLsuzQMYOLnwIxBNWGPEhvhPSTzjpyWccZYtK9qKsBhgrOOwzqe53M1bBt1Q475NfgMU7IsOWwidNJUsNFfptA5y1boJ3DJsNhfJtG3FVg47asK-rNi609Q6FOwvBDVKavgvydYndNIanXOCpLk_kRiG1bbNWJZzTgpYo9wJwhi4oR5gh1Ki8AJ0zyJIi-Nw5g9n9X-AnuRi-PPYLVNlTzFanC03RZ90zdV-wmJiIuz83_-sMfpjbSVSlNvgITL-rBEpxEQmmAHe8lcEiKKI9ARVVZnH9GHTq6DBToBf55zbjj9S918BEr7sbdH6fdWfhoEap6YQj7iTYX8LrrUGBmyCBZMokJKF5m_Wb8ROQMIDhoTFptRrmq_gzTOd6kG__Y2K3Ey4aCinGnaihHC77SS7wY6g_o1zHxcelLHi-FV3vge8O0Ye4_kIRLiEprQmM4xLqIuhVkZIrzHGCcmgJo6iMnVflI7n7_-emg7XTFwjqesuZ3Ivk_B2tlWpwz-w0A_vghrsIk-gohs6vpj-2ykTfbfhGfk-TiDxczuYG8026fkZx4QkgVB5McBjTLvIdKsZ7NIi_OcFTEBmhVJ7IQsBqRhQh1KAhrmBQ2jmM4g7VDmAS9I7LkR_gymzWUe5Cvdyzx8zyoOEQD_OMO0A0Q7PX93c3F6vse0j2DqTlp6I92dyPhhqCnZSX0nID6egRoJMTrjrAEyVFZ5vq2bFDRTfQdYu8jZChZEGCT7TLtQ6UmtrLQGmgDJoMTKNw2cn7jRl1Iq6WwrsM-G3GPj27rsN_CDm0oD_vJB0I7ReGtCYmAjSOAhR6AAOQAUwGWQqTWttquzB1cqA6sAqFSgzojcZ3zTcSC2MFQeGGvlniKjRrghttSlbEw16HzMTq6lm-ho5QNA5trEwaTimB9RUvdx0kaOFzqY3vj4GFNA7GHShoEbxoBmm9WdgjbGrhdiEhzK-A4v5HB690H2Vw1_UttO73jJvqkJh18p53tW98uStehdzcsXkRdIuGTomlUw25vVi9D7PetWEGnBrr8W9fPhO3Jiwt74_8DePMQsioqEp4SlBU0estdG1pa92M95SnHm5HmKndBjvkOTkDhZ5kUkIrGfRMknsDdY-J7vks-J_e1afTLrC7qNb9HNtv2EyP-DpO_1xekefVfSWCdtvWklfxuRHQ77Y6JFZYDJXNgfxRid33N5MmA15RWgGFZEC5gDgdmIP-uKAYETuk_gd4BR_jCuN0DWzFKBsEkcmhvmwEmp0DHks1G7Cm8VBe8tGXdCbQtrI111K3niZZTrqblvQ2jrAAx3p0-0fJOtpU9QpqCpOgiz-tME7FONrLunUt0TAavHO4bx3OQt1IhsrwfHMnaUj8lg1RObPDZ-RBkc_ZH1ATtZ7Snx1SuejPJJkUwdn954-Djwj8PgMLoD7EaeH8-R2_djF9MEk4PoBof2QN6ORf2yDp_RmYk8TH3evcohHaASnDUAu4E18SJkX7GmXTEQr6B4n5bbB47pGLoCmjw_STshy8uk8rMi_5CEJA-LkKZREsZR_BDV5AGqk8IjGfaIk7I0csKQZk6SF7nDQ5_JbxNAAhSf8g2Ch-URwGufz81E_ld1nW_Rt7AG6zu2fTarv7m4vLw6P9tD9VqaWxlrb1JYuWueH4a1FwOsYwhb49kMQBhRdAIDL8XwJQLEdk1rv0Som24lr9SlkMjGkZfsIft89lBKa1NNQHsQpTlkdLQBiwrCh7wmEPpMJnEBniqZO3wioK1Jcg0ZBiVZx28IND-1cYCspJmpOmaMBwW8k6zY8QZa4Q6nfhrQoPMHXu50eDjPm6pbVWN3lOOTBwob9GvB_mHyTCmpDe8HjCs4a3-gHjWcH1q7LrrRD5RxiIS-DgdsvSFq2HWsrRgSMS76F7QaPxNR8Yd6oA4j1ERq_zPrPc3nJ5NBPO4nYgf2sgd-wj_2yXH0SL7YiWOZE_Y8GzlPPUUkz1rCgNpDnX2N_wjmJxmS_eSx9Nljyayz8YJe06_hJ74XDbyZCp3DYqy7p1O9c47iWiyXLegtVj3nQHDOUZyuOIhaBqDqW_5sX7ELt4m7iF7kLr74_X8qHdwptSYAAA/).\n\n## Usage\n\nInstall the package:\n\n```\n$ npm i @zerodevx/svelte-json-view\n```\n\n### Svelte\n\nIf you're using this in a Svelte app:\n\n```html\n\u003cscript\u003e\n  import { JsonView } from '@zerodevx/svelte-json-view'\n\n  const json = { foo: 'bar' }\n\u003c/script\u003e\n\n\u003cJsonView {json} /\u003e\n```\n\n### Vanilla JS\n\nFor other applications with a bundler:\n\n```js\n// Import the compiled code from `/dist`\nimport { JsonView } from '@zerodevx/svelte-json-view/dist'\n\nconst app = new JsonView({\n  target: document.body   // node to render into\n})\n\napp.$set({\n  json: { foo: 'bar' },   // object to prettify\n  ...                     // any other props\n})\n```\n\nOr load via CDN:\n\n```html\n\u003chead\u003e\n  ...\n  \u003c!-- Load `JsonView` from CDN --\u003e\n  \u003cscript defer src=\"https://cdn.jsdelivr.net/npm/@zerodevx/svelte-json-view@1\"\u003e\u003c/script\u003e\n  \u003c!-- Register the view --\u003e\n  \u003cscript type=\"module\"\u003e\n    const app = new JsonView({\n      target: document.querySelector('#target'), // node to render into\n      props: {\n        json: { foo: 'bar' }, // object to prettify\n        ...                   // any other props\n      }\n    })\n  \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"target\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n```\n\n## Theming\n\nIn general, use CSS variables.\n\n| Name                           | Default        | Description                                   |\n| ------------------------------ | -------------- | --------------------------------------------- |\n| `--jsonPaddingLeft`            | `1rem`         | Amount of left padding to apply at each depth |\n| `--jsonBorderLeft`             | `1px dotted`   | Style applied to left border for each depth   |\n| `--jsonBracketColor`           | `currentcolor` | Colour for brackets `[`, `{`, `}` and `]`     |\n| `--jsonBracketHoverBackground` | `#e5e7eb`      | Hover background for brackets                 |\n| `--jsonSeparatorColor`         | `currentcolor` | Colour for separators `:` and `,`             |\n| `--jsonKeyColor`               | `currentcolor` | Colour for keys                               |\n| `--jsonValColor`               | `#9ca3af`      | Default colour for values                     |\n| `--jsonValStringColor`         | `#059669`      | Colour for `string` values                    |\n| `--jsonValNumberColor`         | `#d97706`      | Colour for `number` values                    |\n| `--jsonValBooleanColor`        | `#2563eb`      | Colour for `boolean` values                   |\n\nTo apply your own font family (a monospaced font is recommended) or apply custom CSS var overrides,\ntry wrapping the component and applying these styles to the wrapper like so:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cdiv class=\"wrap\"\u003e\n  \u003cJsonView {json} /\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n  .wrap {\n    font-family: monospace;\n    font-size: 14px;\n    --jsonBorderLeft: 2px dashed red;\n    --jsonValColor: blue;\n    ...\n  }\n\u003c/style\u003e\n```\n\n## Props\n\n| Name    | Type     | Default     | Description                      |\n| ------- | -------- | ----------- | -------------------------------- |\n| `json`  | `object` | `undefined` | Un-stringified object to display |\n| `depth` | `number` | `Infinity`  | Initial expansion depth          |\n\n## Development\n\nLibrary is packaged via [SvelteKit](https://kit.svelte.dev/docs/packaging). Standard Github\n[contribution workflow](https://docs.github.com/en/get-started/quickstart/contributing-to-projects)\napplies.\n\n### Tests\n\nEnd-to-end testing via [Playwright](https://github.com/microsoft/playwright). To run tests\nheadlessly:\n\n```\n$ npm run test\n```\n\n## Changelog\n\nPlease refer to the [releases](https://github.com/zerodevx/svelte-json-view/releases) page.\n\n## License\n\nISC\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerodevx%2Fsvelte-json-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzerodevx%2Fsvelte-json-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerodevx%2Fsvelte-json-view/lists"}