Rico MD - WeChat Official Account Markdown Editor

A pure front-end Markdown editor tailored for WeChat Official Account writing and formatting, supporting real-time preview, code block themes, local image persistence, and one-click rich text copying.

Online Address

• https://md.ricoui.com

Repository Address:

• https://github.com/ricocc/rico-md/

Core Capabilities

1. Editing & Preview

• Left-side Markdown editing, right-side real-time preview.
• Supports common editing shortcuts (headings, bold, italic, blockquotes, code blocks, dividers, tables, etc.)
• Supports switching between desktop and mobile preview modes.

2. Document Management

• Supports creating, switching, duplicating, deleting, and searching multiple documents.
• Delete operations require a confirmation pop-up to prevent accidental deletion.
• After deleting the last document, a blank document is automatically created to ensure there is always an editable document available.
• Document content and current active status are persisted to localStorage.

3. Auto-save & Save Status

• Uses a fixed 5-second debounce auto-save after input.
• The status bar displays "Saving / Saved / Save Failed" along with the last save time.
• Retains the explicit save shortcut: Ctrl/Cmd + S.

4. Themes & Code Panel

• Built-in multiple WeChat Official Account layout themes (20 available currently), categorized by style:
  • Minimalist: Default, Minimalist, Tech, Elegant Minimalist, Immersive Reading, Jony Ive
  • Technical Reading: Anthropic, Wired, Medium Reading, Apple Minimalist, AI Coder
  • Classic Texture: Paper Chronicle, LatePost Deep Dive, Financial Times, Ink Line · Newspaper, Magazine
  • Design Inspiration: Plain White · Negative Space, Ochre Red · Editorial, Plain Gray · Clean, Terracotta · Organic, Ink Blue · The Guardian, Vermilion · Nikkei, Plain Ink · Le Monde
• The code panel supports independent code themes (16 available currently).

5. Image Processing (Local-First)

• Supports pasting, dragging and dropping, and toolbar upload for images.
• Uses Canvas compression (with GIF/SVG preservation strategy) and writes images to IndexedDB.
• The editor uses img:// short links to avoid large Base64 strings impacting input performance.
• Images are read from IndexedDB and replaced with previewable URLs during rendering.
• When copying to a WeChat Official Account, images are automatically converted to Base64 to improve paste compatibility.

6. Export & Copy

• One-click copy to WeChat Official Account (rich text HTML).
• Supports copying plain text.
• Supports exporting .md and .html files.