English | 中文

Live Demo: https://yueyuewudi.github.io/pure-local-markdown-editor/

A pure-frontend, completely local Markdown document editor. No build steps, no backend, no data leaves your browser.

• Dark / Light Theme: Built-in dual themes with a toggle switch. The app automatically remembers your preference using browser localStorage.
• Bilingual Interface: Support for English and Simplified Chinese UI with a seamless toggle switch.
• Real-time Editing: Seamlessly type Markdown on the left with a live rendered preview on the right.
• Rich Markdown Support: Headings, paragraphs, lists, blockquotes, tables, links, and more.
• Code Highlighting: Syntax highlighting for code blocks powered by highlight.js with an authentic VS Code Dark+ theme. Features a built-in dropdown selector to easily insert language-specific code blocks.
• Mermaid Diagrams: Native support for Mermaid charts. Click to enlarge, scroll to zoom, drag to pan.
• Direct Image Pasting: You can paste images directly from your clipboard into the editor (Ctrl+V / Cmd+V)!

  How it works: The editor compresses the pasted image and stores it in the browser's temporary memory, inserting a clean short reference (like ![pasted image](local_img_...)) to keep your Markdown readable. Since it's purely local, copying the raw Markdown text to another app will lose the images; after a page refresh images are restored from browser localStorage when they fit (oversized image sets fall back to session-only memory). However, clicking "Export HTML" will permanently embed the full image data into the exported HTML file, making it completely offline and shareable!

• File Management: Import (.md / .txt / .markdown) via drag-and-drop or the "Import MD" button.
• Export Options: A built-in dropdown menu allows you to perfectly export your document to:
  • Markdown (.md): Save your raw text.
  • HTML (.html): Export a standalone HTML file with all images permanently embedded. The exported HTML dynamically adopts the exact colors of the Light/Dark mode you were using when exporting!
  • PDF (.pdf): Export an ultra-clean PDF. The editor leverages the browser's native print engine and advanced CSS print queries (@media print, page-break-inside: avoid) to guarantee absolute perfection in pagination, never cutting text in half. Long code blocks will intelligently wrap to the next line.

    Tip: To achieve the cleanest output, please uncheck "Headers and footers" in your browser's print dialog to remove the default date and file path stamps.

• Future AI Integration Ready: Designed with a pure local architecture that makes it perfectly suited for future integration with local LLM inference engines (like llama.cpp / Ollama) to build a local AI Agent for private, offline AI-assisted writing and Markdown generation.
• Split Pane Layout: Resizable editor and preview panels.

pure-local-markdown-editor/
├── index.html
├── css/
│   ├── hljs-theme.css     # VS Code Dark+ theme mapping
│   └── app.css            # App styles
├── js/
│   ├── lib/
│   │   ├── marked.min.js
│   │   ├── highlight.min.js
│   │   └── mermaid.min.js
│   └── app.js             # App logic
├── LICENSE                # MIT License
├── THIRD-PARTY-LICENSES   # Open source acknowledgments
├── README.md
├── README.zh.md
└── .gitignore

Double-click index.html and open it in any modern browser. No build, no server required.

Note: if the browser blocks external JS loading under the file:// protocol, serve the folder with a local static server:

# pick one
python -m http.server 8000
npx serve .

index.html loads assets in <head> in the following strict order. Do not reorder — otherwise mermaid.initialize / marked.parse / hljs.highlight in app.js will throw because the libraries are not yet defined:

1. marked.min.js
2. highlight.min.js
3. mermaid.min.js
4. hljs-theme.css
5. app.css

app.js is included right before </body> so that the DOM is fully constructed before it runs.

• Security hardening: all Markdown input is sanitized before rendering. Plain and unhighlighted code blocks, Mermaid sources, language badges and Mermaid error messages are HTML-escaped; link and image URLs are escaped and the javascript: / vbscript: schemes are blocked; inline raw HTML is filtered (script/iframe/object/embed/meta/link tags removed, on* event-handler attributes and javascript: URLs stripped, filtering repeated until stable). External links carry rel=noopener noreferrer. The exported HTML document title is escaped as well.
• Draft autosave: editor content is automatically saved to localStorage (debounced) and restored on the next launch. Pasted images now survive a page refresh when they fit in browser storage (previously they were always lost on refresh).
• New: Tab inserts indentation in the editor; Ctrl+S / Cmd+S exports the Markdown file; a confirm dialog protects existing content before Import or Drag-and-drop replaces it.
• Improvements: pasted images get a white background fill (transparent PNGs no longer turn black) plus a paste-failure toast; the code Copy button falls back to execCommand on file:// and reports failures; Mermaid runs with securityLevel strict; the pane divider supports touch dragging on mobile; long words wrap instead of overflowing; PDF export hides the copy button and language badge; exported HTML uses the first heading as its document title, fixes the hover CSS variable and adds Mermaid diagram styling; language and theme settings degrade gracefully when localStorage is unavailable.

This project is licensed under the MIT License.

Third-party libraries bundled in this project retain their original licenses. See THIRD-PARTY-LICENSES for details.