Vditor
A browser-based Markdown editor with rich-text, live-render and split-view modes.
- Stars
- 11.4k
- Forks
- 1.1k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 19 days ago
- Type
- Library
What it is
Vditor is an editor for Markdown text that runs inside a web page. It offers three editing styles: WYSIWYG (rich text, so you see formatted output while editing), instant rendering similar to Typora, and a split view with source on one side and preview on the other. Developers add it to their own websites or apps to let users write Markdown.
- Add a Markdown editor with live preview to a community or forum site
- Let users write posts with formulas, flowcharts or diagrams rendered in the editor
- Offer a rich-text editing mode for users unfamiliar with Markdown
- Provide image upload via drag-and-drop or paste with progress display
Great for
- Developers who want to embed a Markdown editor in a web app
- Teams building a blog, forum or content tool that needs in-browser editing
- Users who want a choice between rich-text and raw Markdown editing
- Projects using Vue, React, Angular or Svelte, or plain JavaScript
Not ideal for
- People who just want a desktop note-taking app; Vditor is a component for developers, not a finished application
- Projects that need a native mobile editor, since the README only says it is mobile-friendly in browsers
- Anyone needing a built-in server or storage; the README covers the editor only
How to get it
- 1
Install with a package manager
You'll need: Node.js (version not stated in the README)
Install the package via npm
npm install vditor --save - 2
Run it
- Install the package with npm install vditor --save
- Import Vditor and the stylesheet in your code, as shown in the README's CommonJS section
- Create an editor instance with new Vditor(id, options) where id is the element id
- Choose a mode such as 'sv', 'ir' or 'wysiwyg' through the mode option
- 3
Get the most out of it
- Set the mode option to choose between wysiwyg, ir and sv editing styles
- Use the theme options: editor themes classic and dark, content themes, and 36 code themes
- Customize the toolbar by listing item names in the toolbar option
- Enable or disable features such as math, diagrams and Chinese typography tweaks through options
Downloads
Strengths
- Supports three editing modes (WYSIWYG, instant render, split view) in one editor
- Implements CommonMark and GFM specifications with many extras such as math, diagrams and footnotes
- Open source under the MIT license with a long history and an active repository
Trade-offs
- Primarily aimed at developers integrating it, so setup requires coding
- The latest release (v4.0.1) ships without binaries, so it is used as a library
- Many features depend on configuration and optional renderers, which adds complexity
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| vditor (this) | 11.4k | Library | intermediate | 19 days ago | Developers who want to embed a Markdown editor in a web app |
| milkdown | 12k | Library | advanced | 4 days ago | Developers adding a rich markdown editing box to a web app |
| tui.editor | 18k | Library | intermediate | 2.3 years ago | Web developers who want an embeddable Markdown editor in their own site or app |
| tiptap | 38.9k | Library | intermediate | 4 days ago | Developers building a custom text editor into a web product |
| react-markdown | 15.9k | Library | beginner | 1 months ago | React developers who need to display Markdown content such as comments, docs, or posts |
| editor.md | 14.3k | Library | beginner | 2.5 years ago | Web developers who want a Markdown input box inside their own site or admin panel |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.