Introduction

Beautiful, accessible mind map components for presentation-first apps.

mindmapcn-svelte provides beautifully designed, accessible, and customizable mind map components. Built on Mind Elixir, styled with Tailwind CSS, and designed to work with shadcn-svelte.

Presentation first

mindmapcn-svelte is optimized for display and embedding — org charts, knowledge maps, project plans, and other read-mostly diagrams. Prefer readonly when viewers should not edit nodes.

Editing still works if you leave the map interactive, but this library is not a full mind-map editor UI (no built-in undo toolbar, inspector, etc.). For the complete instance API — methods, events, and advanced options — use useMindMap().mind and see Mind Elixir Core.

Why mindmapcn-svelte?

Integrating a mind map into a Svelte application usually involves complex wrappers or outdated libraries. mindmapcn-svelte gives you a modern, beautiful, and fully typed Mind Map component that fits a shadcn-svelte-based app with sensible defaults for themes, controls, and layout.

Features

Zero Config

Works out of the box with reasonable defaults. No complex setup required.

Theme Aware

Automatically adapts to light and dark mode with shadcn-svelte integration.

Composable

Built as a Svelte component, easy to integrate and extend.

TypeScript

Full type safety with comprehensive TypeScript support.