yjd is a rich text editor you compose from a tree-shakeable core. Register only the features you use and ship 16 KB — not the whole library.
Every preset is built from the same /core entry. Pick a profile — the rest is tree-shaken away. (gzipped JS)
A Quill-inspired registry of formats and modules — add what you want, drop what you don't.
Import classes from /core, register what you need. Side-effect-free, ESM + UMD builds.
Fills the width on desktop, a single swipe-row on mobile, overflow tucked into "More".
Pasted HTML is sanitised — scripts, handlers and unsafe URLs stripped; only trusted embeds survive.
Headings, fonts, sizes, colour, lists, tables, images, video, links, find & replace, code view.
Plain DOM. Drop it into React, Vue, Svelte or a static page — it's just new yjd().
Point image.upload at your CDN — toolbar, paste & drop all upload, with a placeholder while it loads. Falls back to base64.
Select text → Improve, fix, shorten, translate or Ask AI, with accept/discard. Plus ghost-text autocomplete. You bring the model; no SDK bundled, tree-shakes to 0.
Autocomplete people or tasks from your own async source. Tokens carry an id, so saved content knows who was tagged.
Store content as HTML, a JSON tree, or Markdown — getMarkdown(), getJSON() & back. Plus fromTextarea and renderStatic.
The playground lets you tweak the config and re-run — copy the exact code into your app.
→ See the integration demo (AI · upload · mention · export · fromTextarea)
Add the package, register the features you want, link the one shared stylesheet. That's the whole setup.
Full docs →// 1. install
npm i @oix1987/yjd
// 2. compose from the tree-shakeable core
import { Editor, registry, Bold, Italic, Link,
Toolbar, History } from '@oix1987/yjd/core';
registry.register('formats/bold', Bold);
registry.register('formats/italic', Italic);
registry.register('modules/toolbar', Toolbar);
new Editor('#editor', { placeholder: 'Write…' });Five ready profiles in the live playground — edit the code and watch it rebuild.