Docs - Mind Map Builder

01

Overview

Mind Map Builder is a free, browser-based mind-mapping tool built on the Neural Glass design system. No account, no subscription, no installation — open /builder and start mapping immediately.

Maps are built from nodes (circular elements) connected by edges (straight lines). Every map has one root node at the center. All other nodes branch outward from it. The structure is stored as plain JSON you can copy, download, or import at any time.

💾Auto-save: Your map saves automatically to your browser’s local storage as you work. No data is sent to any server.

02

Getting Started

Opening the builder gives you a blank canvas with a single root node. Here’s how to build your first map:

1

Open the app

Navigate to /builder. A root node labelled “New Mind Map” appears at the center of the canvas.

2

Click the root node

A popover appears with Edit (to rename) and + Child (to add a connected child node).

3

Add child nodes

Click + Child in the popover, or select any node and press N. A new connected node appears.

4

Edit node details

Click Edit in the popover or press ✎ Edit in the toolbar. The editor panel slides in — update label, type, color, URL, and description.

5

Export your map

Use ⤓ Export JSON or ⧉ Copy JSON in the toolbar to save or share your work.

03

Canvas Navigation

The canvas is an infinite pan-and-zoom space. Your nodes exist in world-space — you move the viewport around them.

Action	Mouse / Trackpad	Touch
Pan canvas	Click and drag on empty space	2-finger drag
Zoom in / out	Scroll wheel	Pinch (2-finger)
Reset view	Toolbar `⌂`	Tap `⌂`
Inspect a node	Click the node	Tap the node
Dismiss popover	Click empty canvas or `Esc`	Tap empty canvas

💡On mobile, 1-finger scroll moves the page normally. Use 2-finger drag to pan the canvas and pinch to zoom.

04

Working with Nodes

Every node has these editable properties:

Property	Description
Label	Text displayed on the node. Long labels wrap automatically inside the circle.
Type	Freeform category tag (e.g. `product`, `team`). Shown as a small sub-label on the node.
Color	Hex fill color for the node circle. The label stays readable with an automatic text stroke.
URL	Optional link. When set, the popover shows an “↗ Open” button and a copy-link button.
Description	Free-text notes shown in the popover when you click the node.

Moving nodes: Click and drag any node to reposition it. Edges update in real time. Position autosaves on mouse release.

Deleting nodes: Click a node → ✕ Delete in the popover, or select it and press Delete / Backspace. The root node cannot be deleted.

⚠️Deleting a parent removes its edges. Child nodes remain on the canvas but become disconnected — reconnect them via the JSON editor if needed.

05

The Editor Panel

Click ✎ Edit in the toolbar (or Edit in any node popover) to open the editor panel. It slides in from the right.

①

Selected Node section

Live-editable fields for the currently selected node. Fields are disabled when nothing is selected — click a node on the canvas first.

②

Add child / Delete

+ Add child creates a node connected to the selected one. ✕ Delete removes the selected node after confirmation.

③

JSON Data section

A live textarea showing the full map JSON. Edit it directly and press ⤓ Import to apply. Use ⧉ Copy or ↓ Download to export.

ℹ️All field changes apply instantly and autosave. No save button needed.

06

Exporting & Importing

Mind Map Builder uses plain JSON as its native format. Move maps between devices, share them, or process them programmatically.

Action	How	Result
Download JSON	Toolbar → ⤓ Export JSON	Downloads `builder-mindmap.json`
Copy JSON	Toolbar → ⧉ Copy JSON	Copies full JSON to clipboard
Import JSON	Editor → paste in JSON area → ⤓ Import	Replaces current map
Clear & start over	Toolbar → 🧹 Clear	Resets to blank root (requires confirmation)

⚠️Importing replaces your current map. Export a backup first if you want to preserve what you have.

07

Keyboard Shortcuts

Click on the canvas (outside any input) to focus it, then:

Key	Action
`N`	Add a child node to the selected node (or root if none selected)
`Delete` / `Backspace`	Delete the selected node (prompts confirmation)
`Esc`	Dismiss popover, deselect node, close editor panel
Scroll wheel	Zoom in / out centered on cursor position

ℹ️Shortcuts are disabled when a text input or textarea is focused so you can type freely in the editor panel.

08

JSON Data Format

The map file is a single JSON object with two arrays: nodes and edges.

{ “nodes”: [ { “id”: “root”, // unique string ID — one node must be “root” “label”: “My Map”, // display text on the node “type”: “root”, // freeform category tag “color”: “#d4af37”, // hex fill color “url”: “https://…”, // optional — enables Open / Copy link in popover “desc”: “Description…”, // optional — shown in popover body “x”: 0, // canvas X position (world space) “y”: 0 // canvas Y position (world space) } ], “edges”: [ { “from”: “root”, “to”: “n_abc123_19xyz” } ] }

Node IDs can be any unique string. The engine auto-generates IDs for new nodes. There must always be exactly one node with "id": "root".

🔧You can hand-edit JSON directly in the editor textarea — useful for bulk operations, scripted generation, or migrating data from other tools.

09

Mobile Usage

All core features work on phones and tablets.

Gesture	Action
1-finger scroll	Scrolls the page (normal browser behavior)
2-finger drag	Pans the canvas
Pinch	Zooms in or out
Tap a node	Opens the node popover
Hold and drag a node	Moves the node (edit mode)

📱The editor panel opens full-width on narrow screens. Tap ✕ or press Esc to close it.

10

Tips & Best Practices

💡

Use Type as a category

Set type to product, team, goal, or risk. It shows as a small badge on the node and helps you scan large maps quickly.

💡

Attach URLs for instant context

Link nodes to Notion pages, GitHub issues, Figma files, or any URL. The popover surfaces an ↗ Open button and a copy-link button.

💡

Color-code by branch

Assign a distinct color to each top-level branch node. Nothing is inherited automatically — you decide the palette.

💡

Export frequently as a backup

Local storage can be cleared by the browser. Download a JSON backup after significant work sessions.

💡

Import a JSON template to start fast

Pre-build a skeleton structure (org chart, project map, etc.), then import it to skip repetitive node creation.

Mind Map Builder Guide