Installation

A project with Tailwind CSS and shadcn-svelte set up.

Run the following command to add the mind map component:

This will install mind-elixir (and related dependencies) and add the component to $lib/components/ui/mindmap by default.

You can also copy the component from this repository at src/lib/components/ui/mindmap.

Import from the installed path and wrap the map in a container with an explicit height. The map uses h-full / w-full, so a parent without height will collapse to a blank area.

MindMap uses browser APIs (DOM, fullscreen, export). It runs on the client after mount — no special SvelteKit form action is required.

<script lang="ts">
	import { MindMap, MindMapControls } from '$lib/components/ui/mindmap';
	import type { MindElixirData } from 'mind-elixir';

	const data: MindElixirData = {
		nodeData: {
			id: 'root',
			topic: 'Mind Map',
			children: [
				{ id: 'a', topic: 'Topic A' },
				{ id: 'b', topic: 'Topic B' }
			]
		}
	};
</script>

<!-- Give the container an explicit height — the map fills 100% of its parent. -->
<div class="relative h-[500px] w-full overflow-hidden rounded-lg border">
	<MindMap {data} readonly>
		<MindMapControls />
	</MindMap>
</div>