Guide · Open source
How to use Vditor: install, set up modes and themes
Updated · written with AI from the project's own documentation and checked against our catalogue data
Vditor is an open-source Markdown editor that runs inside a web page. This guide shows developers how to install it, create an editor instance and choose between its three editing modes. By the end you will know where the main settings live and which parts of the project to check before you build on it.
VditorVanessa219/vditor · ★ 11.4k · MIT Install options & downloads Quick start
- 1Check Node.js. Confirm Node.js is installed. The README does not state a required version, so review the project docs for guidance.
- 2Install the package. Run npm install vditor --save in your project folder.
- 3Import Vditor. Import Vditor and its stylesheet into your code, or load the built files from a script tag.
- 4Create an instance. Call new Vditor with an element id and an options object.
- 5Pick a mode. Set options.mode to sv, ir or wysiwyg depending on your users.
- 6Set theme and language. Set options.theme and options.lang, then adjust content and code themes if needed.
- 7Customise the toolbar. Set options.toolbar to the list of item names you want to show.
What Vditor is and when to use it
Vditor is a browser-side Markdown editor. The README describes three editing styles: WYSIWYG (rich text, where you see formatted output while editing), instant rendering (IR), which is similar to Typora, and split view (SV), with source on one side and preview on the other.
It is a component for developers. You embed it in your own site or app so your users can write Markdown. It is written in TypeScript and supports plain JavaScript as well as Vue, React, Angular and Svelte.
- Good fit: blogs, forums or content tools that need in-browser editing
- Good fit: users who want to choose between rich text and raw Markdown
- Not a fit: a desktop note-taking app, since Vditor is a library rather than a finished application
Install Vditor with npm
The README's install method is the npm package manager. Node.js is listed as a prerequisite, but the README does not state which version you need, so check the project's documentation before you pin one.
Run the install command in your project folder.
npm install vditor --saveCreate an editor instance
Import Vditor in your code and create a new instance, passing the element id (or the element itself) and an options object. The README links to its index.js demo as a reference for a full setup.
If you pass an HTMLElement instead of an id, the README says you must set options.cache.id or set options.cache.enable to false.
- Pass an element id string, or the HTMLElement itself
- When passing an element, set options.cache.id or options.cache.enable to false
import Vditor from 'vditor'
import "~vditor/src/assets/less/index"
const vditor = new Vditor(id, {options...})Load Vditor without a build step
If you do not use a bundler, you can add the stylesheet and script to an HTML page. The README warns that production sites should pin a version number in the URL rather than use the unversioned link.
The README's example loads files from unpkg. Replace the version placeholder with the version you have tested.
- Use a pinned version in production URLs, as the README advises
- The options.cdn setting lets you point Vditor at your own CDN
<link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
<script src="https://unpkg.com/vditor/dist/index.min.js"></script>Choose an editing mode, theme and language
The mode option accepts sv, ir or wysiwyg, and the default is ir. Set it when you create the instance, and you can switch the theme later with setTheme. Content themes and code themes are separate settings.
The default language is zh_CN. The README lists other options, including en_US, ja_JP, ko_KR and de_DE.
- mode: sv (split view), ir (instant rendering) or wysiwyg; default ir
- theme: classic or dark; default classic
- lang: for example en_US; default zh_CN
- preview.theme: content theme (ant-design, light, dark, wechat); set class vditor-reset on the displayed element
- preview.hljs: code block style and line numbers
Customise the toolbar and listen for events
The toolbar accepts a list of short names. The README gives examples such as emoji, bold, italic, link, table and upload. Use the '|' entry to add a separator and 'line' for a horizontal rule.
The options object also includes callbacks such as input, focus, blur, and ctrlEnter, which fire on the matching editor events. The README notes that typewriterMode is available and off by default.
- Toolbar shorthand example: toolbar: ['emoji', 'br', 'bold', '|', 'line']
- Callbacks include input, focus, blur, keydown, esc and select
- Real-time saving and character counting are listed as features
toolbar: ['emoji', 'br', 'bold', '|', 'line']What people use it for
- A blog platform that lets authors write in rich text or raw Markdown
- A forum or community site with a Markdown composer that supports math, diagrams and code highlighting
- A content tool that uploads pasted or dragged images through a custom upload endpoint
- A web app built with Vue, React, Angular or Svelte that needs an embedded editor
Frequently asked questions
Is Vditor free to use?
Vditor is released under the MIT licence, as shown in the README badge. Check the licence file in the repository for the full terms before you use it in a product.
How do I install Vditor?
Run npm install vditor --save in your project. You can also load the built CSS and JavaScript from a script tag, as shown in the README.
What do I need to run Vditor?
The README lists Node.js as a prerequisite but does not state a version. It also says Vditor supports mainstream browsers and is mobile-friendly, but it does not describe a native mobile app.
Does Vditor store my documents on a server?
No. The README says Vditor is an editor only and does not include a built-in server or storage. It can save content in the browser and offers an upload interface, but you handle any server side yourself.
What is the difference between WYSIWYG, IR and split view?
WYSIWYG shows formatted output while you edit, IR renders Markdown as you type in a style similar to Typora, and split view shows source and preview side by side. Set the mode option to choose one.
How does Vditor compare with Toast UI Editor, Milkdown or CodeMirror?
The README lists these as comparable projects but does not compare them. Test the modes, licence and integration with your framework before you decide.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Vditor suits developers who want to embed a Markdown editor with a choice of rich text, instant rendering or split view in a web app. It is not a finished application and does not provide storage or a native mobile editor, so people who want a ready-made note app should look elsewhere.
Install options & downloads