RayEditor

Lightweight, dependency-free WYSIWYG rich text editor — free alternative to TinyMCE & CKEditor.

Live Demo & Docs · Issues · npm

Zero dependencies · TypeScript · MIT · React / Vue / Angular / Svelte wrappers · ~45 KB min+gzip

---

Install

npm install @rohanyeole/ray-editor

import { RayEditor } from '@rohanyeole/ray-editor';
import '@rohanyeole/ray-editor/css';

const editor = new RayEditor('editor', { theme: 'light' });

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rohanyeole/ray-editor@2/dist/ray-editor.css">
<script src="https://cdn.jsdelivr.net/npm/@rohanyeole/ray-editor@2/dist/ray-editor.umd.min.js"></script>

<div id="editor"></div>
<script>
  const editor = new RayEditor.RayEditor('editor', { theme: 'light' });
</script>

---

Basic Usage

const editor = new RayEditor('editor', {
  theme: 'light',            // 'light' | 'dark' | 'auto'
  wordCount: true,
  onChange: (html) => console.log(html),
  toolbar: [
    ['bold', 'italic', 'underline'],
    ['headings', 'blockquote'],
    ['link', 'imageUpload', 'table'],
    ['undo', 'redo'],
  ],
});

editor.getContent();           // → HTML string
editor.setContent('<p>Hi</p>');
editor.setTheme('dark');
editor.setReadOnly(true);
editor.destroy();

---

Features

• Bold, italic, underline, strikethrough, superscript, subscript, highlight
• Headings (H1–H6), blockquote, horizontal rule
• Ordered / unordered lists, indent / outdent, text alignment
• Font size picker, font family, text color, background color
• Tables (insert, resize columns/rows, add/remove rows & cols, floating toolbar)
• Links (insert, edit, remove, hover tooltip, new-tab toggle)
• Image upload (8-direction resize handles, alt / title / caption editor)
• File upload with inline preview (image / video / audio / download link)
• Code blocks with syntax highlighting (highlight.js) + inline code
• Task lists (interactive checkboxes, keyboard navigation)
• Callout blocks (Info / Warning / Success / Error / Tip / Note / Important / Caution)
• Emoji picker (800+ emojis, search, recently used)
• Special characters picker (90+ symbols)
• Date/time insertion
• Slash commands (/) — Notion-style command palette
• Markdown mode — bidirectional rich text ↔ Markdown
• Markdown shortcuts (**, ##, >, ---, etc.)
• Find & Replace (Ctrl+F / Ctrl+H)
• Dark mode + CSS variable theming
• Fullscreen, print, show HTML source, remove format
• Plugin API + custom slash commands
• Word count bar
• Spell check toggle
• Auto-save hook
• @Mentions
• Undo/redo (100-entry history)
• Paste normalisation (Word, Google Docs, GitHub, etc.)

Full documentation and live demo →

---

Framework Wrappers

Dedicated packages for React, Vue 3, Angular, and Svelte are available in the packages/ directory and on npm under @rohanyeole/ray-editor-*.

See the docs site for framework-specific examples.

---

Contributing

git clone https://github.com/yeole-rohan/ray-editor
npm install
npm run dev    # watch build
npm test       # run tests (vitest + jsdom)

Open an issue before starting work on large features so we can align on the design. See ROADMAP.md for tracked bugs and planned features.

---

Security

See SECURITY.md for the vulnerability reporting process, integrator best practices, and documented design decisions (including setContent() trust model and upload MIME validation).

---

License

MIT © Rohan Yeole