whatisgithub

What is cherry-markdown?

tencent/cherry-markdown — explained in plain English

Analysis updated 2026-06-26

4,689JavaScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

Cherry Markdown is a JavaScript Markdown editor by Tencent that you can embed in any website without a framework, showing a live preview with support for diagrams, math formulas, and AI streaming text rendering.

Mindmap

mindmap
  root((repo))
    What it does
      Markdown editing
      Live preview
      Streaming rendering
    Extra features
      Mermaid diagrams
      Math formulas
      Image drag resize
      PDF export
    Framework support
      Plain JavaScript
      React wrapper
      Vue wrapper
      Node server side
    Security
      XSS filtering
      Safe content rendering
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Embed a rich Markdown editor with live preview into a content management system or blog platform built with plain JavaScript.

USE CASE 2

Add a streaming Markdown renderer to an AI chat interface so responses arrive word by word without flashing raw symbols.

USE CASE 3

Let users create documents with Mermaid diagrams and math formulas inside a web application without installing any JavaScript framework.

USE CASE 4

Replace a basic textarea with a full-featured editor that lets users insert images by dragging them in and resize them visually.

What is it built with?

JavaScriptNode.js

How does it compare?

tencent/cherry-markdownsimplewebrtc/simplewebrtchuddleeng/phantomcss
Stars4,6894,6894,692
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyhardmoderate
Complexity2/53/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Use the lite build to avoid pulling in the large Mermaid diagramming library if you do not need diagrams.

License terms are not specified in the repository documentation.

So what is it?

Cherry Markdown is a JavaScript-based Markdown editor made by Tencent that you can embed in a website or web application. Markdown is a lightweight way of writing formatted text using plain characters, for example putting asterisks around a word to make it bold. Cherry Markdown takes text written in that format and shows a rendered preview alongside it. The editor is designed to work in a browser without requiring React, Vue, Angular, or any other framework. Those can provide the container if needed, but Cherry itself is written in plain JavaScript so it fits into any project. It can also run on a server through Node.js if you only need the text-to-HTML conversion part without a visual interface. Beyond basic Markdown, the editor supports a range of extra features: inserting images with drag-to-resize controls, creating diagrams using the Mermaid diagram language, rendering math formulas, building charts directly from table data, multi-cursor editing, exporting the document as an image or PDF, floating and bubble toolbars that appear contextually, and theme switching. There is also a streaming rendering mode specifically designed for AI chat interfaces, where text arrives word by word and the editor renders it smoothly without flashing raw Markdown symbols. Installation is through npm or yarn with a few lines of setup code to attach the editor to a page element. A lite build is available that excludes the large Mermaid diagramming library for situations where smaller bundle size matters. The toolbar, syntax extensions, keyboard shortcuts, and image upload endpoints are all configurable. Built-in security filtering is included to protect against cross-site scripting in user-generated content.

Copy-paste prompts

Prompt 1
Show me the minimal npm install and setup code to add Cherry Markdown to a plain HTML page with a live preview panel.
Prompt 2
I am building an AI chat interface where responses stream token by token. Configure Cherry Markdown's streaming rendering mode so text appears smoothly without showing raw Markdown syntax mid-stream.
Prompt 3
My web app needs users to write documents with math formulas and Mermaid diagrams. Show me how to enable both features in Cherry Markdown.
Prompt 4
I need a lighter build without the Mermaid library. How do I import the lite version of Cherry Markdown and what features does it lose?
Prompt 5
Write a custom image upload handler for Cherry Markdown that sends the image to my own server endpoint and inserts the returned URL into the editor.

Frequently asked questions

What is cherry-markdown?

Cherry Markdown is a JavaScript Markdown editor by Tencent that you can embed in any website without a framework, showing a live preview with support for diagrams, math formulas, and AI streaming text rendering.

What language is cherry-markdown written in?

Mainly JavaScript. The stack also includes JavaScript, Node.js.

What license does cherry-markdown use?

License terms are not specified in the repository documentation.

How hard is cherry-markdown to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is cherry-markdown for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.