# Arya Markdown Editor: A Self-Hostable Vue2/Vditor Editor with Charts, PPT Preview, and Word Export

> Arya (nicejade/markdown-online-editor) is an open-source online Markdown editor built on Vue2 and the Vditor library, hosted live at markdown.lovejade.cn and self-hostable via Docker or Cloudflare Pages. It goes beyond standard Markdown rendering to include flowcharts, Gantt charts, Echarts, PPT slide preview, staff notation, and export to PDF, PNG, JPEG, and Word.

**nicejade/markdown-online-editor** — 📝 基于 Vue2、Vditor，所构建的在线 Markdown 编辑器，支持绘制流程图、甘特图、时序图、任务列表、echarts 图表、五线谱，以及 PPT 预览、视频音频解析、HTML 自动转换为 Markdown 等功能。https://www.niceshare.site

- Repository: https://github.com/nicejade/markdown-online-editor
- Website: https://markdown.lovejade.cn
- Stars: 3,982 · Forks: 603
- Language: CSS
- License: MIT
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/nicejade-markdown-online-editor

## What Arya Adds Beyond a Basic Markdown Editor

Most web-based Markdown editors cover headings, lists, inline code, and blockquotes. Arya, built on the Vditor library from the Hacpai team, covers a wider surface: flowcharts, Gantt charts, sequence diagrams, task lists, and Echarts charts are all renderable inside the editor pane. Staff notation for music is also listed as a supported feature.

PPT preview is available through RevealJS, accessible from the settings panel. Horizontal slides are defined with --- and vertical slides with --. The README notes that chart rendering inside PPT mode is not yet supported.

The editor stores content to browser local storage automatically, preventing data loss from accidental navigation or tab closure. Content can be exported as PDF, PNG, or JPEG with rendered styles applied, or as a Word document (.docx) via the html-to-docx library included in the dependencies.

Pasting HTML into the editor converts it to Markdown automatically. Local .md files can be imported directly. A copy-to-WeChat-account function formats and copies the rendered output for pasting into the WeChat Official Accounts editor.

The editing interface supports three modes switchable by keyboard shortcut: WYSIWYG (⌘-⇧-M or Ctrl-⇧-M), instant rendering (⌘-⌥-8 or Ctrl-alt-8), and split-screen rendering (⌘-⌥-9 or Ctrl-alt-9). WYSIWYG is the default.

## How the Project Is Built: Vue2, Vditor, and html-to-docx

The project sits at version 3.3.0 in package.json. The primary editing engine is Vditor, an open-source browser-based Markdown editor library. Arya wraps Vditor with a Vue2 application layer, adds the RevealJS presentation engine, and integrates html-to-docx for Word export.

The build toolchain uses vue-cli-service with a yarn-managed dependency tree. Node.js version 16 to below 18 is specified in the README as a prerequisite. A prestart/prebuild script copies the html-to-docx browser bundle into the public/vendor/ directory before webpack processes the application.

The Dockerfile in the repository is a two-stage deployment image: the dist/ output directory is copied into an nginx:alpine image with a custom nginx.conf. This means the Docker image does not include Node.js or yarn at runtime. The container listens on port 80.

For development, the standard vue-cli-service serve command is used. The README requests using pnpm or yarn, not npm, as the package manager.

## Getting Arya Running: Four Deployment Paths

The README documents four paths for running Arya. Each is appropriate for a different context.

For local development or a private server with Node.js available:

```bash
git clone https://github.com/nicejade/markdown-online-editor.git
cd markdown-online-editor
yarn
yarn start
```

This starts the development server with hot reload.

For a production PM2 deployment:

```bash
git clone https://github.com/nicejade/markdown-online-editor.git
cd markdown-online-editor
yarn
yarn global add pm2
yarn build
yarn release
```

Alternatively, after building:

```bash
cd dist
npx pm2 start "npx http-server -p 8866" --name "markdown-editor"
```

For Docker, a pre-built image is available on Docker Hub:

```shell
docker run -d -p 8866:80 nicejade/markdown-online-editor:latest
```

Once running locally, the editor is accessible at http://localhost:8866.

For Docker Compose, create a docker-compose.yml file with the image reference and port mapping and run:

```bash
docker-compose up -d
```

For Cloudflare Pages with no server at all: fork the repository, create a Pages project in the Cloudflare dashboard, set the build command to `yarn install && yarn build`, the output directory to `dist`, and add the required environment variables (NODE_VERSION=18, YARN_NODE_LINKER=node-modules, YARN_ENABLE_IMMUTABLE_INSTALLS=false, NODE_OPTIONS=--openssl-legacy-provider). Every subsequent git push triggers an automatic redeploy.

## Limitations and Cases Where Arya Is the Wrong Choice

Arya has no real-time collaboration layer. The README describes local storage as the persistence mechanism, which means content lives in the browser of whoever typed it. There is no server-side document storage, no user accounts, and no mechanism for two people to edit the same document simultaneously.

The Vue2 framework is end-of-life upstream. Vue2 reached its official end of support on 2023-12-31. The Arya codebase at version 3.3.0 is built on it and has no documented migration plan to Vue3. This is not a functional problem today but is a long-term maintenance consideration for teams that take a conservative stance on dependency age.

The bundle size reflects the embedded feature set. At 132KB for OverType (a much simpler editor), the comparison table in the OverType README makes the trade-off clear: full-featured editors that embed CodeMirror, ProseMirror, or Vditor carry significantly larger payloads. Arya is not the right choice when bundle size is a primary constraint.

PPT preview supports Reveal.js Markdown, but the README notes that chart rendering (Echarts, flowcharts, etc.) inside PPT mode is not currently available. Presentations that depend on embedded diagrams need a separate tool or a screenshot approach.

An alternative for teams wanting a browser-based editor without the self-hosting complexity is HackMD or Notion's Markdown support. Both provide multi-user editing and managed hosting. The trade-off is that they do not support local deployment or the specific export options (especially the WeChat Official Account copy function) that Arya provides.

## Maintenance and Licence

The last push to the repository was on 2026-09-27. The project is not archived. No GitHub releases are published; version 3.3.0 is tracked in package.json and the repository history.

Arya is licensed under the MIT licence. The copyright notice covers the period 2018 through the present, attributed to nicejade. The MIT licence permits unrestricted use, modification, and redistribution provided the copyright notice is retained.

The repository includes a Dockerfile and a nginx.conf in the top level, making the self-hosting path straightforward. The npm package name is markdown-online-editor; the nicejade/markdown-online-editor image is the Docker Hub reference.

## Conclusion

Arya suits teams and individuals who want a no-install Markdown editor with diagram and presentation support that can be self-hosted behind a private network. The Docker image and Docker Compose path make deployment straightforward; Cloudflare Pages hosting covers the case where no server is available. It is a poor fit for users who need collaborative real-time editing (the README documents no multi-user or synchronisation capability), or for those who want an editor embedded inside an existing application and need a lightweight, headless library. The full Vditor dependency means the bundle is not minimal. The last push was on 2026-09-27, and the project is at version 3.3.0 per package.json.

## FAQ

### Can Arya be opened and used entirely in a browser without any installation?

Yes. The hosted version at markdown.lovejade.cn is a fully functional editor. Clearing the default document in the editing pane is all that is needed to start writing. Local storage is used automatically to preserve drafts.

### What Markdown features does Arya support beyond headings and lists?

Arya supports flowcharts, Gantt charts, sequence diagrams, task lists, Echarts charts, staff notation, PPT preview via RevealJS, real-time preview, HTML-to-Markdown paste conversion, and export to PDF, PNG, JPEG, and Word (.docx).

### How does Arya compare to a standard browser-based Markdown editor?

Most web Markdown editors focus on text formatting. Arya adds diagram types, presentation support, audio and video embedding, a WeChat-ready copy function, and multiple export formats. It is built on the Vditor library and embeds RevealJS for slides, which makes it substantially more capable than minimal editors but also larger in bundle size.

## Sources

- [Issues](https://github.com/nicejade/markdown-online-editor/issues)
- [License: MIT](https://github.com/nicejade/markdown-online-editor/blob/master/LICENSE)
- [nicejade/markdown-online-editor on GitHub](https://github.com/nicejade/markdown-online-editor)
- [Project website](https://markdown.lovejade.cn)
- [README](https://github.com/nicejade/markdown-online-editor/blob/master/README.md)

---

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