The first mind mapping tool I ever used was FreeMind. I wrote about this in Part 0 — it left a strong impression. Keyboard-first, offline, fast. But it ran on Java, on a desktop, and only on a desktop.
In 2026, that is not enough.
This part is about how MindMapVault handles the shift from desktop to everywhere. The mobile experience, the PWA implementation, the dark/light mode, and what we learned from building it with React rather than reaching for a native mobile SDK.
The honest picture first
Desktop is not dead. If you work on a large mind map for an hour, you want a big screen and a real keyboard. That has not changed.
But the way people use apps has changed. The majority of internet usage is now on mobile. For productivity apps specifically, the pattern is: think on the train, elaborate on the laptop, review on the phone, act wherever. A product that only exists on a desktop loses people at every gap.
FreeMind and Freeplane — tools I have genuine respect for — have no mobile story. They are Java desktop applications. You cannot install them on an iPhone. You cannot open your maps on an Android device. The .mm file on your laptop is invisible to your phone unless you sync the file manually to some cloud folder, and even then you have no editor to open it.
WiseMapping solved the desktop part — it is browser-based — but it has no PWA and no mobile-optimized layout. It also runs server-readable (the database holds plaintext maps), which is a different kind of problem.
The requirement we set for MindMapVault: it has to work, without compromise, on desktop and mobile, with the same encryption model on every platform.
Why PWA, not native apps
The first question in most mobile discussions is: should you build native apps? App Store listing, native UI components, push notifications, the whole ecosystem.
Our answer was no, not yet, and here is why.
PWA solves the real gap for most users. The main friction is not "I need a native feel." It is "I need to be able to open my mind map on my phone." A Progressive Web App — installable from the browser with "Add to Home Screen" — solves that completely. No store review. No 200 MB download. No update lag.
App stores add overhead that does not benefit the user. Every release goes through a review queue. Approval can take days. You cannot ship a critical encryption fix on a Friday afternoon without waiting. With a PWA served from your own infrastructure, the user gets the update the next time the service worker refreshes — typically within 24 hours, silently.
The codebase stays unified. One React codebase, one set of components, one encryption implementation. The alternative — maintaining a web app, an iOS app, and an Android app — would triple the surface where encryption bugs could live. For a security-sensitive product, that is a serious risk.
The PWA implementation
MindMapVault's frontend is built with React 18, TypeScript, Vite 6, and Tailwind CSS. The PWA layer uses vite-plugin-pwa and Workbox.
// main.tsx — PWA registration
import { registerSW } from 'virtual:pwa-register';
registerSW();
That one line, plus the vite-plugin-pwa configuration, handles:
- Generating the
manifest.webmanifestwith the correct app name, icons, and display mode - Generating a
sw.jsservice worker via Workbox - Caching the app shell, assets, and pre-cached routes
- Background sync and update checking
The manifest.webmanifest controls how the app appears after installation: name, icon, theme color, whether it opens with a browser chrome or full-screen. Users who tap "Add to Home Screen" on iOS Safari or Chrome on Android get a full-screen experience identical to a native app.
What Workbox does for you
Workbox is Google's service worker library. It handles the parts that are genuinely complex to do by hand:
- Precaching the built assets (JS bundles, CSS, icons) with content hashes. The service worker knows exactly which files are stale after a new build.
- Runtime caching for API calls and dynamic resources.
- Background sync so actions that happen offline are retried when connectivity returns.
- Update flow notifying the running app when a new service worker is ready to activate.
For a security-sensitive app, one thing matters: the service worker should not cache authentication credentials or decryption keys. The MindMapVault encryption model already handles this correctly — the server only ever sends ciphertext, and decryption happens entirely in JavaScript. No sensitive plaintext ever passes through the service worker cache.
Dark/light mode — the right way
Every modern application in 2026 must support dark and light mode. This is not aesthetic preference. It is accessibility and system integration.
Here is how we implement it:
// main.tsx — applied synchronously before first render
(function applyStoredTheme() {
try {
const raw = localStorage.getItem('mindmapvault-theme');
if (!raw) return;
const { state } = JSON.parse(raw) as { state: { mode?: string } };
if (state?.mode === 'light') document.documentElement.classList.add('light');
} catch { /* ignore */ }
})();
This runs before createRoot — before React renders anything. That is the key. If you apply the theme inside a React effect or even a component, you get a Flash of Unstyled Content (FOUC): the page loads dark, flickers white, then goes dark again. That is jarring on any platform and is particularly bad on mobile OLED screens where the flash literally causes a brightness spike.
The pattern: read from localStorage, synchronously apply a class to <html>, then let React render with the correct theme already set.
The CSS side uses class-based switching:
/* Default: dark */
:root {
--bg: #0f172a;
--text: #f8fafc;
}
/* Light override */
:root.light {
--bg: #f8fafc;
--text: #0f172a;
}
This cooperates naturally with Tailwind: dark utilities (dark:bg-slate-900) work alongside the class-based approach via Tailwind's darkMode: 'class' config.
The user can also set a custom accent color, which is applied the same way — as a CSS custom property set synchronously before render.
Responsive layout with Tailwind
The mind map canvas itself is @xyflow/react — a React component for node-based interactive diagrams. It handles pan and zoom natively on both mouse (wheel + drag) and touch (pinch + drag). No extra touch event handling needed for the canvas.
The surrounding UI — vault list, toolbar, settings, node editing panels — is built with Tailwind responsive utilities:
<!-- Sidebar: full width on mobile, fixed width on desktop -->
<aside class="w-full md:w-64 lg:w-72">
...
</aside>
The window.matchMedia('(max-width: 900px)') check we use in the FOSS demo (to adjust the initial canvas zoom and pan position for small screens) is the one place where we make a JavaScript decision based on screen size rather than a CSS decision. On a phone, the initial canvas view zooms out and centers so the root node and first level of branches are visible without scrolling.
What this means for product builders in 2026
A Java desktop application in 2026 is not wrong — it is just narrow. It reaches exactly one kind of user in exactly one context.
The React + PWA stack we describe here reaches the same user on their desktop, their phone, and their tablet, with the same code, the same encryption, and the same zero-knowledge model. The overhead of maintaining one additional layer (vite-plugin-pwa + Workbox) is low. The reach multiplier is real.
The concrete lesson:
- Ship PWA before native apps. It covers 90% of the mobile use case with 10% of the cost.
- Apply dark/light mode synchronously, before first render. FOUC is a worse experience on mobile than on desktop.
- Do not cache sensitive data in the service worker. Review what Workbox precaches and what it does at runtime.
- Let the responsive CSS framework handle most of the layout adaptation. Reserve JavaScript media query checks for canvas-specific adjustments.
- Desktop is not dead; it just cannot be the only target anymore.
MindMapVault is a privacy-first mind mapping application with zero-knowledge encryption. Try it at https://www.mindmapvault.com.
The FOSS offline only edition is open-source at https://github.com/mindmapvault/mindmapvault-foss
Server self hosted edition is open sourced at https://github.com/mindmapvault/mindmapvault-server
Want to try the mobile canvas on your phone right now? Open
https://mindmapvault.github.io/mindmapvault-foss/mobile-demo/
- no install, no account, works as a PWA.
Top comments (0)