explaingit

vanessa219/vditor

10,963TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

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.

Mindmap

mindmap
  root((Vditor))
    Editing modes
      WYSIWYG
      Instant rendering
      Split view
    Features
      Math formulas
      Flowcharts
      File uploads
      Auto-save
    Tech stack
      TypeScript
      Vue React Angular
      npm or CDN
    Audience
      Web developers
      App builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Embed a rich Markdown editor in a web app that lets users write formatted content with a word-processor feel.

USE CASE 2

Add a technical writing tool to your site that renders math formulas, flowcharts, and Gantt charts inline.

USE CASE 3

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.

Tech stack

TypeScriptJavaScriptVueReactAngularSveltenpm

Getting it running

Difficulty · easy Time to first run · 30min

Install via npm or load via CDN in an HTML page, works with Vue, React, Angular, Svelte, or plain JavaScript.

License not specified in the explanation.

In plain English

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.

Copy-paste prompts

Prompt 1
Help me embed Vditor into my React app so users can write Markdown with WYSIWYG mode enabled by default.
Prompt 2
Show me how to configure Vditor to enable math formula rendering and disable the Gantt chart extension to keep the bundle smaller.
Prompt 3
I want to add drag-and-drop image upload to my Vditor instance that POSTs to my own server, show me the upload configuration.
Prompt 4
How do I read the current Markdown content out of a Vditor instance and save it to my database on a button click?
Open on GitHub → Explain another repo

← vanessa219 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.