<writemark-editor> live inline editor

Dependency-free markdown web component. This demo opens directly from disk or through a local server. Inline/live is the primary editing surface: headings, inline formatting, tables, code blocks, task checkboxes, and lists render inside the editor itself while markdown source remains canonical. Source, split, preview-only, and optional companion-preview modes remain available when a host needs them. There is no built-in toolbar; use Markdown shortcuts, slash commands, keyboard shortcuts, or the public action API.

Mobile support: Live mode is experimental and unsupported on mobile browsers. For production editing on iOS, iPadOS, Android, and other mobile or software-keyboard environments, select source mode.

Host action API

This toolbar is demo host UI. Each button calls the component action API.

Mode live Document clean Form valid

Tag playground

Use the demo control above to show tag labels and completion. The host owns the separate autocomplete catalog.

Tags in this document

Autocomplete catalog

Live state

Markdown
0 characters
Selection
0–0
Tags
0 unique
Occurrences
0 total
Active marks
none
Last action
none

Try these flows

  • When tags are enabled, type #doc to search document and catalog tags.
  • Set Shift+Enter to Smart Enter, then press Shift+Enter in a list to continue it.
  • Type a tag outside the catalog and choose its catalog addition to save it for autocomplete.
  • Select text and use the host action buttons.
  • Click a rendered tag to receive md-tag-activate.
  • Use Commit and Reset to inspect dirty state.

Event log