# tencent/cherry-markdown

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/tencent-cherry-markdown).**

4,727 stars · 551 forks · JavaScript · NOASSERTION

## Links

- GitHub: https://github.com/Tencent/cherry-markdown
- Homepage: https://github.com/Tencent/cherry-markdown/wiki
- awesome-repositories: https://awesome-repositories.com/repository/tencent-cherry-markdown.md

## Topics

`editor` `javascript` `markdown`

## Description

Cherry Markdown is a web-based Markdown editor and parsing engine that converts markup text into sanitized HTML with a real-time synchronized preview pane. It functions as a rich text interface and WYSIWYG tool, providing a system for transforming markup strings into HTML documents or portable formats.

The project distinguishes itself through high-performance rendering and a flexible extensibility model. It uses virtual DOM diffing and partial rendering to maintain responsiveness in large documents, and it allows for the creation of custom parsing rules and specialized HTML components via a plugin system.

The editor's capability surface includes comprehensive content management for mathematical formulas, diagrams, and rich media, as well as advanced input controls such as multi-cursor editing and Vim-style modal navigation. It also features a robust document export workflow and a design token system for deep visual customization of the editor and preview areas.

The system includes a security layer that uses whitelist-based HTML sanitization to prevent injection attacks.

## Tags

### Part of an Awesome List

- [Web Markdown Editors](https://awesome-repositories.com/f/awesome-lists/devtools/web-markdown-editors.md) — Provides a browser-based Markdown editor with a synchronized real-time preview pane for document creation.
- [Cursor-Positioned Insertions](https://awesome-repositories.com/f/awesome-lists/devtools/code-transformers/positional-insertions/cursor-positioned-insertions.md) — Inserts specific text or formatted Markdown syntax directly at the user's active cursor position. ([source](https://tencent.github.io/cherry-markdown/examples/api.html))
- [Markdown Authoring Interfaces](https://awesome-repositories.com/f/awesome-lists/devtools/component-and-react-utilities/rich-text-editing-components/markdown-authoring-interfaces.md) — Ships a rich text interface with toolbars and multi-cursor editing for managing markdown content.
- [Markdown 编辑器](https://awesome-repositories.com/f/awesome-lists/more/markdown.md) — Listed in the “Markdown 编辑器” section of the Great Open Source Project awesome list.

### Content Management & Publishing

- [Markdown Editors](https://awesome-repositories.com/f/content-management-publishing/markdown-editors.md) — Provides a full-featured web-based editor for writing and previewing Markdown content in real-time.
- [Markdown to HTML Converters](https://awesome-repositories.com/f/content-management-publishing/markdown-to-html-converters.md) — Functions as a parsing engine that transforms Markdown markup strings into sanitized HTML for web display. ([source](https://tencent.github.io/cherry-markdown/examples/api.html))
- [Document Element Insertion](https://awesome-repositories.com/f/content-management-publishing/document-element-insertion.md) — Provides tools for inserting structural and visual elements like checklists, tables, and quotes into the document. ([source](https://tencent.github.io/cherry-markdown/examples/api.html))
- [Markdown Parsing Pipelines](https://awesome-repositories.com/f/content-management-publishing/markdown-parsing-pipelines.md) — Uses a configurable parsing pipeline to convert Markdown text into a structured visual preview. ([source](https://github.com/Tencent/cherry-markdown/wiki))
- [Document Exporting](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/document-exporting.md) — Allows users to export edited Markdown content into portable formats such as PDF or image files. ([source](https://cdn.jsdelivr.net/gh/tencent/cherry-markdown@dev/README.md))
- [Markdown Extensions](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-authoring-tools/markdown-based-content-authoring/markdown-based-content-authoring/markdown-extensions.md) — Supports custom syntax and rendering rules via plugins to extend standard Markdown with specialized UI components.
- [Diagram Renderers](https://awesome-repositories.com/f/content-management-publishing/markdown-renderers/diagram-renderers.md) — Visualizes complex diagrams and charts from text definitions using external rendering libraries. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E6%9E%84%E5%BB%BA%E4%BA%A7%E7%89%A9%E4%BB%8B%E7%BB%8D))
- [Diagram Syntax Insertion](https://awesome-repositories.com/f/content-management-publishing/markdown-renderers/diagram-renderers/flowchart-and-sequence/diagram-syntax-insertion.md) — Enables the insertion of syntax for various chart types including flowcharts, sequence diagrams, and Gantt charts. ([source](https://tencent.github.io/cherry-markdown/examples/api.html))
- [Mathematical Notation Renderers](https://awesome-repositories.com/f/content-management-publishing/markdown-renderers/mathematical-notation-renderers.md) — Supports the rendering of complex mathematical formulas and notation using LaTeX-like syntax within Markdown. ([source](https://tencent.github.io/cherry-markdown/examples/basic.html))
- [Real-Time Streaming Renderers](https://awesome-repositories.com/f/content-management-publishing/markdown-renderers/real-time-streaming-renderers.md) — Stabilizes the rendering of tables and code blocks during real-time text streams. ([source](https://github.com/Tencent/cherry-markdown/wiki))
- [Multi-Format Document Exports](https://awesome-repositories.com/f/content-management-publishing/multi-format-document-exports.md) — Supports exporting a single source document into multiple output formats including PDF, HTML, and images. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90))

### User Interface & Experience

- [Side-by-Side Editor Previews](https://awesome-repositories.com/f/user-interface-experience/live-preview-integrations/side-by-side-editor-previews.md) — Implements a side-by-side interface that synchronizes a Markdown editor with a live rendered preview pane. ([source](https://cdn.jsdelivr.net/gh/tencent/cherry-markdown@dev/README.md))
- [DOM Patching Engines](https://awesome-repositories.com/f/user-interface-experience/dom-patching-engines.md) — Uses paragraph-level diffing to apply minimal changes to the DOM, preventing unnecessary layout operations. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E7%BC%96%E8%BE%91%E5%99%A8%E6%80%A7%E8%83%BD))
- [Extensible Interfaces](https://awesome-repositories.com/f/user-interface-experience/extensible-interfaces.md) — Features an extensible interface that allows plugins to add new capabilities and modify editor behavior. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90))
- [High-Performance Rendering](https://awesome-repositories.com/f/user-interface-experience/high-performance-rendering.md) — Uses virtual DOM diffing and partial rendering to maintain high responsiveness when editing large documents.
- [Partial DOM Updates](https://awesome-repositories.com/f/user-interface-experience/high-performance-rendering/segmented-canvas-rendering/partial-dom-updates.md) — Implements partial rendering by assigning unique signatures to blocks and updating only modified segments.
- [Scroll Synchronization](https://awesome-repositories.com/f/user-interface-experience/live-preview-integrations/side-by-side-editor-previews/split-editor-groups/scroll-synchronization.md) — Synchronizes the scroll position between the Markdown source text and the rendered HTML preview pane. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95))
- [Syntax Extensions](https://awesome-repositories.com/f/user-interface-experience/markdown-and-syntax-highlighting/syntax-extensions.md) — Defines custom inline and paragraph rules using regular expressions to extend the base Markdown specification. ([source](https://cdn.jsdelivr.net/gh/tencent/cherry-markdown@dev/README.md))
- [Segmented Rendering Engines](https://awesome-repositories.com/f/user-interface-experience/partial-property-updates/segmented-rendering-engines.md) — Implements partial rendering and targeted updates to keep the interface responsive when handling large documents. ([source](https://cdn.jsdelivr.net/gh/tencent/cherry-markdown@dev/README.md))
- [Rich Text Element Embedding](https://awesome-repositories.com/f/user-interface-experience/rich-text-element-embedding.md) — Provides a comprehensive interface for managing and embedding formulas, diagrams, and other rich-text elements.
- [Text Formatting Tools](https://awesome-repositories.com/f/user-interface-experience/text-formatting-tools.md) — Includes utilities for applying inline text styles such as bold, italic, and strikethrough. ([source](https://tencent.github.io/cherry-markdown/examples/api.html))
- [Editor Toolbar Configurations](https://awesome-repositories.com/f/user-interface-experience/action-toolbars/toolbar-button-customizations/editor-toolbar-configurations.md) — Configures the layout of editing buttons across top bars, sidebars, and floating selection bubbles. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E8%B0%83%E6%95%B4%E5%B7%A5%E5%85%B7%E6%A0%8F))
- [Custom Color Theme Definitions](https://awesome-repositories.com/f/user-interface-experience/color-themes/custom-color-theme-definitions.md) — Enables the definition of new visual appearances using style files with specific color variables and layout properties. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E9%85%8D%E7%BD%AE%E4%B8%BB%E9%A2%98))
- [Design Token Systems](https://awesome-repositories.com/f/user-interface-experience/design-token-systems.md) — Implements a design token system and variables to consistently override colors, spacing, and typography. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E6%A0%B7%E5%BC%8F%E8%A7%84%E8%8C%83))
- [Editor Themes](https://awesome-repositories.com/f/user-interface-experience/editor-themes.md) — Applies visual styles to the editor and preview areas by toggling specific classes on the container. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E9%85%8D%E7%BD%AE%E4%B8%BB%E9%A2%98))
- [Editor View Toggles](https://awesome-repositories.com/f/user-interface-experience/editor-view-toggles.md) — Toggles the interface between edit-and-preview, edit-only, and preview-only viewing modes. ([source](https://tencent.github.io/cherry-markdown/examples/api.html))
- [Custom Code Block Rendering](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/code-to-html-rendering/custom-code-block-rendering.md) — Allows defining custom rendering rules to transform code blocks into specialized components or styled output. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E6%89%A9%E5%B1%95%E4%BB%A3%E7%A0%81%E5%9D%97%E8%AF%AD%E6%B3%95))
- [Image Dimension Specifiers](https://awesome-repositories.com/f/user-interface-experience/markdown-image-alignment/image-dimension-specifiers.md) — Supports specifying image width and height using attribute syntax for precise layout control in the preview. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E7%89%B9%E6%80%A7%E5%B1%95%E7%A4%BA-features))
- [Code Block Annotations](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/code-presentation-utilities/code-line-highlighting/code-block-annotations.md) — Enhances code blocks with interactive visual elements like line numbers and copy buttons. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E6%89%A9%E5%B1%95%E4%BB%A3%E7%A0%81%E5%9D%97%E8%AF%AD%E6%B3%95))
- [Custom Editor Toolbar Buttons](https://awesome-repositories.com/f/user-interface-experience/text-editors/custom-editor-toolbar-buttons.md) — Allows the creation of programmable toolbar buttons with custom icons and click handlers to extend editor actions. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E8%B0%83%E6%95%B4%E5%B7%A5%E5%85%B7%E6%A0%8F))
- [Text Selection Control](https://awesome-repositories.com/f/user-interface-experience/text-selection-control.md) — Provides APIs to programmatically adjust the cursor and selection range for wrapping text in Markdown syntax. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E8%B0%83%E6%95%B4%E5%B7%A5%E5%85%B7%E6%A0%8F))
- [Application CSS Overrides](https://awesome-repositories.com/f/user-interface-experience/third-party-client-styling/internal-css-overrides/application-css-overrides.md) — Supports modifying the appearance of the editor and output by overriding default styles with custom CSS. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90))
- [Keyboard Shortcut Mapping](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/keyboard-shortcut-mapping.md) — Provides a programmatic interface for mapping keyboard combinations to specific editor actions. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E9%85%8D%E7%BD%AE%E5%BF%AB%E6%8D%B7%E9%94%AE))
- [Code Block Themes](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization/code-block-themes.md) — Provides the ability to change the visual syntax highlighting for code blocks using predefined or custom styles. ([source](https://tencent.github.io/cherry-markdown/examples/api.html))
- [WYSIWYG Editors](https://awesome-repositories.com/f/user-interface-experience/wysiwyg-editors.md) — Provides an interactive visual editing surface where the output matches the final rendered version.

### Business & Productivity Software

- [HTML Element Filters](https://awesome-repositories.com/f/business-productivity-software/tag-filtering-systems/html-element-filters.md) — Employs a whitelist-based mechanism to remove unsafe HTML tags from the rendered output. ([source](https://tencent.github.io/cherry-markdown/examples/xss.html))

### Development Tools & Productivity

- [Editor State Management](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/state-tracking-utilities/action-based-state-tracking/editor-state-management.md) — Manages the operational state of the editor, including undo/redo history and full-screen toggling. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E8%B0%83%E6%95%B4%E5%B7%A5%E5%85%B7%E6%A0%8F))
- [Plugin & Integration Systems](https://awesome-repositories.com/f/development-tools-productivity/plugin-integration-systems.md) — Integrates a plugin system that allows for the addition of custom Markdown syntax and menu behaviors. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E6%9E%84%E5%BB%BA%E4%BA%A7%E7%89%A9%E4%BB%8B%E7%BB%8D))
- [Syntax Transformation Rules](https://awesome-repositories.com/f/development-tools-productivity/regex-based-syntax-highlighting/syntax-transformation-rules.md) — Uses regular expressions to define custom inline and paragraph rules for transforming Markdown into HTML.
- [Custom Parsing Rules](https://awesome-repositories.com/f/development-tools-productivity/syntax-definitions/custom-parsing-rules.md) — Allows for the creation of custom parsing rules and specialized HTML components via a plugin system. ([source](https://github.com/Tencent/cherry-markdown/wiki))
- [Modal Text Manipulation](https://awesome-repositories.com/f/development-tools-productivity/command-line-configurations/vim-style-interface-emulations/modal-text-manipulation.md) — Integrates command and insert modes with keyboard-driven motion keys for faster navigation and editing. ([source](https://tencent.github.io/cherry-markdown/examples/vim.html))
- [Modal Text Navigation](https://awesome-repositories.com/f/development-tools-productivity/command-line-configurations/vim-style-interface-emulations/modal-text-navigation.md) — Moves the cursor across lines and words using standard Vim motion keys for faster editing. ([source](https://tencent.github.io/cherry-markdown/examples/vim.html))
- [Automatic Table of Contents](https://awesome-repositories.com/f/development-tools-productivity/documentation-navigation/document-structure-navigators/outline-management/automatic-table-of-contents.md) — Automatically generates navigational outlines based on the document's heading hierarchy. ([source](https://tencent.github.io/cherry-markdown/examples/api.html))
- [Debounce and Throttle Utilities](https://awesome-repositories.com/f/development-tools-productivity/execution-throttling/debounce-and-throttle-utilities.md) — Optimizes performance by adjusting the debounce interval for input rendering based on document length. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E7%BC%96%E8%BE%91%E5%99%A8%E6%80%A7%E8%83%BD))
- [Modal Input Systems](https://awesome-repositories.com/f/development-tools-productivity/modal-input-systems.md) — Provides a modal input system allowing users to toggle between command and insert modes for keyboard-driven editing.
- [Multi-Cursor Editing](https://awesome-repositories.com/f/development-tools-productivity/multi-cursor-editing.md) — Supports simultaneous text manipulation across multiple document locations using multi-cursor selection. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E7%89%B9%E6%80%A7%E5%B1%95%E7%A4%BA-features))
- [Syntax Priority Management](https://awesome-repositories.com/f/development-tools-productivity/strictness-preset-configurators/syntax-standardization-rules/syntax-priority-management.md) — Determines the execution order of custom syntax rules relative to built-in rules to ensure correct element nesting. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95))

### Security & Cryptography

- [HTML Sanitization](https://awesome-repositories.com/f/security-cryptography/injection-prevention/html-sanitization.md) — Filters rendered output through a security scanner to prevent cross-site scripting and injection attacks. ([source](https://cdn.jsdelivr.net/gh/tencent/cherry-markdown@dev/README.md))
- [HTML Content Sanitization](https://awesome-repositories.com/f/security-cryptography/html-content-sanitization.md) — Includes a security layer that uses whitelist-based sanitization to remove unsafe HTML tags and prevent XSS attacks.
- [Modal Input Switching](https://awesome-repositories.com/f/security-cryptography/role-based-access-control/workspace-role-assignments/ai-agent-role-assignments/behavioral-role-switching/operational-mode-switching/interface-mode-switching/modal-input-switching.md) — Toggles between a command mode for navigation and an insert mode for typing text. ([source](https://tencent.github.io/cherry-markdown/examples/vim.html))

### Software Engineering & Architecture

- [Editor Plugin Integrations](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/third-party-plugins/cms-extension-integrations/editor-plugin-integrations.md) — Implements a flexible plugin system to integrate custom syntax and specialized menu behaviors into the editor.
- [Virtual DOM Optimizations](https://awesome-repositories.com/f/software-engineering-architecture/virtual-dom-optimizations.md) — Utilizes virtual DOM diffing to identify changed paragraphs and update only affected sections of the preview area. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E7%89%B9%E6%80%A7%E5%B1%95%E7%A4%BA-features))
- [Segmented Rendering Updates](https://awesome-repositories.com/f/software-engineering-architecture/segmented-rendering-updates.md) — Implements a system that assigns signatures to rendered blocks to update only modified segments of the view. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95))
- [Syntax Rule Conflict Prevention](https://awesome-repositories.com/f/software-engineering-architecture/syntax-rule-conflict-prevention.md) — Uses caching and placeholders to stop multiple syntax rules from conflicting when processing text. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95))

### Web Development

- [Virtual DOM Diffing](https://awesome-repositories.com/f/web-development/virtual-dom-diffing.md) — Uses virtual DOM diffing to identify changed paragraphs and minimize browser overhead during preview updates.
- [Rich Media Insertions](https://awesome-repositories.com/f/web-development/editor-insertion-commands/table-insertion/rich-media-insertions.md) — Provides commands for inserting rich media such as images, audio, video, and interactive diagrams. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E8%B0%83%E6%95%B4%E5%B7%A5%E5%85%B7%E6%A0%8F))
- [Image Lazy Loading](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading.md) — Defers the loading of images until they enter the viewport to optimize initial page performance. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD))
- [Lazy Loading Schedulers](https://awesome-repositories.com/f/web-development/lazy-loading-libraries/image-lazy-loading/lazy-loading-schedulers.md) — Controls image loading via a scheduler that supports concurrency limits and proximity-based preloading. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E7%BC%96%E8%BE%91%E5%99%A8%E6%80%A7%E8%83%BD))
- [Configurable Editor Embeddings](https://awesome-repositories.com/f/web-development/rich-text-editors/configurable-editor-embeddings.md) — Enables the embedding of the interactive Markdown editor into specific web elements with custom dimensions. ([source](https://github.com/Tencent/cherry-markdown/wiki/hello-world))
- [Media Insertion Integrations](https://awesome-repositories.com/f/web-development/rich-text-editors/media-insertion-integrations.md) — Integrates capabilities to insert images, videos, audio files, PDFs, and Word documents into the editing area. ([source](https://tencent.github.io/cherry-markdown/examples/api.html))

### Data & Databases

- [Content Change Tracking](https://awesome-repositories.com/f/data-databases/data-ingestion-sources/source-metadata-capture/source-tracking/content-change-tracking.md) — Tracks changes to editor content and notifies the system after asynchronous rendering tasks complete. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E4%BA%8B%E4%BB%B6&%E5%9B%9E%E8%B0%83))

### Graphics & Multimedia

- [Asynchronous Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/text-rendering/asynchronous-rendering-engines.md) — Offloads the rendering of complex charts and diagrams to background threads to maintain UI responsiveness. ([source](https://github.com/Tencent/cherry-markdown/wiki/%E7%BC%96%E8%BE%91%E5%99%A8%E6%80%A7%E8%83%BD))