# Editium
[](https://www.npmjs.com/package/editium)
[](https://opensource.org/licenses/MIT)
[](https://bundlephobia.com/package/editium)
[](https://www.typescriptlang.org/)
**Production-ready rich text editor for React and Vanilla JavaScript**
Modern • Lightweight • Customizable • Zero Dependencies (Vanilla)
[Quick Start](#quick-start) • [Documentation](#documentation) • [Examples](#examples) • [API Reference](#api-reference)
---
## Overview
Editium is a flexible rich text editor that works seamlessly in both **React** and **Vanilla JavaScript** environments. Built for developers who need a reliable, feature-rich editor without the complexity.
**Why Editium?**
- **Dual-Mode Support**: Same powerful features in React (Slate.js) and Vanilla JS (pure JavaScript)
- **Production Ready**: Battle-tested with comprehensive formatting tools and advanced features
- **Developer Experience**: Get from npm install to working editor in under 60 seconds
- **Export Flexibility**: HTML, JSON, and plain text output formats
- **Fully Customizable**: Configure exactly what you need, hide what you don't
---
## Quick Start
### React
```bash
npm install editium
```
```tsx
import { Editium } from 'editium';
function App() {
return
```
**[See live demo →](https://codepen.io/nabarup-duplicate/pen/WbrKdpj)**
---
## Key Features
**Rich Text Editing**
- Comprehensive formatting: bold, italic, underline, strikethrough, code
- 8 heading levels, blockquotes, and code blocks
- Text and background colors
- Superscript and subscript
**Advanced Capabilities**
- Full table support with dynamic rows/columns
- Resizable images with custom upload handlers
- Bulleted and numbered lists with nesting
- Find and replace with match highlighting
- Text alignment (left, center, right, justify)
**Developer Experience**
- TypeScript support with full type definitions
- HTML and JSON export formats
- Customizable toolbar (show only what you need)
- Keyboard shortcuts for efficient editing
- Read-only mode for content display
- Word and character counting
- Fullscreen editing mode
**Framework Flexibility**
- **React**: Component-based with hooks support
- **Vanilla JS**: Zero dependencies, works anywhere
- Same API and features across both versions
---
## Installation
```bash
npm install editium
```
**Peer dependencies (React only):**
```bash
npm install react react-dom
```
**CDN (Vanilla JS):**
```html
```
---
## Documentation
### React Usage
**Basic Example**
```tsx
import { Editium } from 'editium';
function App() {
return setContent({ html, json })}
showWordCount={true}
/>
);
}
```
**Custom Toolbar**
```tsx
```
**NPM**
```javascript
import 'editium/vanilla/editium.css';
import Editium from 'editium/vanilla/editium.js';
const editor = new Editium({
container: document.getElementById('editor'),
toolbar: 'all'
});
```
**[→ Full Vanilla JS Documentation](./vanilla/README.md)**
---
## API Reference
### React Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `toolbar` | `ToolbarItem[] \| 'all'` | Basic items | Toolbar configuration |
| `placeholder` | `string` | `'Start typing...'` | Placeholder text |
| `onChange` | `(html, json) => void` | - | Content change callback |
| `initialValue` | `string \| CustomElement[]` | - | Initial content |
| `readOnly` | `boolean` | `false` | Read-only mode |
| `showWordCount` | `boolean` | `false` | Show word/character count |
| `height` | `string \| number` | `'200px'` | Editor height |
| `onImageUpload` | `(file: File) => Promise` | - | Custom image upload |
### Vanilla JS Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `container` | `HTMLElement` | required | DOM element for editor |
| `toolbar` | `string \| array` | `'all'` | Toolbar configuration |
| `placeholder` | `string` | `''` | Placeholder text |
| `onChange` | `function` | - | Content change callback |
| `readOnly` | `boolean` | `false` | Read-only mode |
| `showWordCount` | `boolean` | `false` | Show word/character count |
| `height` | `string \| number` | `'200px'` | Editor height |
| `onImageUpload` | `function` | - | Custom image upload |
### Vanilla JS Methods
```javascript
editor.getHTML() // Returns HTML string
editor.getText() // Returns plain text
editor.getJSON() // Returns JSON structure
editor.setContent(html) // Set editor content
editor.clear() // Clear editor
editor.focus() // Focus editor
editor.destroy() // Cleanup editor
```
### Toolbar Items
Available items: `bold`, `italic`, `underline`, `strikethrough`, `code`, `superscript`, `subscript`, `heading-one` through `heading-eight`, `paragraph`, `blockquote`, `code-block`, `bulleted-list`, `numbered-list`, `indent`, `outdent`, `left`, `center`, `right`, `justify`, `text-color`, `bg-color`, `link`, `image`, `table`, `horizontal-rule`, `undo`, `redo`, `find-replace`, `fullscreen`, `view-output`, `separator`
---
## Examples
### Custom Image Upload
**React:**
```tsx
const handleImageUpload = async (file: File) => {
const formData = new FormData();
formData.append('image', file);
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
const { url } = await response.json();
return url;
};
setContent({ html, json })} />
Save
);
}
```
**Vanilla JS:**
```javascript
const editor = new Editium({
container: document.getElementById('editor'),
onChange: (content) => {
localStorage.setItem('content', JSON.stringify({
html: content.html,
json: content.json
}));
}
});
```
### Height Configuration
```tsx
// React
**Made with ❤️ by [Nabarup Dev](https://github.com/NabarupDev)**
⭐ **Star us on [GitHub](https://github.com/NabarupDev/Editium)** if you find this project useful!
[NPM](https://www.npmjs.com/package/editium) • [GitHub](https://github.com/NabarupDev/Editium) • [Issues](https://github.com/NabarupDev/Editium/issues)