{"id":21836619,"url":"https://github.com/teemukoivisto/svelte-tree-view","last_synced_at":"2025-04-14T09:34:22.717Z","repository":{"id":46313718,"uuid":"396332370","full_name":"TeemuKoivisto/svelte-tree-view","owner":"TeemuKoivisto","description":"Svelte component to view and explore JavaScript objects in a tree layout.","archived":false,"fork":false,"pushed_at":"2023-07-24T12:04:29.000Z","size":935,"stargazers_count":24,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T12:56:09.656Z","etag":null,"topics":["base16-theme","svelte","tree-view","typescript"],"latest_commit_sha":null,"homepage":"https://teemukoivisto.github.io/svelte-tree-view/","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/TeemuKoivisto.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-08-15T11:43:39.000Z","updated_at":"2025-02-25T14:19:25.000Z","dependencies_parsed_at":"2024-06-19T01:31:24.932Z","dependency_job_id":"dfa207f2-79bf-47ef-88a2-8805f2e6f5fb","html_url":"https://github.com/TeemuKoivisto/svelte-tree-view","commit_stats":{"total_commits":141,"total_committers":2,"mean_commits":70.5,"dds":0.04255319148936165,"last_synced_commit":"1b7b557b3c4c687a0a4fa439447da57449399278"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeemuKoivisto%2Fsvelte-tree-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeemuKoivisto%2Fsvelte-tree-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeemuKoivisto%2Fsvelte-tree-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeemuKoivisto%2Fsvelte-tree-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TeemuKoivisto","download_url":"https://codeload.github.com/TeemuKoivisto/svelte-tree-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248854495,"owners_count":21172372,"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":["base16-theme","svelte","tree-view","typescript"],"created_at":"2024-11-27T20:40:50.419Z","updated_at":"2025-04-14T09:34:22.682Z","avatar_url":"https://github.com/TeemuKoivisto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [svelte-tree-view](https://github.com/TeemuKoivisto/svelte-tree-view) [![version](https://img.shields.io/npm/v/svelte-tree-view?style=flat-square)](https://www.npmjs.com/package/svelte-tree-view) [![package minified size](https://img.shields.io/bundlephobia/min/svelte-tree-view?style=flat-square\u0026color=important)](https://bundlephobia.com/result?p=svelte-tree-view) [![package size](https://img.shields.io/bundlephobia/minzip/svelte-tree-view?style=flat-square)](https://bundlephobia.com/result?p=svelte-tree-view)\n\nLibrary to show Javascript objects in a nice tree layout. It's written in Svelte but since it compiles to pure JS it can be used anywhere (although to customize the rendered nodes you must Svelte).\n\n`npm i svelte-tree-view`\n\n### [Demo site](https://teemukoivisto.github.io/svelte-tree-view/)\n\n### [Svelte REPL](https://svelte.dev/repl/4f8c82da5eac4e868ff40193ee84e84a?version=3.44.1)\n\n## How to use\n\nThe package should work without extra setup with both SvelteKit and Vite, see examples in `packages/site` and `packages/vite-site`. Previously, at least with Rollup, you had to add a `mainFields` property with values like `['svelte', 'module', 'browser', 'main']` to ensure it was imported as a Svelte component.\n\nTo use it:\n\n```tsx\nimport TreeView from 'svelte-tree-view'\n\n...\n\n\u003cTreeView\n  data={selectedEntry.contentDiff}\n  showLogButton\n  showCopyButton\n  valueComponent={DiffValue}\n  recursionOpts={{\n    maxDepth: 16,\n    mapChildren: mapDocDeltaChildren,\n    shouldExpandNode: () =\u003e true\n  }}\n/\u003e\n```\n\nOr if you are not using Svelte (NOTE: if you're using TS you must install svelte as a devDependency for the types):\n\n```ts\nimport { TreeView } from 'svelte-tree-view'\n\nconst treeView = new TreeView({\n  target: document.querySelector('#mount-point') as HTMLElement,\n  props: {\n    data: {\n      a: [1, 2, 3],\n      b: new Map([\n        ['c', { d: null }],\n        ['e', { f: [9, 8, 7] }]\n      ])\n    },\n    recursionOpts: {\n      maxDepth: 4\n    }\n  }\n})\n```\n\nTo override default styles I suggest using child or element selector to get enough specificity:\n\n```svelte\n\u003cdiv class=\"wrapper\"\u003e\n  \u003cTreeView /\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n  .wrapper \u003e :global(.svelte-tree-view) {\n    ...;\n  }\n  /* OR */\n  :global(ul.svelte-tree-view) {\n    ...;\n  }\n\u003c/style\u003e\n```\n\n## API\n\nThe full typings as copied from the source are:\n\n```ts\nexport type ValueType =\n  | 'array'\n  | 'map'\n  | 'set'\n  | 'date'\n  | 'object'\n  | 'function'\n  | 'string'\n  | 'number'\n  | 'bigint'\n  | 'boolean'\n  | 'symbol'\n  | 'null'\n  | 'undefined'\n\nexport interface TreeNode\u003cT = any\u003e {\n  id: string // ID generated from the path to this node eg \"[0,1,2]\"\n  index: number // Index of this node in the parent object as its values are iterated\n  key: string // Key of this node eg \"1\" for an array key or \"foo\" for an object\n  value: T // The value mapped to this key\n  depth: number\n  collapsed: boolean\n  type: ValueType\n  path: number[]\n  parentId: string | null\n  // Circularity is checked by object identity to prevent recursing the same values again\n  circularOfId: string | null\n  children: TreeNode[]\n}\n\nexport interface Base16Theme {\n  scheme?: string\n  author?: string\n  base00: string // Default Background\n  base01: string // Lighter Background (Used for status bars, line number and folding marks)\n  base02: string // Selection Background\n  base03: string // Comments, Invisibles, Line Highlighting\n  base04: string // Dark Foreground (Used for status bars)\n  base05: string // Default Foreground, Caret, Delimiters, Operators\n  base06: string // Light Foreground (Not often used)\n  base07: string // Light Background (Not often used)\n  base08: string // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted\n  base09: string // Integers, Boolean, Constants, XML Attributes, Markup Link Url\n  base0A: string // Classes, Markup Bold, Search Text Background\n  base0B: string // Strings, Inherited Class, Markup Code, Diff Inserted\n  base0C: string // Support, Regular Expressions, Escape Characters, Markup Quotes\n  base0D: string // Functions, Methods, Attribute IDs, Headings\n  base0E: string // Keywords, Storage, Selector, Markup Italic, Diff Changed\n  base0F: string // Deprecated, Opening/Closing Embedded Language Tags, e.g. \u003c?php ?\u003e\n}\n\n// As described in https://stackoverflow.com/questions/67697298/svelte-components-as-object-properties/67737182#67737182\nexport type ValueComponent = new (...args: any) =\u003e SvelteComponentTyped\u003c{\n  node: TreeNode\n  defaultFormatter?: (val: any) =\u003e string | undefined\n}\u003e\n\nexport interface TreeViewProps {\n  data: unknown // Data can be basically any non-primitive value\n  class?: string // Top node has 'svelte-tree-view' class by default\n  theme?: Base16Theme\n  showLogButton?: boolean\n  showCopyButton?: bool  ean\n  valueComponent?: ValueComponent // The Svelte component to replace the default value-as-string presentation\n  recursionOpts?: TreeRecursionOpts\n  // For custom formatting of the value string. Returning undefined will pass the value to the default formatter\n  valueFormatter?: (val: any, n: TreeNode) =\u003e string | undefined\n}\n\nexport interface TreeRecursionOpts {\n  maxDepth?: number // The default maxDepth is 16\n  // Quick and dirty way to prevent recursing certain object keys instead of overriding shouldExpandNode\n  omitKeys?: string[]\n  stopCircularRecursion?: boolean // Stops recursing objects already recursed\n  isCircularNode?: (n: TreeNode, iteratedValues: Map\u003cany, TreeNode\u003e) =\u003e boolean // For custom circularity detection magic\n  shouldExpandNode?: (n: TreeNode) =\u003e boolean // Will auto-expand or collapse values as data is provided\n  mapChildren?: (val: any, type: ValueType, parent: TreeNode) =\u003e [string, any][] | undefined // For customizing the created key-value pairs\n}\n\nexport class TreeView extends SvelteComponentTyped\u003cTreeViewProps\u003e {}\nexport default TreeView\n```\n\n## Theming\n\nThis library uses base16 theming, similar to react-json-tree. So basically instead of theming each type (string, number, undefined etc) separately, you use the same color for all similar values. Here's a repo that might explain it better https://github.com/chriskempson/base16\n\nThe example theme is the monokai theme from react-json-tree with changed background color. You can define your own theme or use one from for example here https://github.com/reduxjs/redux-devtools/tree/75322b15ee7ba03fddf10ac3399881e302848874/src/react/themes\n\nTo use a theme, you can either provide an object or set CSS variables (recommended).\n\nSo either\n\n```tsx\nconst theme = {\n  scheme: 'google',\n  author: 'seth wright (http://sethawright.com)',\n  base00: '#1d1f21',\n  base01: '#282a2e',\n  base02: '#373b41',\n  base03: '#969896',\n  base04: '#b4b7b4',\n  base05: '#c5c8c6',\n  base06: '#e0e0e0',\n  base07: '#ffffff',\n  base08: '#CC342B',\n  base09: '#F96A38',\n  base0A: '#FBA922',\n  base0B: '#198844',\n  base0C: '#3971ED',\n  base0D: '#3971ED',\n  base0E: '#A36AC7',\n  base0F: '#3971ED'\n}\n\n\u003cdiv class=\"wrapper\"\u003e\n  \u003cTreeView theme={theme} /\u003e\n\u003c/div\u003e\n```\n\nor\n\n```css\n/* This is the example monokai theme */\n.wrapper {\n  --tree-view-base00: #363755;\n  --tree-view-base01: #604d49;\n  --tree-view-base02: #6d5a55;\n  --tree-view-base03: #d1929b;\n  --tree-view-base04: #b79f8d;\n  --tree-view-base05: #f9f8f2;\n  --tree-view-base06: #f7f4f1;\n  --tree-view-base07: #faf8f5;\n  --tree-view-base08: #fa3e7e;\n  --tree-view-base09: #fd993c;\n  --tree-view-base0A: #f6bf81;\n  --tree-view-base0B: #b8e248;\n  --tree-view-base0C: #b4efe4;\n  --tree-view-base0D: #85d9ef;\n  --tree-view-base0E: #be87ff;\n  --tree-view-base0F: #d6724c;\n}\n```\n\nworks.\n\n## Other\n\n[A little explanation](https://github.com/TeemuKoivisto/svelte-tree-view/blob/master/HOW.md) on the internal logic.\n\n## Caveats\n\nRendering very large trees is not fast. The same happens with say react-json-tree but I assume that by using some clever hacks you _could_ make it faster. Like VSCode fast. In general, it seems the use of recursive components is non-optimal regardless of the framework.\n\n## How to develop locally\n\nYou must have pnpm installed globally.\n\n1. `pnpm`\n2. `pnpm start`\n\nThis should start the SvelteKit app at http://localhost:5185 that hot-reloads changes to the library.\n\n## Similar libraries\n\nWhile this library was basically written from scratch, its UI and API borrows from some existing libraries.\n\n- [react-json-tree](https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree)\n- [react-json-view](https://github.com/mac-s-g/react-json-view)\n- [svelte-json-tree](https://github.com/tanhauhau/svelte-json-tree)\n\n## Contributing\n\nPRs \u0026 issues are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteemukoivisto%2Fsvelte-tree-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteemukoivisto%2Fsvelte-tree-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteemukoivisto%2Fsvelte-tree-view/lists"}