Org Mind

A client-side viewer for Emacs org-mode files. Renders an org file (or a whole directory of them) as one of three views: an interactive mindmap, a wiki-style page, or a kanban-like “threads” board.

Why?

For a long time, I’ve been organizing my brain in org-mode files. I also pick up mind mapping apps from time to time to visualize better.

The hierarchical layout of org-files does fit into something that could work as a mindmap though, so I wanted to check if this could be done.

This is the result.

Currently this allows only to view the files. Editing support is planned for a future version.

Usage

Launch the app

Online

Launch the app hosted on github: Org-Mind App

Locally

1. Clone the repository.
2. Install and run project.

npm install
npm run dev -- --open

Open content

• Open single file – pick a single .org file from disk.
• Open URL – fetch an org file from the web. Defaults to the planning doc for this project on Github.
• Open org dir – pick a whole directory. The app indexes every .org file under it so that [[id:...]] and [[file:...]] links resolve across files. The Wiki view shows a file picker, and the dropdown in the toolbar lets you jump between root-level files.
• Reload files appears once a file or directory is loaded, and re-reads from disk in place.

Views

Switch between views with the toggle on the right of the toolbar:

• Wiki – a single org file rendered as a wiki page, with inline link resolution against the loaded org directory. URL hash routing (#wiki:path/to/file.org) makes pages bookmarkable and the browser back button work.
• Map – the original mindmap view: an interactive, expandable/collapsible tree with curved connector lines.
• Threads – a horizontally-scrolling kanban-style board, with one column per top-level heading. Done items are hidden by default; arrow buttons in the header skip horizontally between threads.

Theme

Toggle between light and dark mode with the sun/moon button in the toolbar. The choice is persisted.

Requirements

This is a client-side SPA built on a few modern web APIs, so it needs a recent Chromium-based browser.

CSS Container Style Queries

Used to mirror layout for nodes on the left vs. right of the mindmap.

@container style(--rol: left) {
    .subtopic {
        flex-direction: row-reverse;
    }
}

File System Access API

Used to open a single file or a whole directory from the user’s machine. Will eventually allow saving edits back.

ResizeObserver

Used to detect when the curved connector lines in the mindmap need to be redrawn.

Development

• npm run dev – start the dev server
• npm run build – build for GitHub Pages (output in docs/, base path /org-mind)
• npm test – run the vitest suite
• npm run check – svelte-kit sync + svelte-check type checking
• npm run lint / npm run format – prettier + eslint

Built with SvelteKit 2, Svelte 4, TypeScript, Vite, and SCSS. No runtime dependencies – everything ships as static files.