vditor
♏ 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
Embeddable Markdown editor for web apps that supports three editing modes, WYSIWYG, instant rendering, and split view, plus math, diagrams, and file uploads out of the box.
Vditor is a Markdown editor that runs in a web browser, designed to be embedded in other web applications. Markdown is a way of writing formatted text using plain characters, for example using asterisks for bold or pound signs for headings. Vditor lets users write Markdown in one of three ways, and you can choose which mode suits your application best.
The three editing modes are: WYSIWYG (what you see is what you get), where the text looks formatted as you type it, similar to a word processor; instant rendering, where you write in Markdown syntax but the preview updates immediately in the same area, similar to the Typora desktop app; and split view, where the raw Markdown is on one side and the rendered output is on the other.
Beyond basic text, the editor supports math formulas, flowcharts, sequence diagrams, Gantt charts, mind maps, and musical notation, each handled by a third-party rendering library that can be toggled on or off. The toolbar offers more than 36 actions. The editor also handles file uploads via drag-and-drop or clipboard paste, auto-saves content to avoid losing work, and can convert pasted HTML into Markdown.
Vditor is built in TypeScript and works with plain JavaScript or with popular frameworks including Vue, React, Angular, and Svelte. You can install it via npm or load it directly in an HTML page. Three built-in editor themes and four content themes are included, along with code block syntax highlighting in 36 styles.
The interface supports Chinese, English, and Korean. The README is written primarily in Chinese, with an English version linked at the top.
Where it fits
- Embed a rich Markdown editor in a web app that lets users write formatted content with a word-processor feel.
- Add a technical writing tool to your site that renders math formulas, flowcharts, and Gantt charts inline.
- Replace a plain textarea with a Vditor editor in a React or Vue app to get drag-and-drop file uploads and auto-save for free.