milkdown-element

Milkdown Crepe markdown editor packaged as a standalone web component. All dependencies (including CodeMirror, ProseMirror, Mermaid, etc.) are bundled into a single browser-ready ESM file.

Includes a read-only viewer component (milkdown-viewer-element) for displaying authored content without editing capabilities.

Install

npm install milkdown-element

Usage

<script type="module">
  import 'milkdown-element';
</script>

<milkdown-element doc="# Hello world"></milkdown-element>

Placeholder

<milkdown-element placeholder="Start typing..."></milkdown-element>

Listening for changes

<milkdown-element id="editor"></milkdown-element>
<script type="module">
  import 'milkdown-element';

  const editor = document.querySelector('#editor');
  editor.addEventListener('input', () => {
    console.log(editor.getMarkdown());
  });
</script>

With Lit

import 'milkdown-element';

html`
  <milkdown-element
    .doc=${this.markdown}
    placeholder="Start typing..."
    .onUpload=${(file: File) => this.uploadImage(file)}
    .onFileUpload=${(file: File) => this.uploadFile(file)}
    @input=${this.#onInput}
  ></milkdown-element>
`;

Viewer (read-only)

Use milkdown-viewer-element to render authored content without the toolbar, slash menu, or editing capabilities:

<milkdown-viewer-element .doc=${this.markdown}></milkdown-viewer-element>

The viewer renders all content types (images, iframes, mermaid diagrams, file blocks, code blocks, highlights, emoji, tables, and LaTeX) but disables all editing interactions.

Features

The editor ships with these built-in content types on top of standard markdown:

| Feature | Description | | --- | --- | | Toolbar | Floating formatting toolbar appears when text is selected | | Slash menu | Type / on an empty line to open a block insertion menu | | Image upload | Drag-and-drop or paste images; uses the onUpload callback | | File attachment | Attach downloadable files via the slash menu; uses onFileUpload | | Iframe embed | Embed external pages; available via slash menu or by typing ::iframe{src="url"} | | Mermaid diagrams | Create flowcharts and diagrams; available via slash menu or ```mermaid | | Highlight | Highlight text with ==highlighted text== or the toolbar button | | Emoji | Standard emoji support | | Tables | Insert and edit tables via the slash menu | | Code blocks | Syntax-highlighted code blocks with language selection | | LaTeX | Inline and block math via LaTeX syntax | | Lists | Bullet, ordered, and task lists | | Links | Paste URLs or use the link tooltip to add hyperlinks |

API

milkdown-element

| Property | Attribute | Type | Description | | --- | --- | --- | --- | | doc | doc | string | Markdown content to edit | | placeholder | placeholder | string | Placeholder text shown when the editor is empty | | onUpload | — | (file: File) => Promise<string> | Callback to upload an image; should return the image URL | | onFileUpload | — | (file: File) => Promise<{ url: string; name: string }> | Callback to upload a file; should return the download URL and display name | | resolveImageUrl | — | (url: string) => string \| Promise<string> | Optional URL resolver for image display (e.g. CDN proxy) | | crepe | — | Crepe \| null | The underlying Crepe instance (read-only at runtime) |

| Method | Returns | Description | | --- | --- | --- | | getMarkdown() | string | Returns current editor markdown | | getImageSrcs() | string[] | Returns all image URLs found in the current markdown | | getFileSrcs() | string[] | Returns all file URLs found in the current markdown | | reset() | void | Clears the editor and re-initializes |

| Event | Detail | Description | | --- | --- | --- | | input | — | Fired when markdown content changes |

milkdown-viewer-element

| Property | Attribute | Type | Description | | --- | --- | --- | --- | | doc | doc | string | Markdown content to display | | resolveImageUrl | — | (url: string) => string \| Promise<string> | Optional URL resolver for image display |

Accessing the Crepe instance

The underlying Crepe instance is available via the crepe property. It is null until the editor finishes initializing.

const el = document.querySelector('milkdown-element');
await el.updateComplete;
el.crepe; // Crepe instance

The Crepe type is re-exported for TypeScript consumers:

import type { Crepe } from 'milkdown-element';

Development

npm run setup    # install deps for library + demo
npm run demo     # start the demo dev server (opens browser)

The demo imports directly from src/ via a Vite alias, so changes to the library source are reflected immediately with HMR.

Build

npm run build    # one-shot production build
npm run dev      # rebuild on file changes (watch mode)