mindkit-js

A lightweight, dependency-free SVG mind map library with pan/zoom, drag, inline editing, themes, and three layouts: Flow (L→R), Structure (Top→Bottom), and Center (radial).

• 🌐 Works in modern browsers (ES modules)
• 🎨 Theme is scoped to the canvas container (rest of your page stays untouched)
• 🖱️ Background pan, scroll zoom, node drag
• ✏️ Inline label editing with auto-wrap + multiline sizing
• 💾 serialize() / fromJSON()

Demo

See /examples/basic/ and open with a static server, e.g. npx http-server -p 8080 examples/basic.

Install

Via npm

npm i mindkit-js

Direct ES Module

<script type="module">
  import { MindMap } from 'https://unpkg.com/mindkit-js/dist/mindkit.esm.js';
  // ...
</script>

Usage

<div id="canvas" style="height:600px;border:1px solid #ddd"></div>
<script type="module">
  import { MindMap } from './dist/mindmap.esm.js'; // or from npm/CDN

  const mm = new MindMap(document.getElementById('canvas'), {
    topology: 'Flow', // 'Flow' | 'Structure' | 'Center'
    metrics: { w:200, h:60, gapX:240, gapY:18, curve:0.6 },
    theme: { bg:'#0b1020', text:'#eef3ff' } // container-scoped
  });

  mm.setData({ id:'root', label:'Root', children:[{id:'a',label:'A'},{id:'b',label:'B'}] });
  mm.fit();
</script>

API (high level)

• new MindMap(containerEl, options)
• setData(tree), render(), fit()
• applyTheme(vars), getTheme()
• setMetrics({ w, h, gapX, gapY, curve }), setLinkCurve(n)
• setTopology('Flow'|'Structure'|'Center')
• addChild(parentId, node), updateLabel(id, text)
• serialize(), fromJSON(text)

Contributing

• Open an issue for bugs/ideas.
• See CONTRIBUTING.md for setup & PR rules.
• Run locally:

  npm i
  npm run build
  npm test
  npx http-server -p 8080

License

MIT © 2025 Brian Oh