Distraction-free Markdown Editor

Overview

A two-pane Markdown editor with a live preview and a true full-screen focus mode. Drafts autosave to your browser within half a second of typing, the preview renders GitHub-flavoured Markdown including tables, and a word-and-character counter strips Markdown syntax before counting.

How It Works

Write Markdown on the left; the right pane renders it live with remark-gfm, so tables, strikethrough, and task lists preview correctly. The status label flips from 'Saving…' to 'Saved' once the debounced write to localStorage lands. Press Focus mode to expand the editor into a distraction-free full-screen view (Ctrl or Command plus Shift plus Enter also toggles it), and use Save to force a write or Clear to empty the draft.

Step-by-Step Usage Guide

1. Type or paste Markdown into the left pane.
2. Check the right pane to confirm tables and lists render as intended.
3. Toggle Focus mode for a full-screen writing surface.
4. Rely on autosave, or press Save before closing in a hurry.

Technical Specifications & Standards

Persistence is a single localStorage key, CruxDev-focus-markdown-editor-v1, written on a 400-millisecond debounce after each change — the timer resets on every keystroke so the write lands once you pause, and a manual Save button forces an immediate write for the impatient. On load the saved draft is restored, falling back to a small default template on first visit or after site data is cleared. The word counter is honest about Markdown: it strips fenced code blocks and inline markers such as asterisks, backticks, and brackets before splitting on whitespace, so '# Title' counts as one word, not two. The preview uses react-markdown with remark-gfm rather than a hand-rolled regex renderer, which is why GFM tables and task lists behave. The focus mode is a fixed full-viewport overlay rather than a new window, so browser zoom and your IME keep working. As with all localStorage tools, the draft is per-browser and per-profile, is not synced, and is lost if the site's data is cleared — export important text by copying it out.

Targeted Use Cases

• Drafting documentation or a README section with live GFM table previews.
• Keeping study notes in Markdown that survive tab closes.
• Writing without browser chrome in the way via the full-screen mode.
• Checking that tricky Markdown — nested lists, task items — renders before publishing elsewhere.

Notes & Gotchas

• Wait for the Saved label after a burst of edits before closing the tab.
• Copy drafts out for anything important; localStorage is a convenience cache, not an archive.
• Use the counter as a writing gauge, remembering it ignores Markdown punctuation.
• Learn the focus-mode shortcut (Ctrl/Command plus Shift plus Enter) to toggle without reaching for the mouse.

Frequently Asked Questions