Skip to main content
Lightning Jar - Web Studio Lightning Jar Wordmark
Packages & Tools

woof-editor

Markdown Editor Component · Beta · MIT

woof-editor is our open-source contenteditable markdown editor for Svelte 5. You seed it with markdown, your user edits a rendered WYSIWYG surface, and every mutation serializes back through barkdown to the canonical markdown form of what is on screen. Where traditional markdown WYSIWYGs round-trip lossily, accumulating whitespace changes and list-marker churn on every save, woof-editor inherits barkdown's property-tested guarantee that DOM-to-markdown inverts marked's parse.

The editor's job stays an editor's job: menus, a link popover, footnotes, keyboard undo and redo, paste sanitization through DOMPurify, and pluggable link previews. The round trip itself is the codec's problem. The whole consumer API is one component and one state class.

It grew up inside Replicator, where the same surface edits every article we publish, and it is currently in beta on npm. The live demo renders the serializer's output next to the editing surface, so you can watch the markdown stay exactly as tidy as it started.

bun add @kevinpeckham/woof-editor

Live demo →npm →

What It Does

  • Round-trip WYSIWYG: every keystroke serializes to canonical markdown via barkdown
  • Menus, link popover, footnote support, keyboard undo and redo
  • Paste sanitization with a configurable DOMPurify schema
  • Scoped, themeable styling via stable class names and custom properties
  • One component, one state class: seed markdown in, read markdown out

The Story Behind It