Full Editor Scenario

Redactix Notion-like WYSIWYG Editor Examples

A zero-dependency vanilla JS WYSIWYG editor with Notion-like slash commands, drag-and-drop blocks, image uploads, and clean semantic HTML output.

<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 or add an emoji:</p><aside>Standard callout without a class — gray, neutral.</aside><aside data-emoji="💡" class="information">Information block — for helpful tips and additional info. This one has an emoji! Click on it to change.</aside><aside class="warning">Warning — for important notices that need attention.</aside><aside data-emoji="🔥" 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="uploads/cat.jpg" alt="Cute Cat" title="Cute Cat"><figcaption>Images support captions, alt text, and custom attributes.</figcaption></figure><h2>Code Blocks</h2><p>Click on the code block to edit it in a modal with syntax highlighting:</p><pre><code>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>

Keyboard Shortcuts

Work faster with these Notion-like shortcuts.

Shortcut	Action	Description
`/`	Slash Commands	Opens block menu (h1, h2, quote, code, etc)
`#`	Heading 1	Type at start of line + space
`##`	Heading 2	Type at start of line + space
`-` or `*`	Bullet List	Creates an unordered list
`1.`	Numbered List	Creates an ordered list
`>`	Blockquote	Creates a quote block
`!`	Callout	Creates a callout block
`---`	Separator	Inserts horizontal rule
`Ctrl+Z`	Undo	Revert last change
`Ctrl+Y`	Redo	Restore undone change
`Ctrl+F`	Find	Open find & replace panel

Full Editor Scenario

Redactix Notion-like WYSIWYG Editor Examples

Minimalist / Lite Mode

Global Ready

Custom Themes & Styles

Brand Accent (Purple)

Minimalist Monochrome

Keyboard Shortcuts

Clean HTML Output