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

Official, published wrapper packages for React, Vue 3, Angular, and Svelte — source lives in packages/, each with its own README covering full usage.

React

npm install @rohanyeole/ray-editor @rohanyeole/ray-editor-react

import RayEditor from '@rohanyeole/ray-editor-react';

<RayEditor value={html} onChange={setHtml} options={{ theme: 'light' }} />

Vue 3

npm install @rohanyeole/ray-editor @rohanyeole/ray-editor-vue

<RayEditorVue v-model="content" :options="{ theme: 'light' }" />

Angular (standalone component, Angular 15+)

npm install @rohanyeole/ray-editor @rohanyeole/ray-editor-angular

<ray-editor [(ngModel)]="content" [options]="editorOptions"></ray-editor>

Svelte

npm install @rohanyeole/ray-editor @rohanyeole/ray-editor-svelte

<RayEditor bind:value={content} options={{ theme: 'light' }} />

See each package's README (react · vue · angular · svelte) for the full API, including reactive-forms/two-way-binding patterns and accessing the underlying editor instance.

---

Contributing

Requires Node ≥ 20 (the packages/* framework wrappers build against current Angular/Vite toolchains that need it — the core package alone is more lenient, but the repo is set up as one npm workspace covering both).

git clone https://github.com/yeole-rohan/ray-editor
npm install          # installs the core package + all packages/* workspaces
npm run dev           # watch build (core)
npm test               # run tests (vitest + jsdom)
npm run test:e2e:chrome  # Playwright e2e
npm run build --workspace=packages/react   # build a specific wrapper (react/vue/angular/svelte)

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