Repolode
Submit
SSShooter

SSShooter/mind-elixir-core

A framework-agnostic JavaScript mind map core for embedding interactive, editable mind maps in web apps.

Open-source alternative to:MindManagerXMind

View on GitHubWebsite
Stars
3,196
Forks
419
Open issues
11
Last commit
3 days ago

What is it?

Mind Elixir Core is a JavaScript library that renders and edits mind maps in the browser. It is not tied to any frontend framework, so it can be mounted into a plain HTML page or used alongside React, Vue or other UI libraries.

The library supports drag and drop editing, multi-node selection, undo and redo, keyboard shortcuts and touch events for mobile. Maps can be exported as SVG, PNG or HTML, and styling can be changed through CSS variables or a theme object with a custom palette. Node data is a plain JavaScript object that can be read with getData and restored with init or refresh.

Developers can extend it with plugins, add operation guards that run before changes such as adding or removing nodes, and plug in a custom markdown parser for node content. It is published on npm as mind-elixir and loads from a CDN via a script tag.

Key features

  • 01Framework-agnostic core that works with any frontend stack.
  • 02Drag and drop editing, multi-node selection, and undo/redo.
  • 03Touch events and keyboard shortcuts.
  • 04Export to SVG, PNG and HTML.
  • 05Styling via CSS variables and custom themes.
  • 06Plugin system and operation guards for changes.

Use cases

  • Adding an editable mind map view to a web application.
  • Building note-taking or brainstorming tools in the browser.
  • Creating mind map visualizations from structured data for export.
  • Prototyping mind map features in React, Vue or plain JavaScript pages.

Quick start

  1. 1

    Install the package from npm

    npm i mind-elixir -S
  2. 2

    Import the library and its stylesheet in your code

    import MindElixir from 'mind-elixir' import 'mind-elixir/style.css'
  3. 3

    Create a container div and initialize a mind map with sample data

Things to know

  • Requires a container element with an explicit height to display the map.

In collections

Diagrams, charts & animated visualizationsFrontend frameworks & UI components

Topics

#mind-map#javascript#typescript#visualization#frontend#graph#drag-and-drop#mind-mapping#mindmap#tool

FAQ

What is mind-elixir-core?
A framework-agnostic JavaScript mind map core for embedding interactive, editable mind maps in web apps. Mind Elixir Core is a JavaScript library that renders and edits mind maps in the browser. It is not tied to any frontend framework, so it can be mounted into a plain HTML page or used alongside React, Vue or other UI libraries.
Is mind-elixir-core free to use? What license does it have?
mind-elixir-core is open source under the MIT license. Check the license terms before using it in commercial products.
Is mind-elixir-core still maintained?
Actively maintained. The last commit to mind-elixir-core was on Nov 4, 2026.
What can I use mind-elixir-core for?
Adding an editable mind map view to a web application. Building note-taking or brainstorming tools in the browser. Creating mind map visualizations from structured data for export. Prototyping mind map features in React, Vue or plain JavaScript pages.
How do I install mind-elixir-core?
Install the package from npm: npm i mind-elixir -S Import the library and its stylesheet in your code: import MindElixir from 'mind-elixir' import 'mind-elixir/style.css' Create a container div and initialize a mind map with sample data
Where can I get mind-elixir-core?
The source code and installation instructions are on GitHub: https://github.com/SSShooter/mind-elixir-core

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects