Modern MD Editor copies Markdown into a chat platform without losing the styling

The problem is the paste, not the editor

Modern MD Editor is a modern Markdown editor aimed at creators and content teams, and the description in the repository makes the intent plain: it is a Markdown editor with a social platform publisher attached. The reason it exists is described in a single line about what happens when you write an article for a WeChat style account and paste Markdown into it. The styles are lost, the result is inconsistent, and fixing it by hand is tedious. So the editor itself is a competent Markdown editor, and the feature that distinguishes the project is a one click copy that converts the document into high fidelity rich text for those platforms, with inline styles applied, typography adjusted for font, line height and letter spacing, and themed adaptations for headings, lists, quotes, code and tables. That is the whole pitch: the editing is standard, and the last mile to publishing is the part the project automates. The site is hosted at mmdeditor.boxtech.icu, and the repository topics list editor, markdown, vercel, vite, vue3 and wechat.

Two editing modes over one document

The editing surface has two modes, and the README describes how you move between them. The default is a source editor with a preview, and a new editable mode turns the pane into a rich text editor you can type into directly. That richer mode is built on Milkdown, using the commonmark and gfm presets, with Prism for highlighting, and it is synchronised with the Markdown text in both directions, so a change made by typing in the rich text appears in the source and the other way round. A custom Mermaid node view gives diagrams a representation inside the editor rather than only in the preview, and there is specific handling for backticks inside tables in the few cases where the rendering and the copied output would otherwise disagree. The source editor itself is CodeMirror 6, wrapped in composables under the editor source directory that manage the editor lifecycle, its operations and its state. The preview offers a one click viewport switch between desktop, tablet and phone, and the README lists synchronised scrolling and theme preloading to avoid a flash of unstyled content as parts of the intended feel.

MathJax renders formulas to SVG so platforms keep them intact

Formula support is the part with the most interesting constraint, because the target platforms do not run MathJax. The editor supports inline formulas delimited by single dollar signs and block formulas delimited by double dollar signs, which can span lines, and they are rendered with MathJax 3 to SVG. SVG rather than an image file or a font is the deliberate choice here, because the copied output then contains vector text that a platform will paste without rasterising it, and the README states that the formula styling is handled automatically when copying to the platform so no manual adjustment is needed. A block formula is written with the double dollar delimiters, and an inline one with a single pair, which is the convention most Markdown users already know from maths-heavy documents. The same pipeline is reused for the export path, so the PDF and PNG output contains the same rendered formulas as the preview.

The theme system is CSS variables with a preload step

Styling is treated as a first class subsystem, and the file layout shows how it is organised. A theme manager concentrates the settings and writes them out as CSS variables, while a theme loader pre-injects them on first paint so the page does not flash the wrong colours, and the presets live in a configuration file with the style baselines in a themes directory. Three levels of control are offered. There are colour themes, including custom theme colours with live preview and persistence. There are code styles, applying background, font and highlighting variables together. And there is a typography theme system covering layout, spacing, corner radius and shadow. On top of that, font family, font size, line height and letter spacing are adjustable in the settings panel, which is the control that matters most for a platform with its own typography defaults. The Markdown baseline comes from a well known stylesheet, and the project layers its own variables over it, which keeps the general appearance familiar while letting the theme system drive the details.

Copying and exporting share one HTML pipeline

The architectural decision that makes the tool coherent is that the preview, the copied output and the exported files all come from the same rendering path. The parser is a single file that processes code blocks, lists, tables, quotes, headings and paragraphs in order, and the preview pane calls it to produce both the preview version and the social version of the HTML. Inline syntax, meaning bold, italic, links, images and escapes, is handled separately, and code block rendering with highlighting lives in its own module that includes the Mermaid special case and the styles used when copying. The social adapters module is where the platform specific work happens, injecting inline styles and providing a registry of theme adapters you can extend, and the copy formats module generates either the social version or plain Markdown, while the clipboard module prefers the modern Clipboard API and falls back to the older command when it fails, simulating a platform container to handle font, line height and letter spacing details. Export reuses that same pipeline, with html2canvas and jsPDF producing a paginated A4 PDF or a high resolution long PNG, entirely in the browser with no backend.

Electron for the desktop and a container for the server

The project ships in two shapes beyond the web version. The Electron application runs the same Vue interface in a desktop shell, with a full application menu covering files, edit, view and help, keyboard shortcuts for opening and saving, resizable and full screen windows, and support for opening and saving local files in the common text formats. The packaging is done with Electron Forge, and the manifest defines separate targets for macOS with a disk image and a zip, for Windows with the squirrel installer and a zip, and for Linux with a deb and an rpm, plus a development command that starts the Vite server and the desktop app together. The container image is a two stage build that compiles the Vite app with Node on Alpine and then serves the static output with nginx, and there is a public image on Docker Hub plus a compose file for local use.

docker run -d --name mdeditor -p 8080:80 helongisno1/mdeditor:latest

version: "3.9"
services:
  mdeditor:
    image: helongisno1/mdeditor:latest
    ports:
      - "8080:80"
    restart: unless-stopped

The compose file in the repository builds the image from the local Dockerfile rather than pulling it, and the runtime image serves the built assets from the standard nginx web root with no custom configuration.

A young project with a Chinese first documentation

The project state is worth reading before you commit to it. The manifest names the package as a social Markdown editor at version 1.0.0, the release list stops at v1.1.4 from 2026-01-16 with v1.1.3 in October 2025 and v1.1.2 in August 2025, and the last push was on 2026-04-24, so the branch is moving more slowly than the tags suggest. The documentation is written in Simplified Chinese with an English version alongside, and the code comments and the Electron artefact names follow the same pattern, which matters if you intend to contribute or to run the desktop build on a system with non Latin file names. The tests use Vitest with the Vue test utilities and jsdom, with scripts for a normal run, a user interface run and coverage, and the source is layered into components, composables, core, configuration, shared helpers and styles. One small inconsistency to note if you follow the install instructions literally, since the clone command names the repository while the directory change below it uses a different name, so check the directory you actually land in before running the next command.

git clone https://github.com/xiaobox/mdeditor.git
cd modern-md-editor
npm install
npm run dev

Node 18 or newer is required, with the 18 and 20 long term support releases recommended, and the package managers npm, pnpm and yarn are all supported.

Editorial conclusion

Modern MD Editor suits a writer who publishes to WeChat style platforms where pasted Markdown loses its formatting, because the copy pipeline rebuilds the document with inline styles, adjusted typography and themed elements rather than handing over bare tags, and because the clipboard code falls back from the modern API when a browser refuses it. It is a poor choice if you want a general purpose Markdown editor, since most of the design effort is aimed at one publishing target, and a poor choice if you need the same result on two different platforms at once, since the adapters are a registry you would have to extend. Verify three things before you rely on it: how the output looks in the target platform rather than in the preview, because the whole value is in that difference, whether the MathJax SVG output survives the platform's image handling, and whether the Electron build is signed and packaged for the platforms you need, since the forge configuration targets macOS, Windows and Linux separately. The licence is MIT and the last push was on 2026-04-24.

Frequently asked questions

Official sources

1. License: MIT
2. Project website
3. README
4. Releases
5. xiaobox/mdeditor on GitHub