Building PenDraft — Markdown Without the Markdown
A writing tool for people who hate
looking at markup while they think.
I love markdown. I hate staring at asterisks while I'm trying to write. PenDraft is the compromise I needed.
Why I Built This
Markdown is perfect for developers. Type **bold** and move on. But when I'm actually writing — drafting an article, outlining thoughts, working through an idea — those asterisks and brackets pull me out of the flow.
I wanted the portability of markdown without the visual noise. Write in something clean, export to .md when I'm done.
"The tool should disappear. You should only see your words." — Every writing app manifesto ever (but they're right)
Every markdown editor I tried fell into one of two camps: raw text editors that show all the markup, or WYSIWYG editors that hide the markdown so well you forget it exists — and then export garbage.
I wanted the middle ground. See formatted text while writing. Export clean, portable markdown.
How It Works
PenDraft renders your formatting live as you type, but keeps you one keystroke away from the underlying markdown.
The core features:
- Live formatting — Bold, italic, headers render instantly
- Clean export — Download as
.mdwith proper syntax - Keyboard-first —
Cmd+Bfor bold,Cmd+Kfor links, no mouse required - Focus mode — Dim everything except the current paragraph
- Local-first — Browser storage, no accounts, no cloud
Your writing stays on your device. Export when you want, where you want. PenDraft is a tool, not a platform.
The interface borrows from distraction-free writing apps — minimal chrome, generous margins, typography that's pleasant to read. But under the hood, everything is markdown. Toggle the source view anytime to see (and edit) the raw text.
Technical Spotlight
The hard part was cursor position.
When you type **bold** and it renders as bold, the cursor needs to stay in the right place. But the DOM just changed. The text node you were in doesn't exist anymore. Where does the cursor go?
The cursor problem:
User types: "Hello **wor|ld**" (cursor at |)
Rendered: "Hello world" (bold applied)
Where's the cursor now?
The asterisks are gone.
Character count changed.
After 5 different approaches, I landed on a virtual cursor model. Track cursor position relative to content boundaries, not character offsets. When the DOM updates, recalculate position based on which content block you're in.
The other challenge: markdown is ambiguous. Is _this_ italic or is it _just_underscores_? Context matters. PenDraft uses a custom parser that tracks what formatting is "open" and makes intelligent guesses based on surrounding content.
Nested formatting nearly killed this project. Bold inside italic inside a link inside a list item. The parser handles it now, but I had to rewrite the rendering engine twice.
- ProseMirror for the editor core
- Custom markdown serializer for clean export
- CSS custom properties for theming
- IndexedDB for local persistence
What It Looks Like
Minimal. Intentionally boring. Your words are the only interesting thing on screen.
Focus mode dims surroundings, source view shows raw markdown, export gives you clean .md files
Lessons Learned
Don't Build an Editor From Scratch
I tried. For two weeks. Contenteditable is a nightmare. Selection APIs are inconsistent across browsers. ProseMirror exists for a reason — use it. I rebuilt on top of ProseMirror in three days what took two weeks to half-build from scratch.
Export Quality Is Everything
A live preview means nothing if the exported markdown is garbage. I spent more time on the serializer than the editor. Every edge case — nested lists, code blocks in quotes, links with special characters — needs to export correctly.
Writers Aren't Developers
I kept adding features developers would want. Vim keybindings. Regex search. Split panes. Removed them all. Writers want to write. Everything else is noise.
The Result
PenDraft is live at pendraft.com. Open it, write, export. No signup, no friction.
The numbers:
- Build time: 4 weeks
- Rewrites: 2 major, countless minor
- Total cost: $12/year for the domain
- Exported files: Hundreds (mostly mine)
PenDraft completes the writing toolkit I've been building. CoffeeDraft for screenplays, FountainFormat for Fountain reference, PenDraft for everything else. Same philosophy across all of them: your words, your device, no accounts required.
Next up: connecting them. Export from PenDraft directly to your 11ty blog. Publish from CoffeeDraft to your portfolio. The ecosystem is coming together.