Dependency-free WYSIWYG markdown/html editor

Go to file

gsb f76ebbf2e5 feat: Add typed event system with on/off/emit New events with structured payloads: change({ markdown, html }) Fires on every content edit. save({ markdown, html }) Fires when editor.save() is called. Consumer handles persistence. modeChange({ current, previous }) Fires on VIEW/EDIT/WYSIWYG transitions. themeChange({ current, previous }) Fires when themes.set() switches the active theme. ready({ markdown, html, mode, theme }) Fires after editor.run() completes first render. Events can be registered in the constructor via the 'on' setting or at any time via editor.on(event, callback) / editor.off(). 202/202 tests passing.		2026-04-29 01:35:06 +00:00
src	feat: Add typed event system with on/off/emit	2026-04-29 01:35:06 +00:00
test	Add themes support	2026-04-29 01:20:55 +00:00
.gitignore	Initial commit of ribbit library	2026-04-28 23:30:53 +00:00
LICENSE	Initial commit	2026-04-28 16:21:33 -07:00
package-lock.json	Initial commit of ribbit library	2026-04-28 23:30:53 +00:00
package.json	Add themes support	2026-04-29 01:20:55 +00:00
README.md	Initial commit of ribbit library	2026-04-28 23:30:53 +00:00
tsconfig.json	Add themes support	2026-04-29 01:20:55 +00:00

README.md

ribbit

Zero-dependency WYSIWYG markdown editor

Files

src/hopdown.js — Markdown ↔ HTML converter (HopDown.toHTML(), HopDown.toMarkdown())
src/ribbit.js — Base viewer class (Ribbit), plugin base class (RibbitPlugin), utilities
src/ribbit-editor.js — Editor class (RibbitEditor) with VIEW/EDIT/WYSIWYG modes
src/ribbit.css — Editor and content styles

Usage

<link rel="stylesheet" href="ribbit/src/ribbit.css">
<article id="ribbit">your markdown here</article>

<script src="ribbit/src/hopdown.js"></script>
<script src="ribbit/src/ribbit.js"></script>
<script src="ribbit/src/ribbit-editor.js"></script>
<script>
    const editor = new RibbitEditor({ plugins: [] });
    editor.run();

    // Switch modes
    editor.wysiwyg();  // WYSIWYG editing
    editor.edit();      // Source editing
    editor.view();      // Read-only view

    // Get content
    editor.getMarkdown();
    editor.getHTML();
</script>

Supported Markdown

Bold, italic, inline code, links, headings (h1-h6), unordered/ordered/nested lists, blockquotes, fenced code blocks with language, horizontal rules, GFM tables with column alignment, and paragraphs. Arbitrary nesting of all inline formatting.

Tests

Open test/test_ribbit-down.html in a browser.