SuperDoc

English | 简体中文

About This Project

SuperDoc (@desirecore/super-doc) is an independently maintained fork of Tencent/cherry-markdown.

Why a separate fork?

This project originated from contributions we attempted to merge back into the upstream repository. However, our changes — particularly the addition of a full WYSIWYG editing mode based on Milkdown/ProseMirror, a streaming rendering engine, and numerous custom ProseMirror nodes — have diverged significantly from upstream in both scope and architecture. To avoid placing an unreasonable review and maintenance burden on the upstream maintainers, and to prevent introducing compatibility issues for existing cherry-markdown users, we chose to maintain and publish this as a separate package.

We want to be clear:

• The original cherry-markdown is an excellent Markdown editor created by the Cherry Oteam at Tencent. We have great respect for their work and all contributors.
• This project is licensed under Apache License 2.0, the same license as the original. The upstream LICENSE file (including all third-party component notices) is fully preserved and distributed with this package.
• We do not use the "Tencent" or "CherryMarkdown" names as brand endorsement. SuperDoc is an independent derivative work.
• We encourage anyone evaluating Markdown editors to also consider the original cherry-markdown, which remains actively maintained.

What's New in SuperDoc

For the full changelog, see the wiki.

WYSIWYG Editing Mode

A complete What-You-See-Is-What-You-Get editor built on Milkdown / ProseMirror, with one-click switching between Markdown source editing and rich-text editing. Includes custom nodes for images (drag-resize & alignment), editable TOC, footnotes, draw.io, audio/video, panels, ruby annotations, and collapsible details.

Stream Rendering Mode

A lightweight Engine + Previewer combination designed for AI chat scenarios. Ships as super-doc.stream.js — no editor UI or toolbar, optimized for character-by-character streaming with auto-closing of code blocks, inline formulas, and tables.

Additional Enhancements

• Rich text marks: font color, background color, font size, highlight, underline, sub/superscript
• 11 new toolbar buttons (footnote, draw.io, audio, file, graph, color, size, ruby, panel, detail, PDF export)
• 30+ bug fixes (KaTeX rendering, table editing, hyperlinks, paste handling, formula rendering, etc.)

Introduction

SuperDoc 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 NodeJs).

Document

• Getting Started
• Hello World
• Configuring Image & File Upload
• Adjusting the Toolbar
• Configuration Options
• Custom Syntax
• Configuring Themes
• Extending Code Block Syntax
• Events & Callbacks
• WYSIWYG Mode
• Stream Rendering

Out-of-the-box

Developer can call and instantiate SuperDoc in a very simple way. The instantiated editor supports most commonly used markdown syntax (such as title, TOC, flowchart, formula, etc.) by default.

Easy to extend

When the syntax that SuperDoc supports can not meet your needs, secondary development or function extension can be carried out quickly. SuperDoc is implemented in pure JavaScript, and does not rely on framework technology such as Angular, Vue or React. Framework only provides a container environment.

Incremental / Progressive / Streaming rendering

After enabling streaming rendering, SuperDoc will automatically complete the following syntax elements to avoid exposing Markdown source code, ensuring stable output during the streaming process:

• Headings
• Bold and italic text
• Hyperlinks
• Images and audio/video
• Inline code blocks
• Block code blocks
• Inline formulas
• Block formulas
• Unordered lists
• Tables
• Mermaid diagrams
• Footnotes

Feature

Syntax Feature

1. Image zoom, alignment and reference
2. Generate a chart based on table content
3. Adjust font color and size
4. Font background color, superscript and subscript
5. Insert checklist
6. Insert audio and video
7. Mermaid diagrams and math formulas
8. Info panels

Functional Feature

1. Paste from rich text as markdown
2. Classic & regular line break modes
3. Multi-cursor editing
4. Image size editing
5. Mermaid diagram size editing and alignment (drag to resize, support center/left/right/float alignment)
6. Table editing
7. Table -> Chart (generate chart from table content)
8. Export as image or PDF
9. Floating toolbar: appears at the beginning of a new line
10. Bubble toolbar: appears when text is selected
11. Set shortcut keys
12. Floating table of contents
13. Theme switching
14. Input suggestion (autocomplete)
15. AI Chat scenario: stream-mode output supported
16. WYSIWYG mode: one-click switch between Markdown and rich-text editing (SuperDoc)

Performance Feature

1. Partial rendering
2. Partial update

Security

SuperDoc has a built-in security Hook, by filtering the whitelist and DomPurify to do scan filter.

Style theme

SuperDoc has a variety of style themes to choose from.

Install

Via yarn

yarn add @desirecore/super-doc

Via npm

npm install @desirecore/super-doc --save

If you need to enable the functions of mermaid drawing and table-to-chart, you need to add mermaid and echarts packages at the same time.

Quick start

Browser

UMD

<link href="super-doc.min.css" />
<div id="markdown-container"></div>
<script src="super-doc.js"></script>
<script>
  new Cherry({
    id: 'markdown-container',
    value: '# welcome to SuperDoc!',
  });
</script>

ESM

import '@desirecore/super-doc/dist/super-doc.css';
import Cherry from '@desirecore/super-doc';
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to SuperDoc!',
});

Node

const { default: CherryEngine } = require('@desirecore/super-doc/dist/super-doc.engine.core.common');
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to SuperDoc!');

Lite Version

Because the size of the mermaid library is very large, the build product contains a core build package without built-in Mermaid. The core build can be imported in the following ways.

Full mode (With UI Interface)

import '@desirecore/super-doc/dist/super-doc.css';
import Cherry from '@desirecore/super-doc/dist/super-doc.core';
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to SuperDoc!',
});

Engine Mode (Just Syntax Compile)

import CherryEngine from '@desirecore/super-doc/dist/super-doc.engine.core';
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to SuperDoc!');

// --> <h1>welcome to SuperDoc!</h1>

⚠️ About mermaid

The core build package does not contain mermaid dependency, should import related plug-ins manually.

import '@desirecore/super-doc/dist/super-doc.css';
import Cherry from '@desirecore/super-doc/dist/super-doc.core';
import CherryMermaidPlugin from '@desirecore/super-doc/dist/addons/cherry-code-block-mermaid-plugin';
import mermaid from 'mermaid';

// Plug-in registration must be done before Cherry is instantiated
Cherry.usePlugin(CherryMermaidPlugin, {
  mermaid, // pass in mermaid object
});

const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to SuperDoc!',
});

Stream Build

SuperDoc provides a build package optimized for streaming output scenarios. This package does not include large dependencies like mermaid or CodeMirror, enabling on-demand lazy loading. It is ideal for AI Chat and similar scenarios.

import '@desirecore/super-doc/dist/super-doc.css';
import Cherry from '@desirecore/super-doc/dist/super-doc.stream';

const cherryInstance = new Cherry({
  id: 'markdown-container',
});

cherryInstance.setMarkdown('# welcome to SuperDoc!');

Differences Between Stream Build and Core Build

| Build | File | Mermaid | CodeMirror | Use Case | | ------ | --------------------- | ------- | ---------- | ----------------- | | Full | super-doc.js | ✅ | ✅ | General purpose | | Core | super-doc.core.js | ❌ | ✅ | Without Mermaid | | Stream | super-doc.stream.js | ❌ | ❌ | AI Chat streaming |

Note: MathJax/KaTeX are external dependencies loaded dynamically via CDN and are not included in any build package.

Dynamic import

Recommended: Using Dynamic import, the following is an example of webpack Dynamic import.

import '@desirecore/super-doc/dist/super-doc.css';
import Cherry from '@desirecore/super-doc/dist/super-doc.core';

const registerPlugin = async () => {
  const [{ default: CherryMermaidPlugin }, mermaid] = await Promise.all([
    import('@desirecore/super-doc/src/addons/cherry-code-block-mermaid-plugin'),
    import('mermaid'),
  ]);
  Cherry.usePlugin(CherryMermaidPlugin, {
    mermaid,
  });
};

registerPlugin().then(() => {
  const cherryInstance = new Cherry({
    id: 'markdown-container',
    value: '# welcome to SuperDoc!',
  });
});

Configuration

See /src/Cherry.config.js or check the Configuration Options wiki page.

Example

Click here for more examples.

Client

Under development, please see /packages/client/.

Extension

Customize Syntax

See the custom syntax documentation: Custom syntax docs

Customize Toolbar

SuperDoc supports five toolbar positions, each position can be extended with custom toolbar buttons. See the toolbar configuration documentation for details: Customize toolbar buttons.

Unit Test

Vitest has been added as a basic configuration with test cases. Welcome to submit more test cases.

Acknowledgments

This project is a derivative work of cherry-markdown, originally developed by the Cherry Oteam at Tencent and licensed under the Apache License 2.0. We are grateful to the original authors and all contributors for creating such a solid foundation.

License

Apache-2.0

This product includes software developed by Tencent/cherry-markdown. Third-party component notices are provided in the LICENSE file.