Live demos · v0.2.0

The real editor, live.

There are no screenshots here. Every demo loads the same writer.min.js that you will put on your page — and it works offline, without a server.

Playground Media manager Commands Plugins PDF

Playground

One editor, five modes, zero rebuilds.

Change mode, theme and chrome. Open the panels. Every keystroke updates the live IR and the event log — without losing the cursor.

writer-editor

Writer IR writer-ir.v1

—

Events live

Mode

Theme

Chrome

Toolbar Status bar Outline

Panels

Actions

Media manager

The component, outside the editor.

<writer-media-manager> knows nothing about Markdown. You give it a provider and it can browse, upload, rename, duplicate and delete — returning entries ready to insert.

writer-media-manager standalone component

Seeded provider: /brand, /docs and uploads as data URLs. All offline.

Provider contract

The editor opens it with openMediaManager(); the component also works on its own.
Capabilities: read, write, delete, folders, search, upload, mkdir, move, copy.
Upload does not mean insert: new files appear selected and wait for Insert.
The demo provider is offline: seeded SVG + data URLs for uploads.

provider.ts

interface MediaProvider {
  id: string;
  capabilities: MediaCapabilities;
  list(path: string, options?: MediaListOptions): Promise<MediaListing>;
  upload?(path: string, file: File): Promise<MediaEntry>;
  url(path: string, options?: MediaUrlOptions): string;
}

Commands API

Every button is an `exec(id)`.

The editor has no “hidden” controls. Everything is a command with an ID — and the same IDs work from the toolbar, shortcuts or your code.

writer-editor · commands —

editor.getMarkdown()

Inline commands need a selection. Select a word and press Bold; for block commands (table, callout, TOC) the cursor is enough.

Plugins

Rich Markdown, structured IR.

Callouts, footnotes, task lists, TOC, math, marks, attributes and figures — all become nodes in the IR, not HTML lost in the round-trip.

WriterRender · FULL_PRESET callouts · footnotes · toc · mark · tasklists

PDF

An error is better than a lie.

Many libraries return HTML with a .pdfextension. Writer refuses: it needs a real PDF engine or print HTML.

pdf.ts

try {
  const pdf = await WriterRender(markdown).asPDF();
  // pdf is real PDF bytes
} catch (error) {
  if (error.code === 'NO_PDF_ENGINE') {
    // Options: register an engine, use
    // the print HTML, or send the Markdown to
    // the PHP / Python SDK that has Dompdf / ReportLab.
  }
}

Live test

No PDF engine is registered on this page. Press the button to see the real error — not a substitute.

Waiting to run…

Why? A file that says “PDF” but contains HTML breaks email clients, e-signing and archiving. NO_PDF_ENGINE is a feature, not a bug.

Ready for your own document.

Read the API reference or open the render-only lab for the formats.

See the API Render lab