Nib
A simple app for reading and editing documents. It shows them as clean pages you can read, instead of as code with line numbers, and lets you edit when you need to.
A markdown reader you can also edit, rather than an editor that previews.
Open nib-markdown.vercel.app2
Platforms, one codebase
1
Keystroke from reading to editing
0
Accounts, syncs or servers
620kB
WASM engine found and removed from the critical path
Why we built it.
Every time we needed to read a markdown document, we opened a code editor. A document written to be read was shown as source, in a tool built for source: line numbers, a file tree, a terminal drawer, and syntax coloring, all getting in the way of a paragraph.
The alternatives missed from the other direction. They were editors that happened to preview, tied to a larger ecosystem, with accounts, unrequested syncing, and near-identical designs.
What we wanted was small and specific: open a `.md` file and get something worth reading, with the typography of a document and the calm of a page rather than an IDE. Editing would be one keystroke away and stay out of the way until you asked for it.
The decisions we made, and why.
This part gets into the technical detail. If that isn't your thing, the short version is at the top of the page.
We made reading the default, rather than a mode
The app opens in Read, and Edit and Split are one keystroke each. That inverts every other markdown tool, and it's the whole design: the common case, opening a document to read it, costs nothing, and the rare case costs one key.
Any VS Code theme repaints the entire app
It goes well beyond the code fences. The titlebar, outline, controls, paper, and prose all come from the theme's `colors` block. Drop a theme JSON from the marketplace onto the window and the app rebuilds around it. It started as a convenience and became our most-used feature for an unexpected reason: reading a client's documents in their own colors lets you sit inside their world for an hour, and it connects you to what you're about to build.
One codebase, native where it matters
We ship a native macOS app and a web app from the same source. It's native because it needs to be the default handler for `.md`: double-click a file in Finder and it opens here. That's the whole point, and a browser tab can't do it.
Your files stay on your machine
There's no account, sync, or telemetry, and session restore is local. A tool for reading a file should leave the question of where that file lives to you.
What we only learned by testing.
Every item below is a real problem we found by measuring, and each one has a fix behind it. We share them because they tell you more about how we work than the features do.
The syntax highlighter weighed more than the app
Shiki's default entry pulls in the Oniguruma WASM regex engine: roughly 620kB before a single line of markdown renders, for a feature that only matters inside code fences. We measured it, then routed around it.
The sanitizer was silently eating the diagrams
Mermaid diagrams rendered blank, and the console stayed silent. DOMPurify strips `data-*` attributes by default, and we were passing the diagram source on one. The failure was invisible, just an empty block where a diagram should be, with a clean console and an intact layout.
The window drag region isn't the one you'd guess
Tauri drags with `data-tauri-drag-region`, where Electron uses the CSS `-webkit-app-region`. And with an overlay titlebar, anything covering the traffic lights swallows the clicks, so we keep that corner genuinely empty rather than merely transparent.
Reinstalling the app gave the file association away
Reinstalling the bundle handed the `.md` association back to another editor. For an app whose central promise is 'double-click a markdown file and it opens here', that's far more than cosmetic. It quietly removes the reason the app exists.
Icon geometry is a specification, not a matter of taste
macOS icons need the artwork on an 824px tile inside a 1024px canvas, with the margin baked into the image. Get it wrong and the icon sits at a subtly wrong size beside every other app in the dock, which the person who owns the machine notices immediately.
Built with, and still open
- TypeScript
- Vite
- Tauri
- Shiki
- Mermaid
- The 512px PWA icon is an upscale of the 192px one. It's harmless today, but it would show if the icon were ever used at that size.