# md-editor-v3

> Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...

Latest version **7.1.0** (published 2026-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install md-editor-v3
pnpm add md-editor-v3
yarn add md-editor-v3
bun add md-editor-v3
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 7.1.0 |
| Published | 2026-09-28 |
| First published | 2021-07-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 22 |
| Unpacked size | 590.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 2598 |
| Author | zbf |
| Maintainers | imzbf |
| Keywords | vue, vue3, javascript, typescript, jsx, tsx, markdown, editor, theme, html |

## Links

- npm: https://www.npmjs.com/package/md-editor-v3
- Repository: https://github.com/imzbf/md-editor-v3
- Homepage: https://imzbf.github.io/md-editor-v3/
- Issues: https://github.com/imzbf/md-editor-v3/issues
- npm.io page: https://npm.io/package/md-editor-v3

## Dependencies (22)

- [xss](https://npm.io/package/xss.md) ^1.0.15
- [json5](https://npm.io/package/json5.md) ^2.2.3
- [@vavt/util](https://npm.io/package/@vavt/util.md) ^2.1.2
- [codemirror](https://npm.io/package/codemirror.md) ^6.0.2
- [@lucide/vue](https://npm.io/package/@lucide/vue.md) ^1.16.0
- [markdown-it](https://npm.io/package/markdown-it.md) ^14.0.0
- [medium-zoom](https://npm.io/package/medium-zoom.md) ^1.1.0
- [markdown-it-sub](https://npm.io/package/markdown-it-sub.md) ^2.0.0
- [markdown-it-sup](https://npm.io/package/markdown-it-sup.md) ^2.0.0
- [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.38.2
- [@lezer/highlight](https://npm.io/package/@lezer/highlight.md) ^1.2.1
- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.5.2
- [@codemirror/search](https://npm.io/package/@codemirror/search.md) ^6.5.11
- [@types/markdown-it](https://npm.io/package/@types/markdown-it.md) ^14.0.1
- [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.8.1
- [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.11.3
- [@vavt/copy2clipboard](https://npm.io/package/@vavt/copy2clipboard.md) ^1.0.1
- [@vavt/markdown-theme](https://npm.io/package/@vavt/markdown-theme.md) ^6.0.0
- [@codemirror/autocomplete](https://npm.io/package/@codemirror/autocomplete.md) ^6.18.7
- [@codemirror/lang-markdown](https://npm.io/package/@codemirror/lang-markdown.md) ^6.3.4
- [@codemirror/language-data](https://npm.io/package/@codemirror/language-data.md) ^6.5.1
- [markdown-it-image-figures](https://npm.io/package/markdown-it-image-figures.md) ^2.1.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 7.1.0 (latest) — 2026-09-28
- 7.1.0-1 (beta) — 2026-09-24
- 6.0.0-0-1 (alpha) — 2025-08-22
- 2.11.3 (legacy) — 2023-04-28
- 7.1.0-0 — 2026-09-24
- 7.0.0 — 2026-09-16
- 7.0.0-0 — 2026-09-16
- 6.5.6 — 2026-08-05
- 6.5.5 — 2026-07-30
- 6.5.4 — 2026-07-17
- 6.5.3 — 2026-06-23
- 6.5.2 — 2026-06-22
- 6.5.1 — 2026-05-22
- 6.5.0 — 2026-04-28
- 6.4.2 — 2026-04-06
- … 341 more at https://npm.io/package/md-editor-v3/versions

## README

# 🎄 md-editor-v3

![](https://img.shields.io/github/package-json/v/imzbf/md-editor-v3) ![](https://img.shields.io/npm/dm/md-editor-v3) ![](https://img.shields.io/github/license/imzbf/md-editor-v3) ![](https://img.shields.io/badge/ssr-%3E1.6.0-brightgreen) ![](https://img.shields.io/badge/webcomponent-%3E4.19.0-brightgreen)

English \| [中文](https://github.com/imzbf/md-editor-v3/blob/develop/README-CN.md)

Markdown editor for vue3, developed in `jsx` and `typescript`.

- Documentation and example: [Go](https://imzbf.github.io/md-editor-v3)

- The same series editor for react: [md-editor-rt](https://github.com/imzbf/md-editor-rt)

## ⭐️ Features

- Toolbar, screenfull or screenfull in web pages and so on.
- Themes, Built-in default and dark themes.
- Shortcut key for editor.
- Beautify your content by `prettier`(only for markdown content, not the code and other text).
- Multi-language, build-in Chinese and English(default: Chinese).
- Upload picture, paste or clip the picture and upload it.
- Render article directly(no editor, no event listener, only preview of content).
- Theme of preview, `default`, `vuepress`, `github`, `cyanosis`, `mk-cute`, `smart-blue` styles(not identical). It can be customized also(Refer to example page).
- `mermaid`(>=1.8.0), `katex` mathematical formula(>=1.9.0).
- Customize the toolbar as you like.
- On-demand Import(>=4.0.0).

## 🗺 Preview

| Default theme | Dark theme | Preview only |
| --- | --- | --- |
| ![](https://imzbf.github.io/md-editor-v3/imgs/preview-light.png) | ![](https://imzbf.github.io/md-editor-v3/imgs/preview-dark.png) | ![](https://imzbf.github.io/md-editor-v3/imgs/preview-previewOnly.png) |

Inputing prompt and mark, emoji extensions

![](https://imzbf.github.io/md-editor-v3/imgs/mark_emoji.gif)

## 📦 Install

```shell
npm i md-editor-v3
```

Use existing extension of language and theme, such as Japanese

```shell
npm i @vavt/cm-extension
```

Use existing components of toolbar, such as exporting content as PDF

```shell
npm i @vavt/v3-extension
```

For more ways to use or contribute, please refer to: [md-editor-extension](https://github.com/imzbf/md-editor-extension)

## 💡 Usage

When using server-side rendering, make sure to set `id` to a constant value.

Starting from `4.0.0`, internal components can be imported on-demand.

### ✍🏻 Display Editor

```vue
<template>
  <MdEditor v-model="text" />
</template>

<script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const text = ref('# Hello Editor');
</script>
```

### 📖 Preview Only

```vue
<template>
  <MdPreview :id="id" :modelValue="text" />
  <MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template>

<script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';

const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>
```

When using server-side rendering, `scrollElement` should be of string type, eg: `html`, `body`, `#id`, `.class`.

---

For more usage, please visit the [document](https://imzbf.github.io/md-editor-v3).

## 🏁 Contribute

### 🤝 Commit Convention (Release Aligned)

The release workflow in `.github/workflows/latest.yml` reads commit messages to build `CHANGELOG.md`.

- Format: `<type>(<scope>)!: <summary>`
- Recommended types:
  - `feat`: goes to **Features**
  - `refactor`: goes to **Refactors**
  - `fix`: goes to **Fixed Bugs**
  - other types: goes to **Others**
- Subject should describe the user-visible change/problem being solved, not only the mechanical action (e.g. avoid only writing `bump xxx`).
- Prefer adding commit body (`git cz` long description) to explain motivation and impact, especially for dependency upgrades.
- Do not use pure version subjects like `6.3.2` or `v6.3.2-beta.1` (ignored by release parser).
- `docs(changelog): ...` is reserved for the bot-generated changelog commit.
- If you add `#123` in subject/body, release automation will notify and close that issue after publishing. Only reference issue numbers that are truly resolved.

Examples:

```bash
git commit -m "feat(editor): support drag-sort toolbar items"
git commit -m "fix(preview): sync anchor when heading id contains emoji #1234"
git commit -m "fix(deps): bump @vavt/markdown-theme to fix mermaid overflow"
git commit -m "refactor(build): simplify dts rollup pipeline"
```

---
_Source: https://npm.io/package/md-editor-v3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._