Browser-based React 18 No Login MIT

md-fun

A browser-based Markdown editor with real-time preview. Type on the left, see formatted output on the right. No account, no server, no install. Everything stays in your browser.

Open md-fun
GitHub

Writing Tools Should Not Need a Server

Most Markdown editors are either desktop apps with heavyweight installs or cloud tools that require an account and send your content to a server. md-fun is neither. It runs entirely in the browser, stores your work in localStorage, and never touches a backend. Open it, write, close it. Your draft will be there when you come back.

Zero dependencies

No account. No login. No server. Open the URL and start writing.

Persistent drafts

Content autosaves to localStorage on every keystroke. Nothing is lost when the tab closes.

XSS-safe rendering

All rendered HTML passes through DOMPurify before touching the DOM. Safe to paste untrusted content.

Real-time Preview

The right pane updates on every keystroke using marked for parsing and marked-highlight with highlight.js for code block syntax coloring. YAML frontmatter (--- blocks) is detected and rendered separately above the document body in a readable key/value format.

Supports all standard Markdown: headings, bold, italic, links, code blocks, tables, blockquotes, and lists.

Toolbar & Keyboard Shortcuts

Toolbar buttons for bold, italic, links, inline code, and heading levels H1 through H3. Buttons are context-aware: formatting wraps selected text or inserts a placeholder when nothing is selected. The Tab key inserts two spaces instead of moving focus.

  • ▸Cmd/Ctrl + B toggles bold
  • ▸Cmd/Ctrl + I toggles italic
  • ▸Cmd/Ctrl + K inserts a link

Save & Load Files

Export your content as a .md file at any time. Load any .md or .txt file from disk to pick up where you left off in another tool. No cloud sync, no permissions, no waiting.

Both operations use native browser File APIs. No third-party upload service involved.

Dark Mode & Word Count

Toggle between light and dark themes without losing your place. Word and character counts update live in the footer so you always know where you are in a draft.

Theme preference is saved locally. Opens in the same mode it was left in.

How It Works

Four focused libraries. No backend. No framework bloat beyond what React provides.

Library What it does
marked Parses Markdown source into HTML. Handles the full CommonMark spec plus GitHub-flavored extensions like tables and strikethrough.
marked-highlight Integrates a syntax highlighter into marked's rendering pipeline so fenced code blocks get language-aware coloring.
highlight.js Does the actual token classification and applies the Atom One Dark theme. Supports auto-detection when no language is specified.
DOMPurify Sanitizes all generated HTML before it is written to the DOM. Strips script tags, event handlers, and dangerous attributes from any content including loaded files.

Project Structure

markdown-editor/
  index.html           Main HTML entry point
  public/              Static assets
  src/
    App.jsx            Main application component
    icons.jsx          Inline SVG components (no icon font dependency)
    index.css          Tailwind base + Markdown preview styles
    App.test.jsx       Vitest + React Testing Library suite

Security

  • ▸ All Markdown is parsed first, then the resulting HTML is passed through DOMPurify before being injected into the DOM. Malicious payloads in loaded .md files cannot execute.
  • ▸ No data is transmitted anywhere. Content never leaves the browser. There is no analytics pipeline reading your drafts.
  • ▸ File I/O uses native browser APIs. No upload endpoint, no cloud storage, no third-party service receives file data.
  • ▸ localStorage stores only your Markdown source, never any rendered output or metadata. Clearing site data in browser settings fully resets the editor.

Who It's For

  • ▸ Writers and technical authors who want a distraction-free editor without signing up for anything.
  • ▸ Developers drafting README files, documentation, or issue descriptions who need instant visual feedback.
  • ▸ Students and educators learning Markdown syntax with a live rendering loop and no setup friction.
  • ▸ Privacy-conscious users who want a writing tool that never sends content to a server.

Testing

Tests run with Vitest and React Testing Library. The suite covers rendering, toolbar state, preview updates, and dark mode toggle behavior. 

# clone and run tests
git clone https://github.com/peterbenoit/markdown-editor
cd md-fun && npm install
npm test
# production build
npm run build
# dev server
npm run dev

Output goes to dist/. Any static host works: Vercel, Netlify, Cloudflare Pages, or GitHub Pages.

Open It or Fork It

The live instance is at md-fun.vercel.app. Fork the repo, self-host it, or use it as a base for your own browser-based editor.

Open md-fun
GitHub

Related