Markdown Editor
A fast, keyboard-first Markdown editor with a live preview. A deliberately small tool, built to get the details most editors fumble exactly right, like scroll that stays in sync, undo that behaves, and a flow you never have to leave the keyboard for.
⤢ Click to zoomWhy I built it
I write a lot in Markdown, and most editors get in the way. They hide the preview behind a toggle, lose your place when you scroll, or break undo the moment you touch a toolbar. I wanted one that gets the small things right, the ones you only notice when they are wrong.
It is also how I keep my hands in the build. I design software for a living, so I want to feel what I am asking engineers to build. A focused app like this is the right size to take an idea all the way to shipped, and to land the interaction details exactly where I want them instead of describing them in a spec.
Anyone can render Markdown. The details are the actual work.
What it does
You write Markdown on the left and watch it render on the right, live, with no toggling. A formatting toolbar and a full set of keyboard shortcuts cover the common moves, and your work autosaves as you go.
- Live preview, three ways. Edit, split, or preview, with the panes scroll-locked in split so the source and the result never drift apart.
- A real toolbar. Sixteen formatting actions, from headings and lists to tables and code blocks, each inserted with the cursor left exactly where you want it.
- Keyboard-first. Every action has a shortcut, an in-app panel documents them, and they adapt to Mac or Windows on their own.
- Undo that behaves. Typing collapses into sensible steps, toolbar edits commit on their own, and redo never drops you mid-word.
- Find as you read. Search highlights every match in the rendered preview and walks you through them one by one.
- Yours to keep. Autosaves to the browser, opens and downloads .md files, and copies clean output in a click.
How it works
The preview is a real Markdown pipeline, react-markdown with GitHub-flavored Markdown and syntax-highlighted code blocks, so tables, task lists and fenced code render the way they would on GitHub. The editor layers a highlighted view behind a transparent textarea, so the raw Markdown markers fade back and your formatted text stands out as you type.
Most of the work went into the things you feel but never see. Split-view scrolling syncs by proportion rather than pixels, so the panes stay aligned even when the rendered side runs longer. Toolbar actions restore your scroll position before the screen repaints, so nothing jumps. Undo runs on a debounced history, so a paragraph of typing folds into one step instead of fifty. It is one typed React tree, with no heavier framework underneath.
Tech stack
Designed and built solo. Scaffolded fast from a Figma design with Figma Make, then refined by hand where the interaction details mattered. No backend, everything runs in the browser.