wysiwyg-markdown-editor-online/README.md

A modern, powerful online WYSIWYG Markdown editor & converter. Easily edit .md files like Word and export/convert Markdown to JPG/PNG images, high-quality PDF documents, HTML webpages, and rich text.

# 🪶 Muya MD Editor - Online WYSIWYG Markdown Editor

## [WYSIWYG Markdown Editor Online](https://it365.janqi.com/markdown/editor/muya/en/)

`Muya MD Editor` is a modern online WYSIWYG (What-You-See-Is-What-You-Get) Markdown editor and document management tool built on the open-source Muya engine, enabling you to edit `.md` files seamlessly just like using a Word editor. It delivers a distraction-free writing experience, powerful live rendering capabilities (math formulas, diagrams, code syntax highlighting), and versatile one-click file export options.

---

## ✨ Key Features

### 1. ⚡ Real-Time WYSIWYG Editing
- **Instant Rendering**: Experience smooth, instant rendering of Markdown syntax while writing, remaining fully editable in real-time.
- **Inline Format Toolbar**: Select any text to trigger the inline formatting toolbar (Bold, Italic, Strikethrough, Link, Inline Code, Super/Subscript, Footnote).
- **Quick Actions**: Type `/` on a new line to summon the block element menu, or type `:` to trigger the Emoji auto-complete selector.

### 2. 📊 Advanced Diagramming & Math Support
- **📐 KaTeX Math Formulas**: Integrated with high-performance KaTeX for rendering inline formulas (e.g., `$\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}$`) and complex block matrix equations.
- **📈 Mermaid Flowcharts & Diagrams**: Built-in Mermaid engine supporting flowcharts, sequence diagrams, gantt charts, and state diagrams directly inside code blocks.
- **🎨 Extended Media**: Support for PlantUML, Vega/Vega-Lite data visualizations, and Prism syntax highlighting.

### 3. 📤 Diverse Export & Sharing Formats
| Format | Description | Best For |
| :--- | :--- | :--- |
| **Markdown (.md)** | Export standard `.md` source file | Local backups and cross-editor editing |
| **PNG / JPG Image** | High-definition image generation | Quick preview and sharing on social media / slides |
| **HTML Webpage (.html)**| Standalone HTML file with embedded styles | Offline reading & rich-text copy/pasting to Word |
| **PDF Document (.pdf)** | High-quality PDF keeping math & diagrams intact | Cross-platform distribution, printing, and publishing |
| **ZIP Package** | Bulk export all documents as a ZIP archive | Full library backup |

### 4. 📁 Portable Local Document Management
- **Automatic Auto-Save**: Hybrid auto-save algorithm (10s throttle + 1.5s debounce) persists your documents locally in browser IndexedDB.
- **Drag-and-Drop Import**: Drag and drop `.md` or `.markdown` files directly onto the sidebar for instant batch import.
- **Full-Text Search**: Full-text keyword search and document sorting for effortless note organization.

---

## 🛠️ Markdown Syntax Compliance

- **Standards**: Strictly compliant with **CommonMark 0.31** and **GitHub Flavored Markdown (GFM) 0.29**.
- **Block Elements**: Headings (`#` ~ `####`), ordered/unordered lists, task lists (`[x]`), blockquotes (`>`), horizontal rules (`---`), tables, and code blocks.
- **Extended Features**:
  - **YAML Front Matter**: Parse and edit document meta headers.
  - **Footnotes**: Render `[^id]` citations with hover tooltips and interactive back-referencing HTML structures.
  - **Code Block Line Numbers**: Opt-in line numbering for clean code reviews.

---

## 🚀 Quick Start Guide

1. **Create Document**: Click the `+` icon in the sidebar to start a new blank document.
2. **Import Local Files**: Click **Import File** or drag `.md` files onto the sidebar.
3. **Write & Format**: Type Markdown syntax directly or use the popup inline formatting toolbar.
4. **Export File**: Click the **Export** button in the top header and choose your desired output format (MD, Image, HTML, or PDF).

---

## 🔗 Links & Resources

- [WYSIWYG Markdown Editor Online](https://it365.janqi.com/markdown/editor/muya/en/)
- [WYSIWYG Markdown-Editor Online](https://it365.janqi.com/markdown/editor/muya/de/)
- [所见即所得Markdown编辑器](https://it365.janqi.com/markdown/editor/muya/zh/)
- [WYSIWYG Markdown エディタ](https://it365.janqi.com/markdown/editor/muya/ja/)
- [Editor Markdown WYSIWYG en línea](https://it365.janqi.com/markdown/editor/muya/es/)
- [Editor Markdown WYSIWYG Online](https://it365.janqi.com/markdown/editor/muya/pt/)
- [UNPKG](https://unpkg.com/wysiwyg-markdown-editor-online/)
- [jsDelivr](https://www.jsdelivr.com/package/npm/wysiwyg-markdown-editor-online)
- [npmx](https://npmx.dev/package/wysiwyg-markdown-editor-online)
- **Muya Core Engine**: Muya