Tencent/cherry-markdown

Cherry Markdown Writer

English | 简体中文

Introduction

Cherry Markdown Writer is a JavaScript Markdown editor. It has the advantages such as out-of-the-box, lightweight and easy to extend. It can run in browser or server(with Node.js).

Document

• Getting Started with Cherry Markdown Editor
• hello world
• Configuring Image & File Upload Interfaces
• Adjusting the Toolbar
• Comprehensive Configuration Options
• Custom Syntax
• Configuring Themes
• Extending Code Block Syntax
• Events & Callbacks
• Build Artifacts (Full / Core / Stream / Engine)
• API

Demos

• Full Mode
• Basic
• Mobile
• Multiple Instances
• Editor Without Toolbar
• Pure Preview
• XSS (Disabled by default; requires configuration to enable XSS)
• IMG WYSIWYG
• Table WYSIWYG
• Headers with Auto Num
• Streaming rendering Mode (AI chat scenario)
• Streaming Mode - Lazy Loading Plugins
• VIM Editing Mode
• Utilize Your Own Mermaid.js
• Custom Code Block Wrapper

Features

• Out-of-the-box — Instantiate with a single call; most common Markdown syntax (headings, TOC, flowcharts, formulas, etc.) works by default.
• Easy to extend — Pure JavaScript implementation, no framework dependency (Angular/Vue/React only serve as container environments). Custom syntax, toolbar buttons and themes are all supported.
• Streaming rendering — Purpose-built for AI Chat scenarios. Auto-completes unfinished Markdown fragments during token streaming to prevent raw source flashing.
• Rich editing experience — Multi-cursor editing, floating & bubble toolbars, floating TOC, input autocomplete, VIM mode, shortcut key customization, and theme switching.
• Powerful diagrams & media — Mermaid diagrams (with drag-to-resize and alignment), math formulas, table-to-chart, image resize & alignment, audio/video embedding.
• Export & interoperability — Paste from rich text as Markdown, export to Image / PDF, WYSIWYG editing for images and tables.
• High performance & secure — Partial rendering & partial update; built-in whitelist filtering and DomPurify to prevent XSS.

For a visual walkthrough, see the demo.

Downloads

Desktop Client

Cherry Markdown ships a cross-platform desktop client (built with Tauri) for Windows, macOS and Linux. It supports opening / editing local .md / .markdown / .txt files with the same editing experience as the web version.

👉 Download the latest release

VSCode Extension

Prefer editing Markdown right inside VSCode? Cherry Markdown also provides an official VSCode extension with the same rich editing & preview experience.

👉 Install from VSCode Marketplace

Install as a package

Via yarn

yarn add cherry-markdown

Via npm

npm install cherry-markdown --save

CDN usage

Use the UMD artifact for a regular <script> tag, and pin the package version:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cherry-markdown.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cherry-markdown.js"></script>

The UMD artifact exposes the global Cherry variable. For native ESM:

<script type="module">
  import Cherry from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/cherry-markdown.esm.js';

  const cherry = new Cherry({ id: 'markdown-container' });
</script>

Cherry provides multiple build artifacts (Full / Core / Stream / Engine) to fit different scenarios such as browser, Node.js, and AI Chat streaming. For usage examples, bundle differences, mermaid integration and dynamic import, please refer to Build Artifacts Guide.

Contribution Guidelines

Welcome to join us in building a powerful Markdown editor. Before implementing new features or submitting a pull request, please read:

• Introduction to cherry-markdown editor
• Contribution Guidelines

License

Apache-2.0