[!NOTE] This README was generated by SKILL, get the ZH version from here.

LIGHTWEIGHT MARKDOWN EDITOR IN PURE JAVASCRIPT!

NanoMD

A pure JavaScript Markdown library with a synced editor and viewer, a shared parsing pipeline, and Mermaid-ready extended syntax

Table of Contents

• Features
• Architecture
• License
• Author

Features

npm i @pardnchiu/nanomd · Documentation · Getting Started

• Live Editor and Viewer Sync — Bind MDViewer to MDEditor and the preview re-renders once typing pauses, with optional wheel-driven scroll sync.
• One Pipeline for All Components — The editor, the viewer and the standalone MDParser all go through the same transToHTML(), so syntax behaves identically everywhere.
• Standard and Extended Syntax — Extended mode adds GitHub-style alerts, Mermaid diagrams, marker and sub/superscript, image sizing, and YouTube/Vimeo embeds.
• Embed With One Script — No framework required; a single file pulls in its own styles, code highlighting and Mermaid.
• Full Editing Toolkit — Built-in shortcuts, snapshot undo/redo, a floating toolbar, Markdown/HTML export and file import.

Architecture

Full Architecture

graph LR
    User[User input] --> Editor[MDEditor]
    Editor -->|triggers render| Viewer[MDViewer]
    Viewer -->|reads editor text| Trans["transToHTML()"]
    Parser[MDParser] --> Trans
    Editor -->|HTML export| Trans
    Trans --> Funcs[set* transforms]
    Viewer --> Runtime[code-prettify / Mermaid]

License

This project is licensed under the MIT LICENSE.

Author

Just open an issue to share an idea.

©️ 2024 邱敬幃 Pardn Chiu