Writing toolLive

MD Editor: a Markdown workspace whose documents stay on your device

MD Editor is a Markdown workspace that shows the preview live and sends nothing to a server. I built it with Next.js and TypeScript; documents live in the browser and you export them when you want.

Client

My own product

Year: 2026

My role

Design and development

Services
  • Web app (Next.js)
  • Editor and preview experience
  • Phone layout
  • Test setup
Tech stack
Next.jsReactTypeScriptTailwindCSSVitestPlaywright
Highlights
  • Local-first, no account
  • Live preview and outline
  • End-to-end tested

Problem

Most note and document apps ask for an account, syncing and a server, and many come with a busy interface. That is too heavy for someone who just wants to write and see the Markdown result.

The goal was a calm writing space that needs no account, keeps data on the device, opens fast and works well from the keyboard.

Solution

The document library, editor and preview sit on one screen. Documents and settings live only in the browser's local storage, and export produces a .md file.

  • A document library: create, rename, duplicate, delete with undo, search, import and export
  • A selection-aware formatting bar and shortcuts such as Ctrl/⌘ + B, I and K
  • A live preview with GFM tables, task lists and code highlighting; raw HTML is deliberately not run
  • An outline menu that lists headings and moves the editor and preview to the one you pick
  • Light, dark and system themes; text size, line height, font, line numbers and focus mode
  • Yaz and Önizleme tabs and a document drawer on phones

Result

The app is live and sends documents to no server. I fixed the phone layout and added the outline, duplicate and undo-delete features; every feature is protected by end-to-end tests.

  • 58 end-to-end and 26 unit tests
  • Raw HTML and scripts do not run in the preview
  • A single-pane phone layout with no sideways scroll
Screenshots