{"_id":"@abeedoo/dendrite","_rev":"3-2019bc187afcb2183dcda043680ff7ec","name":"@abeedoo/dendrite","dist-tags":{"latest":"2.0.2"},"versions":{"2.0.0":{"name":"@abeedoo/dendrite","version":"2.0.0","keywords":["mindmap","visualization","canvas","svg","interactive","tree","dendrite"],"author":{"name":"Clifford Meece","email":"clifford.meece@me.com"},"license":"MIT","_id":"@abeedoo/dendrite@2.0.0","maintainers":[{"name":"meecect","email":"clifford.meece@me.com"}],"homepage":"https://github.com/abeedoolabs/dendrite#readme","bugs":{"url":"https://github.com/abeedoolabs/dendrite/issues"},"dist":{"shasum":"69a8f00440f0149a38bc9215adc5ec41393e121b","tarball":"https://registry.npmjs.org/@abeedoo/dendrite/-/dendrite-2.0.0.tgz","fileCount":5,"integrity":"sha512-c8/jxaC403vM16+t5fY0tOi8UNTUt7/fCyCUI29xZUk23WKoe96OjXCGaSsVgRA8tFFsBcEPpSFsMhkGShs6/Q==","signatures":[{"sig":"MEYCIQDYstPRau4sE/eeUmW7JrdNs8eaeGg1K9Yjzk26BZGZwAIhAK9yV+0pbxQgSMUK7MYJk3mqZdID44E0OPE2s5lg6p1A","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48101},"main":"dist/dendrite.min.js","type":"module","module":"dist/dendrite.esm.js","exports":{".":{"import":"./dist/dendrite.esm.js","default":"./dist/dendrite.min.js"},"./svelte":"./src/svelte/DendriteMap.svelte"},"gitHead":"824f99c70bb5747889938f7efec418dbb3daa055","scripts":{"dev":"open demo.html","build":"node build.js"},"_npmUser":{"name":"meecect","email":"clifford.meece@me.com"},"repository":{"url":"git+https://github.com/abeedoolabs/dendrite.git","type":"git"},"_npmVersion":"10.9.3","description":"Interactive mind map visualization — Canvas and SVG renderers","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.25.0"},"_npmOperationalInternal":{"tmp":"tmp/dendrite_2.0.0_1778695263797_0.8340641007442595","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@abeedoo/dendrite","version":"2.0.1","keywords":["mindmap","visualization","canvas","svg","interactive","tree","dendrite"],"author":{"name":"Clifford Meece","email":"clifford.meece@me.com"},"license":"MIT","_id":"@abeedoo/dendrite@2.0.1","maintainers":[{"name":"meecect","email":"clifford.meece@me.com"}],"homepage":"https://github.com/abeedoolabs/dendrite#readme","bugs":{"url":"https://github.com/abeedoolabs/dendrite/issues"},"dist":{"shasum":"14e2fe1cec1642c1bc69c080412db0649cbf7283","tarball":"https://registry.npmjs.org/@abeedoo/dendrite/-/dendrite-2.0.1.tgz","fileCount":6,"integrity":"sha512-Hxpaip6BJcJebLAdBidrdHdt4UdbbdksSRU8eXBnqrpp3G7Lc7WdycYbpaG/6mS3pYRneDi1r5e6vw0lvgXe0Q==","signatures":[{"sig":"MEUCIE+/a5LFE2PFBDj/TDrx4FUjro0VJqIzLB7gP0AaQRaxAiEAoJzF1PPYpygC2JhLA5TV3hom7oCSTHrtisAH1iNcXiQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":49755},"main":"dist/dendrite.min.js","type":"module","module":"dist/dendrite.esm.js","exports":{".":{"import":"./dist/dendrite.esm.js","default":"./dist/dendrite.min.js"},"./svelte":"./src/svelte/DendriteMap.svelte"},"gitHead":"981a997fb4bc716778e1fbfe8d66fd7efea211a1","scripts":{"dev":"open demo.html","build":"node build.js"},"_npmUser":{"name":"meecect","email":"clifford.meece@me.com"},"repository":{"url":"git+https://github.com/abeedoolabs/dendrite.git","type":"git"},"_npmVersion":"10.9.3","description":"Interactive mind map visualization — Canvas and SVG renderers","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.25.0"},"_npmOperationalInternal":{"tmp":"tmp/dendrite_2.0.1_1778695919147_0.5323349888651654","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@abeedoo/dendrite","version":"2.0.2","description":"Interactive mind map visualization — Canvas and SVG renderers","type":"module","main":"dist/dendrite.min.js","module":"dist/dendrite.esm.js","exports":{".":{"import":"./dist/dendrite.esm.js","default":"./dist/dendrite.min.js"},"./svelte":"./src/svelte/DendriteMap.svelte"},"scripts":{"build":"node build.js","dev":"open demo.html"},"keywords":["mindmap","visualization","canvas","svg","interactive","tree","dendrite"],"author":{"name":"Clifford Meece","email":"clifford.meece@me.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/abeedoolabs/dendrite.git"},"devDependencies":{"esbuild":"^0.25.0"},"_id":"@abeedoo/dendrite@2.0.2","gitHead":"62fc950bcc7afc2089dcc36586bdb7e103e15285","bugs":{"url":"https://github.com/abeedoolabs/dendrite/issues"},"homepage":"https://github.com/abeedoolabs/dendrite#readme","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-BIX4yRGDxIpCcslPfin4NzdIiAdkYtdNo2pF1Hz3drPzlqQuQ9GG1jG0HXwXZg9CP766xninzZip45Bbdz0ZWg==","shasum":"e06033824cf3f3ae9e5f105b6abe110c7c36de5e","tarball":"https://registry.npmjs.org/@abeedoo/dendrite/-/dendrite-2.0.2.tgz","fileCount":6,"unpackedSize":49789,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDPJg5wYxvjXhnZ5rIK08OBeAtyHveuudFIhzuAjJi7agIhAJ2EWuZV7ja6KNbRJTDxOpSQu3QAANXvv26H6d8GX5t7"}]},"_npmUser":{"name":"meecect","email":"clifford.meece@me.com"},"directories":{},"maintainers":[{"name":"meecect","email":"clifford.meece@me.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dendrite_2.0.2_1778696287653_0.4741360405388755"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-13T18:01:03.667Z","modified":"2026-05-13T18:18:07.976Z","2.0.0":"2026-05-13T18:01:03.979Z","2.0.1":"2026-05-13T18:11:59.334Z","2.0.2":"2026-05-13T18:18:07.834Z"},"bugs":{"url":"https://github.com/abeedoolabs/dendrite/issues"},"author":{"name":"Clifford Meece","email":"clifford.meece@me.com"},"license":"MIT","homepage":"https://github.com/abeedoolabs/dendrite#readme","keywords":["mindmap","visualization","canvas","svg","interactive","tree","dendrite"],"repository":{"type":"git","url":"git+https://github.com/abeedoolabs/dendrite.git"},"description":"Interactive mind map visualization — Canvas and SVG renderers","maintainers":[{"name":"meecect","email":"clifford.meece@me.com"}],"readme":"# @abeedoo/dendrite\n\nInteractive mind map visualization with Canvas and SVG renderers. Zero dependencies.\n\n**[Live Demo](https://cliffordmeece.com/dendrite-demo/)** · **[npm](https://www.npmjs.com/package/@abeedoo/dendrite)** · **[GitHub](https://github.com/abeedoolabs/dendrite)**\n\nOriginally built with [Processing.js](https://github.com/meecect/dendriteJS) (2012), rewritten as a modern ES module with dual renderers.\n\n## Install\n\n```bash\nnpm install @abeedoo/dendrite\n```\n\nOr use a script tag:\n\n```html\n<script src=\"https://unpkg.com/@abeedoo/dendrite\"></script>\n```\n\n## Quick Start\n\n### Script tag (zero config)\n\n```html\n<div class=\"dendrite-svg\" data-dendrite='{\n  \"label\": \"my project\",\n  \"right\": [\"frontend\", \"backend\", \"docs\"],\n  \"left\": [\"tests\", \"deploy\", \"monitoring\"]\n}'></div>\n\n<script src=\"https://unpkg.com/@abeedoo/dendrite\"></script>\n```\n\nThe standalone build auto-discovers elements with `class=\"dendrite-svg\"` or `data-dendrite` and initializes them.\n\n### ES module\n\n```js\nimport { Dendrite } from '@abeedoo/dendrite';\n\nconst map = new Dendrite('#my-container', {\n  renderer: 'svg',  // or 'canvas'\n  data: {\n    label: 'root',\n    right: [\n      { label: 'code', children: ['frontend', 'backend'] },\n      'docs'\n    ],\n    left: ['tests', 'deploy']\n  }\n});\n```\n\n### Svelte\n\n```svelte\n<script>\n  import { DendriteMap } from '@abeedoo/dendrite/svelte';\n\n  let data = {\n    label: 'project',\n    right: ['ui', 'api'],\n    left: ['tests', 'infra']\n  };\n</script>\n\n<DendriteMap {data} renderer=\"svg\" height={500} />\n```\n\n## Data Formats\n\n### Nested with explicit sides\n\n```js\n{\n  label: 'root',\n  right: [\n    { label: 'parent', children: ['child1', 'child2'] },\n    'leaf node'\n  ],\n  left: ['node a', 'node b']\n}\n```\n\n### Nested with auto-split\n\n```js\n{\n  label: 'root',\n  children: ['a', 'b', 'c', 'd']  // first half right, second half left\n}\n```\n\n### Flat adjacency list\n\n```js\n[\n  { id: 'root', label: 'projects' },\n  { id: 'web', parentId: 'root', label: 'web app' },\n  { id: 'api', parentId: 'root', label: 'api' },\n  { id: 'auth', parentId: 'api', label: 'auth service' }\n]\n```\n\nString items in children arrays become leaf nodes.\n\n## API\n\n### `new Dendrite(container, options?)`\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `renderer` | `'svg'` \\| `'canvas'` | `'svg'` | Rendering engine |\n| `data` | `object` \\| `array` | demo data | Tree data (any format above) |\n| `height` | `number` | `500` | Canvas/SVG height in pixels |\n| `colors` | `object` | theme defaults | Override colors (see below) |\n\n### Methods\n\n```js\nmap.getData()    // export tree as JSON (nested left/right format)\nmap.setData(d)   // reinitialize with new data\nmap.destroy()    // cleanup and remove elements\n```\n\n### Colors\n\n```js\nnew Dendrite('#el', {\n  colors: {\n    primary: '#7c5cff',    // right-side nodes\n    secondary: '#2de2e6',  // left-side nodes\n    bg: '#060812',         // background (canvas only)\n    text: '#e8eefc',       // labels\n    muted: '#a9b6d8',      // secondary text\n    stroke: 'rgba(255,255,255,0.1)' // borders\n  }\n});\n```\n\n## Interaction\n\n- **Drag** nodes to reposition — children follow\n- **Hover** a node to reveal the **+** button\n- **Click + and drag** to create a child node (live bezier preview)\n- **Double-click** a node to rename it inline\n- Nodes **flip direction** (and color) when dragged across the center line\n\n## Renderers\n\n### SVG (default)\n\n- Real DOM elements — text is selectable, accessible\n- CSS hover transitions and `:hover` states for free\n- Native inline editing via `<foreignObject>`\n- No DPR scaling needed\n- Best for most use cases\n\n### Canvas\n\n- `requestAnimationFrame` render loop\n- Manual DPR scaling for crisp rendering\n- Better for very large trees (500+ nodes)\n- Overlay `<input>` for editing\n\n## Build\n\n```bash\nnpm install\nnpm run build   # outputs dist/dendrite.esm.js + dist/dendrite.min.js\n```\n\n## License\n\nMIT — [Clifford Meece](https://cliffordmeece.com)\n","readmeFilename":"README.md"}