API Reference

Complete reference for the MindMap component and its props.

Component Anatomy

The standard way to use the MindMap component.

<MindMap data={initialData}>
  <MindMapControls />
</MindMap>

MindMap

The root component that initializes the mind map instance. It handles data loading, theme management, and event listeners. Designed primarily for presentation; set readonly for view-only maps.

Prop Type Default Description
data MindElixirData — Map data. See the Data Structure page. Updates to this prop refresh the map content.
direction 0 | 1 | 2 2 Layout direction: 0 (Left), 1 (Right), 2 (Side/Both).
contextMenu boolean true Enable right-click context menu.
keypress boolean true Enable keyboard shortcuts (Enter, Tab, etc.).
locale "en" | "zh_CN" | "zh_TW" | "ja" | "pt" "en" Language for built-in menus and prompts.
overflowHidden boolean false Clip map content that overflows the container.
theme "light" | "dark" — Force a specific theme. If omitted, follows system/document theme.
monochrome boolean false Use a single-color branch palette that matches the theme foreground.
fit boolean true Automatically fit map to view on load.
readonly boolean false Disable editing. Recommended for presentation / embedded maps.
compact boolean false Tighter node spacing for dense presentation layouts.
markdown (text: string, obj) => string — Custom markdown parser. Topics are rendered as HTML through this function. Bring your own parser (e.g. marked) or a small custom one.
imageProxy (url: string) => string — Rewrite remote node image URLs so they can be captured when exporting the map. Only needed to avoid CORS failures during image generation — not for normal on-screen display.
onChange (data: MindElixirData, operation: unknown) => void — Callback when map data changes due to an operation.
onOperation (operation: unknown) => void — Callback for each Mind Elixir operation event.
onSelectNodes (nodes: NodeObj[]) => void — Callback when nodes are selected.
loader Snippet — Custom loading indicator shown before the map is ready.
class string — Extra class names on the outer wrapper.

For the shape of data, see Data Structure.

useMindMap

A helper that provides access to the Mind Elixir instance. Must be used within a MindMap component.

import { useMindMap } from '$lib/components/ui/mindmap';

// Inside a child of <MindMap>:
const ctx = useMindMap();
// ctx.mind — MindElixirInstance | null
// ctx.isLoaded — boolean

Returns mind (MindElixirInstance) and isLoaded (boolean). For the full instance API (methods, events, data shape), see Mind Elixir Core.

MindMapControls

Renders UI controls for the mind map (Zoom, Fit, Export, Fullscreen).

Prop Type Default Description
position "top-left" | "top-right" | "bottom-left" | "bottom-right" "top-right" Position of the controls overlay.
showZoom boolean true Show Zoom In/Out buttons.
showFit boolean true Show Fit-to-Screen button.
showExport boolean true Show Export button.
onExport (file: Blob, filename: string) => void — Called with the exported image blob and filename after export.
class string — Extra class names on the controls container.
Previous Data Structure