ME.js WYSIWYG Markdown Editor

A zero-dependency, single-file rich text Markdown editor. Edit visually like a word processor — everything is stored as Markdown underneath. Works with plain Web, Vue 3 and React 18 — no build step, no framework required.

Try it now Star on GitHub

Features

Everything you expect from a modern editor — in three small files.

visibilityWYSIWYG Editing

Edit rendered rich text directly — headings look like headings, bold looks bold. The framework serializes everything to clean Markdown underneath.

format_boldFull Formatting

Headings, bold, italic, strikethrough, inline code, text color, blockquote, lists (bulleted / numbered / task), code blocks, tables, links, images, audio and video.

imagePaste Images

Paste screenshots directly. Upload to your own backend endpoint or fall back to base64 — configurable with one option.

table_chartTables & Media

Insert tables with custom rows/columns via a dialog. Click any image to resize (100% / 75% / 50% / 25%) with HTML round-trip.

codeMarkdown Export

View the underlying Markdown source live. Copy to clipboard, or export as pure Markdown, HTML, or mixed Markdown+HTML.

settingsConfigurable

Toggle any toolbar button (copy, view-code, audio, video), character limit with red overflow warning, custom upload endpoint — all via init options.

Live Demo

This is the real editor running on this page — the content below is this editor's own documentation. Select text and use the toolbar, insert tables and images, then hit the code icon to see the Markdown underneath. Nothing is simulated.

# ME.js — WYSIWYG Markdown Editor A **rich text** Markdown editor written in *pure JavaScript*. Edit visually — the framework stores everything as **Markdown** underneath. ## Try it - Select this line and click **B** in the toolbar to make it bold - Click the table icon to insert a table with custom rows and columns - Click the quote icon on a paragraph to turn it into a blockquote ## Formatting showcase Inline: **bold**, *italic*, ~~strikethrough~~, `inline code` 1. Ordered lists work 2. So do bullet lists - nested too - [x] Task lists with checkboxes - [ ] Try checking me > Blockquotes for emphasis and citations. ## Code blocks ```js // everything is stored as Markdown underneath const editor = ME.init({ mount: '#app' }); ``` ## You are the editor This page IS the running editor. The **View Code** button (top-right code icon) shows the underlying Markdown source — updated live as you type. Hit **Copy** to grab the Markdown.

How to Use

Three ways to integrate — all without a build step. Full parameter reference in the Docs.

Option 1: Vanilla JS Web

Put your Markdown inside a mount element, include one script, call ME.init().

<!-- 1. mount element with Markdown/HTML content -->
<div id="app">
# Hello

This is **bold** text.
</div>

<!-- 2. load the framework -->
<script src="me-editor.js"></script>

<script>
  // 3. initialize — the editor renders and takes over
  ME.init({
    mount: '#app',
    title: 'ME.js Editor',
    iconsMode: 'remote',          // or 'local'
    uploadUrl: 'http://localhost:1688/upload',  // paste-image upload
    maxLength: 0                  // character cap, 0 = unlimited
  });
</script>

Option 2: Vue 3 Vue

Include me-vue.js (self-contained), register the plugin, bind with v-model.

<script src="https://unpkg.com/vue@3"></script>
<script src="me-vue.js"></script>

<div id="app">
  <me-editor v-model="content" theme="dark" />
</div>
<script>
  Vue.createApp({
    data: () => ({ content: '# Hello\n\n- item' })
  }).use(MEVue).mount('#app');
</script>

Option 3: React 18 React

Include me-react.js (self-contained), no JSX needed — plain createElement.

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="me-react.js"></script>

<script>
  const e = React.createElement;
  function App() {
    const [md, setMd] = React.useState('# Hello');
    return e(MEReact.MeEditor, { value: md, onChange: setMd });
  }
  ReactDOM.createRoot(document.getElementById('root')).render(e(App));
</script>

Download

Single file per flavor — the Vue and React variants include the full engine.

me-editor.js

Vanilla JS. ~57 KB, zero dependencies.

Download

me-vue.js

Vue 3 component. ~41 KB, needs Vue 3 only.

Download

me-react.js

React 18 component. ~39 KB, needs React 18 only.

Download