# md-editor-v3: a Vue 3 markdown editor built in JSX and TypeScript

> md-editor-v3 packages a CodeMirror 6 editing surface, a markdown-it preview and a Prettier formatter into Vue 3 components. It suits Vue 3 teams that want an editor and a separate read-only renderer without adopting a full CMS.

**imzbf/md-editor-v3** — Markdown editor for Vue3, developed in JSX and TypeScript, with a dark theme, content beautified by Prettier, direct article rendering, and paste or clip an image to upload.

- Repository: https://github.com/imzbf/md-editor-v3
- Website: https://imzbf.github.io/md-editor-v3
- Stars: 2,605 · Forks: 227
- Language: TypeScript
- License: MIT
- Published: 2026-09-28 · Updated: 2026-09-28 · Language: en
- Canonical page: https://hysenlabs.com/projects/imzbf-md-editor-v3

## The gap md-editor-v3 fills for Vue 3 applications

Most markdown editors are either framework-agnostic web components or React-first. A Vue 3 application that wants an editing surface, a live preview, a toolbar, image upload and syntax highlighting usually ends up wiring CodeMirror or a textarea to markdown-it by hand, then rebuilding the same integration for the read-only article page. md-editor-v3 is that integration shipped as components. The package description calls it a "Markdown editor for vue3, developed in jsx and typescript", and the repository layout matches: a packages/ directory, an example/ directory with electron, nuxt and webComponent subfolders, and TypeScript configuration files at the root. The audience is narrow on purpose. If your app is Vue 3 and you need markdown authoring inside it, the library removes a week of glue code. If your app is not Vue 3, nothing here applies, and the README points React users at the sibling project md-editor-rt. The build targets are worth noting before you start: the package ships lib/es and lib/cjs entry points plus type declarations, and the package.json sideEffects field lists only CSS files, which is what makes tree shaking viable for consumers.

## How the editor, the preview and the catalog fit together

The library exposes three components rather than one. MdEditor is the editing surface with toolbar and preview pane. MdPreview renders content with no editor and, per the README, "no editor, no event listener, only preview of content", which is the component you want on an article page where users never type. MdCatalog builds a table of contents that scrolls in sync with the preview. The three are separate imports, so a read-only page does not pull the editing dependencies into its bundle. Under the hood the dependencies listed in package.json show the split: the @codemirror/* packages plus codemirror drive the editing surface, markdown-it and markdown-it-image-figures handle rendering, @vavt/markdown-theme supplies the preview themes, json5 appears for configuration parsing, and @lucide/vue provides icons. Prettier is used for formatting, and the README is explicit that this applies to markdown content only, not to embedded code or other text. That distinction matters: a fenced code block inside your document is not reformatted, so code indentation survives a beautify pass. The preview themes named in the README are default, vuepress, github, cyanosis, mk-cute and smart-blue, and the README notes they are "not identical" and can be customized by referring to the example page. Mermaid diagrams arrived in 1.8.0 and KaTeX formulas in 1.9.0, so documents mixing prose, diagrams and math are within scope.

## Installing md-editor-v3 and rendering your first editor

The README gives a single install command and it is the whole setup for the common case. Run it in your Vue 3 project:

```bash
npm i md-editor-v3
```

Then import the component and, importantly, the stylesheet. The README example shows the CSS import as a separate line, and package.json marks CSS files as the only side effects, so skipping the style import gives you an unstyled editor rather than an error. A minimal single-file component looks like this:

```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>
```

After mounting, you should see a toolbar above an editing area containing the heading text, with a preview alongside it. For a read-only page the README swaps both the component and the stylesheet: import MdPreview and MdCatalog from md-editor-v3, load md-editor-v3/lib/preview.css instead of style.css, and pass an id constant to MdPreview along with an editorId and scrollElement to MdCatalog. The README states that under server-side rendering the id must be a constant value, and that scrollElement should be a string such as html, body, #id or .class rather than a DOM node. Two optional packages extend the base install: @vavt/cm-extension for additional language and theme extensions such as Japanese, and @vavt/v3-extension for toolbar components such as exporting content as PDF. Both are separate installs, so the core package stays free of them.

## Where md-editor-v3 stops being the right choice

The editor is a markdown source editor, not a rich text surface. Users type markdown syntax and see it highlighted, with a rendered preview beside or below. If your authors expect a WYSIWYG experience where a bold button changes text in place without showing asterisks, this is the wrong tool and no configuration will change that. The README does not document a WYSIWYG mode. The formatting behaviour is also narrower than the feature list suggests. Prettier beautifies markdown content only, per the README, so if you were hoping for automatic formatting of embedded code samples, that is out of scope. The SSR constraint is a real integration cost rather than a footnote: a constant id and a string-typed scrollElement mean your server-rendered markup and your client hydration must agree on those values, and getting them out of sync is the kind of bug that shows up as a catalog that does not scroll. The README documents the requirement but does not document what happens when you violate it, so treat that as an untested boundary. Finally, the package is Vue 3 only. The README's badge line references SSR support from 1.6.0 and web component support from 4.19.0, and the example/ directory contains electron, nuxt and webComponent folders, but none of that changes the framework requirement.

## md-editor-v3 against V-md-editor and md-editor-rt

Two comparisons are worth making because they come up in what people search for around this project. The first is V-md-editor, a separate Vue markdown editor project that appears in the same search results. The difference in approach is architectural: md-editor-v3 is built on CodeMirror 6 for the editing surface and markdown-it for rendering, and its package.json shows that dependency set explicitly. V-md-editor is a different codebase with its own editor core and its own plugin model, so migrating between them is not a configuration change. If you are choosing today, the relevant question is which one you can read and patch when the toolbar does not do what you need, because both expose customization and neither is a drop-in for the other. The second comparison is md-editor-rt, the React sibling from the same author. It is not a competitor but a port: the README links to it directly and describes it as "The same series editor for react". Choosing between them is choosing your framework, not your editor. What md-editor-v3 offers that a generic markdown-it setup does not is the packaging: on-demand imports from 4.0.0, a separate preview component, a catalog component, and theme packages maintained outside the core. You are trading control over the internals for a maintained integration.

## Version, licence and the cost of staying current

The repository is MIT licensed, which permits commercial use, modification and redistribution provided the copyright notice and licence text are preserved. That is the standard permissive arrangement, and it is the same licence the package.json declares. Nothing here requires legal review beyond what your organisation normally applies to MIT dependencies, though the bundled transitive dependencies under @codemirror, @vavt and markdown-it carry their own licences that you should confirm if you redistribute a built artifact. On maintenance, the last push to the develop branch was on 2026-09-24, and the most recent release is v7.0.0 from 2026-09-16, following v6.5.6 on 2026-08-05 and v6.5.5 on 2026-07-30. The release cadence visible in that window is frequent, and the major version bump from 6 to 7 is the thing to plan around. The README documents a commit convention that the release workflow in .github/workflows/latest.yml reads to build CHANGELOG.md, with feat, refactor and fix mapping to Features, Refactors and Fixed Bugs sections. That means the changelog is generated from commit messages, so the quality of the changelog depends on contributors writing descriptive subjects rather than bare version bumps, which the README explicitly discourages. For an adopter, the practical upgrade cost is reading CHANGELOG.md before crossing a major version, plus re-checking your CSS imports and any toolbar customization against the new release.

## Conclusion

Adopt md-editor-v3 when your application is already Vue 3 and you want an editor plus a read-only renderer as two separate components, with the option to import them on demand. Skip it if you are not on Vue 3, or if you need a WYSIWYG surface rather than a markdown source editor. Before committing, check the CSS entry points you must import, confirm the SSR id requirement applies to your rendering mode, and read the v7.0.0 release notes for breaking changes since v6.

## FAQ

### How do I install md-editor-v3?

Install it with npm i md-editor-v3, then import MdEditor and the stylesheet md-editor-v3/lib/style.css in your Vue 3 component. Optional extension packages such as @vavt/cm-extension and @vavt/v3-extension are installed separately.

### Can md-editor-v3 render markdown without showing an editor?

Yes. The README documents a preview-only mode using the MdPreview component together with MdCatalog, importing md-editor-v3/lib/preview.css instead of the editor stylesheet. The README describes it as rendering the article directly, with no editor and no event listener.

### Does md-editor-v3 work with server-side rendering?

The README states that when using server-side rendering you must set the id to a constant value, and that scrollElement should be a string such as html, body, #id or .class rather than a DOM node. The package badge indicates SSR support from version 1.6.0.

### What is the difference between md-editor-v3 and md-editor-rt?

They are the same series of editor for different frameworks. md-editor-v3 targets Vue 3, and the README links to md-editor-rt as the equivalent editor for React. Choosing between them follows from your framework, not from a feature difference described in the README.

## Sources

- [imzbf/md-editor-v3 on GitHub](https://github.com/imzbf/md-editor-v3)
- [License: MIT](https://github.com/imzbf/md-editor-v3/blob/develop/LICENSE)
- [Project website](https://imzbf.github.io/md-editor-v3)
- [README](https://github.com/imzbf/md-editor-v3/blob/develop/README.md)
- [Releases](https://github.com/imzbf/md-editor-v3/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/imzbf-md-editor-v3