Orbit · a mind map library

Mind maps you can fly through.

Write a map in markdown, or build it right on the map. Orbit draws it as a solar system: the node in focus is the sun and its children orbit it. Click a planet to fly in, zoom out to leave, flick the orbit to spin it.

Get started Try it GitHub

npm install @restless-dreams/orbit

No dependencies
Web component, React and marked
Fourteen themes
Smooth with thousands of ideas
MIT

This is Orbit. Click a planet, or flick the orbit.

Just markdown

Headings and lists make the tree.

Maps are written in orbit-md, plain markdown where every heading and list item is a planet and the text under it is its note. Checkboxes, hashtags and links do what you’d expect, and comments add a color or media. It’s the markdown you already write, so maps live next to your docs and diff like text. Edit the map itself and Orbit writes it back the same way.

---
theme: auto
---
# 🚀 Launch plan
Everything we ship this quarter.

## Research <!-- orbit status: done -->
- [x] Interviews
- [x] Survey

## Build
- [/] App shell #web
- Offline sync <!-- orbit status: blocked -->
  Waits on [Research](#research).

## Ship
- [ ] Press kit
- [ ] Launch event

Every rule, attribute and option →

Edit on the map

Build it right on the map.

Turn on editable and a + joins the orbit. Press it and type: the idea goes inside its new planet, and Enter starts the next one. A long press, a right click or F2 renames a node where it is, and with editingKeys, Tab and Shift+Enter add ideas under and beside the one in focus, as in mind-map apps. Every edit animates into place, and Orbit writes the map back as markdown.

What Orbit writes

Menus, saving, React and every editing method →

Made to explore

A map you move through, not a picture.

Fly, don’t jump

Moving between views flies the camera along a smooth zoom path while the nodes move into place, so you never lose your place.
Spin it

Flick the orbit and it coasts like a fidget spinner, slowing down the same at any frame rate. A touch catches it.
Zoom in to enter

Zoom far enough into a planet and you enter it; zoom out to leave. The overview shows the whole tree at once.
Names inside the planets

A name sits inside its planet, shrinking and wrapping to fit, and smaller planets show theirs as you zoom in. Names stay sharp at any zoom, with at least 4.5:1 contrast in every theme.
Keyboard and screen readers

One tab stop with arrow keys, an outline screen readers can browse, announcements as you move, and cross-fades for reduced motion.
Pictures, videos and notes

Pictures and videos open over the whole window: zoom into a picture, play a video, and step through all of them. Notes and embeds open in a detail sheet, a side panel on wide screens and a bottom sheet you swipe away on phones.

Large maps

Thousands of ideas, still smooth.

This is the whole database of a city library: 2,400 ideas, one table with 260 columns. Orbit flies, spins and pans through it at full frame rate, phones included. Crowded orbits pack their planets as big as the screen allows, and you can zoom in to read them.

Fourteen themes

From pastel paper to liquid glass.

Themes shape the planets as well as their colors: shading, rims, a shadow or a glow, a halo around the sun, the orbits and the lettering. Every value is a CSS custom property you can override.

Themes and every custom property →

Use it anywhere

One line of markup, or one function call.

The core has no dependencies and works in any page. React and marked get their own entry points, and maps render to SVG without a browser.

No build step: the <orbit-map> element draws the markdown inside it.

<script type="module">
  import { defineOrbitMapElement } from 'https://cdn.jsdelivr.net/npm/@restless-dreams/orbit/+esm';
  defineOrbitMapElement();
</script>

<orbit-map height="420" theme="night">
  # 🚀 Launch
  ## Research <!-- orbit status: done -->
  ## Build <!-- orbit status: active -->
  ## Ship
</orbit-map>

One call draws a map into any element and returns it, to listen for events or draw new versions.

import { createOrbitMap } from '@restless-dreams/orbit';

const map = createOrbitMap(document.querySelector('#map'), markdown, { theme: 'auto' });
map.on('focus-change', ({ node }) => console.log(node.text));

A static SVG on the server and in the first render, then the live map. Ready for Server Components.

import { OrbitMindMap } from '@restless-dreams/orbit/react';

export function Roadmap({ markdown }: { markdown: string }) {
  return (
    <div style={{ height: 480 }}>
      <OrbitMindMap source={markdown} theme="cosmos" />
    </div>
  );
}

```orbit fences in your markdown become maps, with a readable list for anyone without JavaScript.

import { Marked } from 'marked';
import { orbitMarked, hydrateOrbitBlocks } from '@restless-dreams/orbit/marked';

const markdown = new Marked(orbitMarked());
container.innerHTML = await markdown.parse(article);
hydrateOrbitBlocks(container);

A standalone SVG without a browser, for static sites, emails and print.

import { renderToSVGString } from '@restless-dreams/orbit';

const svg = renderToSVGString(markdown, { width: 1200, height: 800, theme: 'paper' });

Check a map and list every problem with its fix, render it, or start from an example.

npx @restless-dreams/orbit validate roadmap.md
npx @restless-dreams/orbit render roadmap.md --out roadmap.svg --theme cosmos
npx @restless-dreams/orbit example > roadmap.md

People add and rename ideas on the map, and toMarkdown() gives you the map to save after every edit.

import { createOrbitMap } from '@restless-dreams/orbit';

const map = createOrbitMap(element, markdown, {
  editable: true,
  onEdit: () => save(map.toMarkdown()),
});

Your own node types, buttons, status words and themes, for one map or registered for every map.

import { createOrbitMap, registerTheme } from '@restless-dreams/orbit';

registerTheme('brand', { preset: 'night', tokens: { 'color-root': '#FFD166' } });

createOrbitMap(element, markdown, {
  theme: 'brand',
  nodeTypes: {
    milestone: { label: 'Milestone', icon: '🏁', color: '#F59E0B' },
  },
  actions: [{ id: 'assign', label: 'Assign', icon: '👤', run: (node) => assign(node) }],
  statuses: { review: 'active' },
});

Recipes for Vue, Svelte, Astro, Next.js and more →

For coding agents

Your agent gets it right the first time.

Claude Code, Codex, Cursor and Copilot can learn Orbit from files the package ships, and check their maps without a browser.

The docs in one file

llms.txt and llms-full.txt ship in the package, so the docs always match the installed version.
```
node_modules/@restless-dreams/orbit/llms-full.txt
```
A skill to install

Instructions agents load on their own when a task involves mind maps, with the format reference next to them.
```
npx skills add restless-dreams/orbit
```
Problems with the fix

Every problem comes with its line and what to do about it, as text or as JSON.
```
roadmap.md:3: warning: Unknown theme "dark".
Did you mean "night"? [invalid-option-value]
```

Set up your agent →

Playground

Try it with your own map.

Edit the markdown or the map itself, switch themes, tune how the spin feels, and copy the code for your settings. Copy link shares the map you made.

Headings and lists make the tree.

Build it right on the map.

A map you move through, not a picture.

Fly, don’t jump

Spin it

Zoom in to enter

Names inside the planets

Keyboard and screen readers

Pictures, videos and notes

Thousands of ideas, still smooth.

From pastel paper to liquid glass.

One line of markup, or one function call.

Your agent gets it right the first time.

The docs in one file

A skill to install

Problems with the fix

Try it with your own map.