cherry-markdown

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.