Redactix - Modern WYSIWYG Editor

Why Redactix?

A lightweight, powerful editor that produces clean semantic HTML without any framework dependencies.

✍

Rich Text Formatting

Bold, italic, underline, strikethrough, inline code, spoilers, and text highlighting with a floating toolbar.

📝

Markdown Shortcuts

Type # for headings, - for lists, > for quotes. Familiar and fast.

📃

Block Controls

Drag-and-drop blocks, transform types, duplicate, delete. Full control with the handle menu.

📊

Tables

Insert and edit tables with context menus for rows, columns, and header management.

🎨

Images & Media

Drag & drop, paste, or upload images. Full control over alt, title, srcset, and captions. YouTube embeds with responsive wrapper.

💻

Code Blocks

Syntax-highlighted code blocks with language selection. Click to edit in a dedicated modal.

💡

Callouts & Quotes

Styled callout boxes (info, warning, danger, success) and quote presets for visual variety.

🔍

Find & Replace

Search through content with highlighting, navigate matches, and replace text globally.

📄

Clean HTML Output

Semantic HTML without inline styles or unnecessary attributes. Perfect for CMS integration.

♺

Smart Paste

Paste from Google Docs, Word, or any source. Formatting is preserved, junk is removed.

🔄

Undo/Redo History

Full history stack with Ctrl+Z and Ctrl+Y support. Never lose your changes.

⛶

Fullscreen Mode

Distraction-free writing with fullscreen toggle. Focus on your content.

Keyboard Shortcuts

Speed up your workflow with Markdown-style shortcuts.

Shortcut	Action	Description
`#`	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

Try It Out

Play with the editor below. All features are enabled.

<h1>Welcome to Redactix!</h1><p>This is a <b>modern</b> WYSIWYG editor with Notion-like experience. Select text to see the <i>floating toolbar</i> with formatting options including <code>inline code</code>, <span class="spoiler">spoilers</span> and <mark>text highlighting</mark>.</p><h2>Text Formatting</h2><p>The editor supports <b>bold</b>, <i>italic</i>, <u>underline</u>, <s>strikethrough</s> text. Also <code>inline code</code> for technical terms, <span class="spoiler">spoilers for hidden content</span> and <mark>highlighting important fragments</mark>.</p><p>Links can have <a href="https://example.com" title="Example link" target="_blank" rel="nofollow">title and rel attributes</a>.</p><h2>Lists</h2><ul><li>Unordered list item</li><li>Drag items to reorder</li><li>Click the handle for menu options</li></ul><ol><li>Ordered list item</li><li>Convert via context menu</li><li>Or type <code>1. </code> at line start</li></ol><h2>Blockquotes</h2><blockquote>Standard quote created via block menu or by typing <code>> </code> at the start of a line. Click the handle on the left to choose a quote style.</blockquote><blockquote class="big">Large quote — perfect for highlighting key thoughts or article epigraphs.</blockquote><h2>Callout Blocks</h2><p>Callout is a block for important information with different styles. Click the handle on the left to select a preset:</p><aside>Standard callout without a class — gray, neutral.</aside><aside class="information">Information block — for helpful tips and additional info.</aside><aside class="warning">Warning — for important notices that need attention.</aside><aside class="danger">Danger — for critical warnings and errors.</aside><aside class="success">Success — for positive results and confirmations.</aside><h2>Images</h2><p>Click on an image to edit its settings:</p><figure><img src="picture.jpg" alt="Demo image"><figcaption>Image caption — click to edit</figcaption></figure><h2>Code Blocks</h2><p>For technical articles and tutorials:</p><pre><code class="language-javascript">// JavaScript example
function greet(name) {
    console.log(`Hello, ${name}!`);
    return true;
}

greet('World');</code></pre><h2>Tables</h2><p>Hover over the table to see control handles. Right-click or click the handle to open the menu:</p><table><thead><tr><th>Feature</th><th>Description</th><th>Shortcut</th></tr></thead><tbody><tr><td>Heading 1</td><td>Large heading</td><td><code># </code></td></tr><tr><td>Heading 2</td><td>Medium heading</td><td><code>## </code></td></tr><tr><td>Heading 3</td><td>Small heading</td><td><code>### </code></td></tr><tr><td>Bullet list</td><td>List with dots</td><td><code>- </code> or <code>* </code></td></tr><tr><td>Numbered list</td><td>List with numbers</td><td><code>1. </code></td></tr><tr><td>Quote</td><td>Blockquote</td><td><code>> </code></td></tr><tr><td>Callout</td><td>Important info block</td><td><code>! </code></td></tr></tbody></table><h2>Video</h2><p>YouTube videos automatically become responsive:</p><div class="redactix-video-wrapper"><iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div><hr><p>The character and word counter is displayed in the bottom right corner. Try all the editor features!</p>

Getting Started

Set up Redactix in your project in minutes.

1

Include the Files

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>
                        

2

Add a Textarea

Create a textarea element with initial content (optional).

<textarea class="redactix">
  <p>Your initial content here...</p>
</textarea>
                        

3

Initialize the Editor

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' }
  ]
});
                        

Configuration Options

`selector`

CSS selector for textarea elements to transform into editors. Default: .redactix

`calloutPresets`

Array of custom callout styles. Each preset needs name, label, and class properties.

`quotePresets`

Array of custom blockquote styles. Same structure as callout presets.

`uploadUrl`

URL endpoint for image uploads. Enables drag & drop, paste, and file picker. Default: null

Image Upload

Built-in support for drag & drop, paste, and file picker with a secure PHP backend.

📩

Drag & Drop

Simply drag images from your desktop or file manager directly into the editor. Visual feedback shows where images will be inserted.

📋

Paste from Clipboard

Copy an image and press Ctrl+V to insert it. Works with screenshots, copied images from browsers, and image editors.

📁

File Picker

Click the Image button in the toolbar to open a modal with file upload zone. Drag & drop works there too.

Setting Up Image Upload

1

Configure the Upload URL

Pass the uploadUrl option when initializing Redactix. This enables all upload features.

new Redactix({
  selector: '.redactix',
  uploadUrl: '/upload.php'  // Your upload endpoint
});
                        

2

Use the Included PHP Script

Redactix comes with a secure upload.php script. Configure the settings at the top of the file.

// upload.php configuration
$uploadDir = __DIR__ . '/uploads/';      // Where to store files
$uploadUrlPrefix = '/uploads/';          // URL prefix for images
$maxFileSize = 5 * 1024 * 1024;           // 5MB limit
$csrfToken = null;                        // Optional CSRF token
                        

3

Create the Uploads Directory

Make sure the uploads directory exists and is writable. The script will create .htaccess automatically for security.

mkdir uploads
chmod 755 uploads
                        

Built-in Validation

MIME Type Check

Files are validated by actual content type using finfo, not just extension. Supports JPEG, PNG, GIF, WebP, AVIF, HEIC, and SVG.

Image Content Check

Raster images are verified with getimagesize(). SVG validated as XML. HEIC passed through as-is.

Random Filenames

Original filenames are discarded. Files are saved with random 32-character hex names to prevent conflicts.

Error Handling

All errors (disk full, invalid file, permissions) are returned as JSON and displayed to the user in the editor.

Security Note

The included upload.php is a basic example. For production use, add your own security measures: authentication, CSRF tokens, rate limiting, and file storage outside web root.

Server Response Format

Your upload endpoint should return JSON with these fields:

{
  "success": true,
  "src": "/uploads/abc123.jpg",   // Required
  "srcset": "",                    // Optional
  "alt": "",                       // Optional
  "title": "",                     // Optional
  "caption": ""                    // Optional
}
            

All fields except src are empty by default. Customize the PHP script to auto-generate alt text, srcset, or captions if needed.

Why I Built This

The WYSIWYG landscape is broken. Here's what's wrong with it.

💰

Enterprise Pricing

CKEditor, Imperavi... Great features, but licensing costs can reach thousands per year. Not everyone has that budget.

💔

Stuck in 2012

jQuery-based editors with outdated UX. Clunky toolbars, messy HTML output full of inline styles and deprecated tags.

📦

Framework Lock-in

Modern alternatives require React, Vue, or 100+ npm dependencies. Good luck integrating that into a simple PHP project.

🎯 The Goal

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.

📄 Why HTML, Not Markdown?

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.

💦 Clean Output

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.

✨ Built with Vibe Coding

This entire editor was vibe-coded with Claude Opus 4.5. I described what I wanted, iterated on feedback, and watched the magic happen. Is it perfect? No. Does it work exactly how I need it? Absolutely.

$20 AI costs

3 days of “work”

0 dependencies

Even this landing page was vibe-coded in just a couple of prompts 😅

Fëdor Ananin

Wannabe founder

I travel with my cat and try to make this world a little bit better.

GitHub LinkedIn