Mindx

Mindx is a free, open source mindmap editor based on React.

Try it on https://mindx.applet.ink

Installation

npm i mindx

Quick Start

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Mindmap } from 'mindx';
 
const App = () => {
  function onChange(root) {
    console.log(root)
  }
  return (
    <div>
      <Mindmap onChange={onChange} />
    </div>
  );
};
 
ReactDOM.render(<App />, document.getElementById('root'));

API

Mindmap props

prop	type	description	default	optional
value	TopicData	control mindmap value	-	true
readonly	boolean	is mindmap readonly	false	true
onChange	(value: TopicData) => void	listen to mindmap value change	-	true
locale	'en' | 'cn' | 'ja'	language localization	en	true
theme	Theme	custom theme	-	true

TopicData

interface TopicData {
  id: string;
  title: string;
  side?: 'left' | 'right';
  children?: {
      attached: Array<TopicData>;
  };
}

Theme

interface Theme {
  link: {
    stroke: string;
    strokeWidth: number;
  };
  topic: {
    borderColor: string;
  };
  canvasWidth: number;
  canvasHeight: number;
}

License

MIT License