A headless, framework-agnostic and extendable mindmap editor.
- Highly extendable, take full control over styling and behavior
- With default undo, redo, navigation, drag, CRUD, shortcut implementation (but can be replaced)
- Framework-agnostic, remind can work with vanilla javascript, vue, react or any other framework
- TypeScript, remind is written is typescript and has great typescript support
npm i remind-core remind-contributions
import { createMindmap, TopicData } from 'remind-core'
import 'remind-core/dist/style.css'
import { contributions } from 'remind-contributions'
const customData: TopicData = {
id: '7bf8fd567273',
title: 'Central Topic',
children: [
{
title: 'main topic 1',
id: 'f4cb61397246',
},
{
title: 'main topic 2',
id: 'fa4df6c9708c',
children: [
{
title: 'sub topic 1',
id: 'f4cb61397241',
},
],
},
],
}
createMindmap(document.querySelector('#app')!, {
value: customData,
contributions,
})
Render mindmap into containerNode, and return a instance.
option | type | description | default | optional |
---|---|---|---|---|
value | TopicData | set mindmap value | - | true |
onChange | (value: TopicData) => void | listen to value change | - | true |
layout | 'mindmap' | 'structure' | set mindmap layout | mindmap | true |
locale | 'en' | 'cn' | 'ja' | language localization | en | true |
theme | Theme | custom theme | - | true |
contributions | Function | extend editor's functionality | [] | true |
Contribution let you extend editor's functionality, custom editor's behavior or add custom render content.
For more information, see packages/contributions/src
interface ContributionAPI {
model: IModelStructure & IModelTrait
viewModel: IViewModelStructure & IViewModelTrait
view: RefObject<HTMLDivElement>
locale: IntlContent
}
interface TopicData {
id: string
title: string
children?: TopicData[]
}
interface Theme {
link: {
stroke: string
strokeWidth: number
}
topic: Record<string, unknown>
mainColor: string
}