Vditor — In-Browser Markdown Editor with Three Editing Modes

Introduction

Vditor is a TypeScript markdown editor that runs entirely in the browser. It stands out by offering three editing modes in one component: classic split-view, WYSIWYG rich text, and instant rendering that shows formatted output inline as you type, similar to Typora.

What Vditor Does

• Provides three editing modes switchable at runtime: WYSIWYG, instant rendering, and split-view
• Renders CommonMark, GFM, and extensions like math (KaTeX), Mermaid diagrams, and flowcharts
• Supports file upload (images, audio, video) with drag-and-drop and paste
• Offers full toolbar customization with built-in and custom actions
• Exports content as markdown, HTML, or PDF

Architecture Overview

Vditor uses the Lute engine (written in Go, compiled to WebAssembly) for markdown parsing and rendering. The editor manages three separate editing surfaces that share the same underlying document state. In WYSIWYG mode it uses contenteditable with custom input handling. In instant-rendering mode it performs incremental parsing and inline formatting. The split-view mode pairs a plain textarea with a live HTML preview pane.

Self-Hosting & Configuration

• Include via CDN or install with npm: npm install vditor
• Initialize with new Vditor(elementId, options) passing configuration for mode, toolbar, and theme
• Configure upload endpoints for image and file attachment handling
• Set language locale (20+ languages supported) via the lang option
• Customize the toolbar array to add, remove, or reorder editor actions

Key Features

• Lute-powered markdown parser compiled to WASM for fast in-browser parsing
• Math formula rendering via KaTeX and diagram support via Mermaid and Graphviz
• Built-in code syntax highlighting with language auto-detection
• Outline, word count, and table of contents generation
• Content security via XSS sanitization of rendered HTML

Comparison with Similar Tools

• Milkdown — ProseMirror-based and headless; Vditor is a batteries-included drop-in component
• Tiptap — rich-text focused with extensions; Vditor is markdown-native with three rendering modes
• Editor.js — block-based editor; Vditor uses traditional document-based markdown editing
• Typora — desktop app with instant rendering; Vditor brings the same experience to the browser

FAQ

Q: Can I use Vditor with React or Vue? A: Yes. Community wrappers exist for React and Vue, or you can initialize it in a useEffect/onMounted hook.

Q: Does it support collaborative editing? A: Vditor does not have built-in collaboration. You would need to layer a CRDT library on top.

Q: How large is the bundle? A: The full bundle including WASM parser is approximately 3MB. CSS and JS can be loaded from a CDN.

Q: Can I extend the toolbar? A: Yes. Pass custom toolbar items with icons and click handlers in the configuration options.

Sources

• https://github.com/Vanessa219/vditor
• https://b3log.org/vditor/