Justin King
Back to index

Project

MarkdownStudio

A native Windows markdown editor that lets you edit the rendered preview, not just the source.

Built with C#, .NET, WebView2, Monaco, markdown-it.

What it is

MarkdownStudio is a native Windows markdown editor I built when I got tired of switching between source view and preview view in everything else. The split pane keeps source on the left and rendered output on the right, and both stay live.

The trick that makes it interesting is X-ray edit. Most markdown editors are strict about which pane you’re editing in: source on one side, read-only preview on the other. In MarkdownStudio you can click into the preview and edit there too. The renderer maps your edits back to the source file so nothing falls out of sync.

It also handles the usual suspects nicely: math with KaTeX, diagrams with Mermaid, syntax highlighting via highlight.js, and clean styling courtesy of GitHub’s markdown CSS.

Why it matters

I wanted a single tool that respected how I actually write technical docs: sometimes you want to bang out raw markdown, sometimes you want to nudge a table cell or fix a typo in the rendered view without scrolling around in the source. Most editors make you pick a side. This one doesn’t.

Tech notes

  • App shell: C# / .NET native Windows app. WebView2 hosts the rendered preview so we get the full power of a modern browser for rendering while keeping the editor experience native.
  • Source editor: Monaco (the editor that powers VS Code) for syntax highlighting, multi-cursor, and the small ergonomics you’d expect.
  • Rendering pipeline: markdown-it for the markdown core, with KaTeX for math, Mermaid for diagrams, highlight.js for code blocks, and github-markdown-css for the visual baseline.
  • Targets: Windows 10 1809+ and Windows 11. Distributed as an MSIX package.