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