Back in 2012 I built a little interactive mind map tool using Processing.js. It drew bezier curves between draggable nodes, you could add children by clicking a plus button, and the whole thing ran in a canvas. Processing.js died, the code rotted, and I forgot about it.

I dug it up recently and rewrote it from scratch. No dependencies. Dual renderers — Canvas and SVG. Published as an npm package.

Live Demo · GitHub · npm

What It Does

It's an interactive mind map. Nodes branch from a central root with bezier curves. You drag nodes around, add children, rename things. Nodes flip sides (and color) when you drag them across the center line.

Two Renderers

The SVG renderer creates real DOM elements — text is selectable, nodes get CSS hover transitions, and inline editing uses native inputs. The Canvas renderer uses requestAnimationFrame and manual hit testing, which scales better for large trees.

SVG is the default. Use Canvas if you're pushing 500+ nodes.

Using It

Install from npm:

npm install @abeedoo/dendrite

Import and create an instance:

import { Dendrite } from '@abeedoo/dendrite';
new Dendrite('#container', { data: myTree });

Or use it without a build step — include the script from unpkg and add a data-dendrite attribute to any element:

<div class="dendrite-svg" data-dendrite='{"label":"root","right":["a","b"]}'></div>

Data Formats

Feed it nested JSON with explicit sides:

{
  "label": "projects",
  "right": [
    {"label": "frontend", "children": ["react", "svelte"]},
    "backend"
  ],
  "left": ["docs", "tests"]
}

Or a flat adjacency list — it builds the tree automatically:

[
  {"id": "root", "label": "projects"},
  {"id": "web", "parentId": "root", "label": "web"},
  {"id": "api", "parentId": "root", "label": "api"}
]

From Processing.js to Here

The original was a single HTML file with a Processing.js sketch embedded inline. It ran on a Drupal site. It had jQuery plugins included but unused. It was 2012.

The rewrite keeps the core interaction model — bezier branches, drag-to-create, direction flipping — but the architecture is completely different. Shared core (node data, layout engine, tree builder), pluggable renderers (Canvas and SVG), JSON initialization, and a proper class API with getData() / setData().

Zero dependencies. 16KB minified.