Redactix
Modern WYSIWYG editor for content creators. Notion-like experience.
Slash commands, floating toolbar, clean HTML output. Zero dependencies.
Compatible with everything that can work with a plain <textarea>.
Modern WYSIWYG editor for content creators. Notion-like experience.
Slash commands, floating toolbar, clean HTML output. Zero dependencies.
Compatible with everything that can work with a plain <textarea>.
A lightweight, powerful editor that produces clean semantic HTML without any framework dependencies.
Bold, italic, underline, strikethrough, inline code, spoilers, and text highlighting with a floating toolbar.
Type / to open command menu. Insert headings, lists, images, tables, and more. Just like Notion.
Drag-and-drop blocks, transform types, duplicate, delete. Full control with the handle menu.
Insert and edit tables with context menus for rows, columns, and header management.
Drag & drop, paste, or upload images. Full control over alt, title, srcset, and captions. YouTube embeds with responsive wrapper.
Syntax-highlighted code blocks with language selection. Click to edit in a dedicated modal.
Styled callout boxes (info, warning, danger, success) and quote presets for visual variety.
Search through content with highlighting, navigate matches, and replace text globally.
Semantic HTML without inline styles or unnecessary attributes. Perfect for CMS integration.
Paste from Google Docs, Word, or any source. Formatting is preserved, junk is removed.
Full history stack with Ctrl+Z and Ctrl+Y support. Never lose your changes.
Distraction-free writing with fullscreen toggle. Focus on your content.
Speed up your workflow with slash commands and Markdown-style shortcuts.
| Shortcut | Action | Description |
|---|---|---|
/ |
Slash Commands | Opens command menu with all block types (h1, h2, h3, quote, callout, code, image, youtube, table, hr, ol, ul) |
# |
Heading 1 | Type at the start of a line and press space |
## |
Heading 2 | Type at the start of a line and press space |
### |
Heading 3 | Type at the start of a line and press space |
- or * |
Bullet List | Creates an unordered list item |
1. |
Numbered List | Creates an ordered list item |
> |
Blockquote | Creates a quote block |
! |
Callout | Creates a callout/aside block |
--- |
Separator | Inserts a horizontal rule |
Ctrl+Z |
Undo | Revert last change |
Ctrl+Y |
Redo | Restore undone change |
Ctrl+F |
Find | Open find & replace panel |
Play with the editor below. All features are enabled.
Simplified editor for comments and forum posts. No toolbar, no image uploads, no advanced settings, all links are nofollow. Use / command or Markdown shortcuts for formatting.
Redactix supports multiple languages out of the box. Click on a language card to see the editor in action.
'en'
'ru'
'uk'
'pl'
'de'
'fr'
'es'
'pt'
'sr'
'ka'
'vi'
'th'
'sw'
'tr'
'ar'
'he'
'ja'
'ko'
'zh'
'kk'
'uz'
'en'
Built-in dark theme with full CSS variable support. All UI elements are themed including modal dialogs, menus, and buttons. Use theme: 'dark' or theme: 'auto' (follows system preference).
Set up Redactix in your project in minutes.
Add the CSS and JS files to your project.
<!-- CSS -->
<link rel="stylesheet" href="/redactix/Redactix.css">
<!-- JS (ES Module) -->
<script type="module">
import Redactix from './redactix/Redactix.js';
</script>
Create a textarea element with initial content (optional).
<textarea class="redactix">
<p>Your initial content here...</p>
</textarea>
Create a new Redactix instance with optional configuration.
new Redactix({
selector: '.redactix',
// Custom callout presets (optional)
calloutPresets: [
{ name: 'custom', label: 'My Style', class: 'my-callout' }
],
// Custom quote presets (optional)
quotePresets: [
{ name: 'fancy', label: 'Fancy Quote', class: 'fancy-quote' }
]
});
selectorCSS selector for textarea elements to transform into editors. Default: .redactix
uploadUrlURL endpoint for image uploads. Enables drag & drop, paste, and file picker. Default: null
browseUrlURL endpoint for browsing uploaded images. Shows "Choose from uploaded" button. Default: null
allowImageDeleteShow delete buttons in image gallery. Requires server-side support. Default: false
maxHeightMaximum height of the editor area. Any CSS value: '500px', '50vh'. Default: null (no limit)
classesArray of CSS classes for quick select in Attributes dialog. If empty/null, the section is hidden.
calloutPresetsArray of custom callout styles. Each preset needs name, label, and class properties.
quotePresetsArray of custom blockquote styles. Same structure as callout presets.
themeColor theme: 'light' (default), 'dark', or 'auto' (follows system preference).
localeInterface language: 'en', 'ru', 'uk', 'pl', 'de', 'fr', 'es', 'pt', 'sr', 'ka', 'vi', 'th', 'sw', 'tr', 'ar', 'he', 'ja', 'ko', 'zh', 'kk', 'uz'. RTL languages (ar, he) auto-detect.
Access editor instances via textarea.redactix for programmatic control.
// Get textarea element
const textarea = document.querySelector('#my-editor');
// Get clean HTML content
const html = textarea.redactix.getContent();
// Set new content (resets history)
textarea.redactix.setContent('<h1>New content</h1>');
// Copy content between editors
target.redactix.setContent(source.redactix.getContent());
getContent()Returns clean HTML without editor-specific wrappers (separators, contenteditable attrs).
setContent(html)Sets new HTML content, re-initializes editor elements (figures, code blocks), resets undo history.
sync()Manually syncs editor content to the original textarea. Called automatically on changes.
All colors use CSS custom properties — editor, toolbar, modals, menus, buttons. Override them without !important.
/* Light theme customization */
.redactix-wrapper {
--redactix-primary: #8b5cf6; /* Purple accent */
--redactix-primary-hover: #7c3aed;
}
/* Dark theme customization - match selector specificity */
.redactix-wrapper.redactix-dark {
--redactix-primary: #a855f7; /* Brighter for dark */
--redactix-primary-hover: #c084fc;
}
Note: When customizing dark theme, use .redactix-wrapper.redactix-dark selector for proper specificity.
--redactix-primary, --redactix-primary-hover, --redactix-primary-light — accent color for buttons, links, focus states.
--redactix-bg, --redactix-bg-secondary, --redactix-bg-hover, --redactix-border — backgrounds and borders.
--redactix-text, --redactix-text-muted, --redactix-text-placeholder — main text, secondary text, placeholders.
--redactix-code-bg, --redactix-code-color, --redactix-mark-bg, --redactix-blockquote-bg — inline and block styles.
See README for the complete list of 40+ CSS variables.
Built-in support for drag & drop, paste, file picker, and image gallery with a unified PHP backend.
Simply drag images from your desktop or file manager directly into the editor. Visual feedback shows where images will be inserted.
Copy an image and press Ctrl+V to insert it. Works with screenshots, copied images from browsers, and image editors.
Click the Image button in the toolbar to open a modal with file upload zone. Drag & drop works there too.
Browse and select from previously uploaded images. Square thumbnails with filename and file size. Optional delete functionality.
When editing an existing image, you can upload a new one to replace it or choose from the gallery. All settings are preserved.
Full control over image links: URL, target, and rel attributes (nofollow, sponsored, ugc). Same options as text links.
Pass the uploadUrl and browseUrl options. Both can point to the same unified script.
new Redactix({
selector: '.redactix',
uploadUrl: '/redactix_images.php',
browseUrl: '/redactix_images.php',
// Enable delete button (requires PHP config)
allowImageDelete: true
});
The redactix_images.php script handles upload, browse, and delete operations. Configure settings at the top.
// redactix_images.php configuration
$uploadDir = __DIR__ . '/uploads/';
$uploadUrlPrefix = '/uploads/';
$maxFileSize = 5 * 1024 * 1024;
$allowDelete = false; // Set true to enable
Make sure the uploads directory exists and is writable by the web server.
mkdir uploads
chmod 755 uploads
POST UploadSend form data with image file. Returns JSON with src, srcset, alt, title, caption.
GET ?action=browseReturns JSON array of images with src, filename, size, and optional metadata.
POST action=deleteDeletes image by file parameter. Only works if $allowDelete is true in PHP config.
Includes allowDelete flag so the JS knows whether to show delete buttons in the gallery.
The included redactix_images.php is a basic example. For production use, add your own security measures: authentication, CSRF tokens, rate limiting, and file storage outside web root. Enable delete functionality with caution.
Upload endpoint should return JSON with these fields:
{
"success": true,
"src": "/uploads/abc123.jpg", // Required
"srcset": "", // Optional
"alt": "", // Optional
"title": "", // Optional
"caption": "" // Optional
}
The WYSIWYG landscape is broken. Here's what's wrong with it.
CKEditor, Imperavi... Great features, but licensing costs can reach thousands per year. Not everyone has that budget.
jQuery-based editors with outdated UX. Clunky toolbars, messy HTML output full of inline styles and deprecated tags.
Modern alternatives require React, Vue, or 100+ npm dependencies. Good luck integrating that into a simple PHP project.
I wanted something functional on the level of Notion, but under the hood — just a simple <textarea>. 100% compatibility with any CMS. No third-party components. No complex state management. Just paste the files, initialize, and it works.
Markdown is great for developers, but try configuring srcset, loading="lazy", or custom attributes for an image. How do you add rel="nofollow" to a link? What about tables with colspan?
Clean semantic HTML gives you full control over formatting. And if you really need Markdown — there are plenty of html-to-md converters out there.
No style="font-family: Arial; font-size: 14px; color: rgb(0,0,0);" garbage. No <span> wrappers for every word. No Microsoft Office artifacts. Just pure, semantic HTML that your CMS will love.
