Playground · Minimal

Minimal rich text editor demo — a 17 KB comment box

The smallest useful build — bold, italic, underline and a link, and nothing else. Import only those formats from the tree-shakeable /core entry and ship about 17 KB of JavaScript. Ideal for comment boxes, review fields and chat inputs where a full toolbar would be overkill.

Comment / chat box — bold, italic, underline, link.

💡 The code shown imports from the CDN for copy-paste; here it runs against a pre-loaded core. Edit anything and hit Run.

minimal.js

// 1) Add the stylesheet once:
//    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@oix1987/yjd/lib/styles.min.css">

// 2) Import only what you need (tree-shaken):
import { Editor, registry, Bold, Italic, Underline, Link, Toolbar, History }
  from 'https://cdn.jsdelivr.net/npm/@oix1987/yjd/core.js';

registry.register('formats/bold', Bold);
registry.register('formats/italic', Italic);
registry.register('formats/underline', Underline);
registry.register('formats/link', Link);
registry.register('modules/toolbar', Toolbar);
registry.register('modules/history', History);

new Editor('#editor', {
  width: '100%',
  placeholder: 'Write a comment…',
  content: '<p>🔥 This thread is gold! Loved the <b>breakdown on retention</b> — bookmarking it. <a href="https://example.com">Full notes here</a> 👏 <span style="color: #6d5efc">#growth</span> <span style="color: #6d5efc">#startups</span></p>',
  toolbar1: [
    { group: 'text-format', items: ['bold', 'italic', 'underline'] },
    { group: 'link', items: ['link'] }
  ],
  formats: ['bold', 'italic', 'underline', 'link'],
  modules: ['toolbar', 'history']
});

Live preview~17 KB JS