Rich text editor demos
93 live examples running the real editor. Edit the content, then inspect the code.
Start here
Real-world examples
The editor inside the kind of product you may be building.
Block document
A block workspace with a slash menu, drag handles, callouts and checklists.
Chat composer
A compact chat input: Enter sends, Shift+Enter adds a line.
Contract review
Clause numbering, cross-references, tracked changes and comments.
Email campaign
Merge fields, sample-data preview and HTML with inline styles.
AI
AI writing tools, and how to connect your own provider.
AI Toolkit
Ask AI, AI Chat, inline preview and AI Review, with no API key needed.
Streaming responses
Show AI responses as they arrive, and stop them mid-stream.
AI toolbar buttons
Control where the AI buttons appear on the toolbar.
Bring your own key
Let each tenant store their own AI provider key on your server.
Provider setup in C#Code only
Connect OpenAI, Anthropic or Azure OpenAI from ASP.NET Core.
Writing & formatting
Everyday editing, document structure and proofing.
Paragraph & inline styles
Named styles and restricted font, size and line-height menus.
Tables
Create and edit tables, rows, columns and cells from built-in dialogs.
Find & replace
Match case, whole word and regular expressions; Replace All is one undo.
Slash commands
Type / to insert headings, lists, tables and code blocks.
Document templates
Start a document from a searchable list of your own templates.
Special characters
Currency, arrows, maths and Greek letters in a searchable picker.
Footnotes, format painter & case
Self-numbering footnotes, a format painter and change case.
Pagination & legal numbering
A4, Letter and Legal page view, headers, footers and 1.1.1 numbering.
Word-processor tools
Watermarks, line numbers, formatting marks and layout tables.
Writing assistance
Autocorrect, ghost-text completion, readability and focus modes.
Rich blocks & table tools
Bookmark cards, smart chips, sortable columns and row numbers.
Math & equations
The built-in TeX equation editor, or connect WIRIS and MathType.
Spell checking
Browser spell check, or connect the service you license.
Dictation
Speech-to-text from a toolbar button, with live transcripts.
Accessibility & languages
Accessibility checker, language markup, right-to-left text and read aloud.
Word count & limits
Live word and character counts, with an optional word limit.
Maximum length
Cap the length by visible text or by HTML markup.
Editable placeholders
Independently editable title and message fields.
Keyboard shortcuts
Add your own keyboard shortcuts.
Tab key
Choose what the Tab key inserts, or let it leave the editor.
Enter key
Make Enter insert a paragraph, a div or a line break.
Paste, images & media
Getting content into the editor from anywhere.
Paste from Word
Keeps lists, tables and images, and removes Office markup.
Paste from Excel
Paste spreadsheet cells as a clean table.
Paste as plain text
Paste text without its formatting.
Clean up pasted content
Disable paste, force plain text or clean up Word content.
File upload
Attach documents and archives with your own upload handler.
Drag & drop images
Drop an image from the page or your desktop to insert it.
Drag & drop content
Drag text from a web page into the editor.
Image editing
Crop, rotate, draw and annotate images inside the editor.
Predefined links & images
Offer your own pages and images in the link and image dialogs.
Embed video
Insert a video from its URL and set its size.
Auto-embed media links
Paste a YouTube or Vimeo link to get a responsive embed.
Giphy
Search for GIFs and insert them from a custom toolbar button.
Code snippets
A dropdown that inserts your predefined code.
Code blocks & source view
Syntax-highlighted code blocks and a built-in HTML source view.
Diagrams (Mermaid)
Flowcharts, sequence diagrams and charts written in Mermaid.
Collaboration & review
Working on a document with other people.
Real-time collaboration
Two editors kept in sync by Yjs, with shared presence.
Threaded comments
Comments anchored to text, with replies and resolve.
Tracked changes
Suggesting mode: accept or reject each edit, as in Word.
Revision history
Browse and compare past versions of a document.
@Mentions
@ mentions, # tags and [[wiki]] links with async data.
Mentions from a directory
Look up people in your directory, or attach Tribute.js yourself.
Restricted editing & link checker
Lock a template except marked fields, and flag unsafe links.
Import & export
Getting content out in the format you need.
Export to PDF
Download a tagged PDF with selectable text, or a print-style copy.
Export to Word (DOCX)
Convert headings, lists, tables and images to a .docx file.
Import files & local drafts
Import .docx, Markdown, HTML and text, and autosave drafts locally.
Markdown
Import and export Markdown, with RichMarkdown as a real production app example.
Structured JSON
Convert content to JSON and Markdown, render it and validate it.
HTML output rules
Choose the tags, whitelists and colour format the editor saves.
XHTML output
Generate stricter markup for XHTML publishing pipelines.
BBCode output
Generate BBCode for forums and similar systems.
Plain text output
Reduce formatted content to simple text.
Relative & absolute URLs
Compare how relative and absolute URLs are saved.
Content security (XSS)
Run real XSS payloads and see what the sanitizer stops.
Look & layout
Toolbars, themes, size and language.
Default toolbar
The full default editor: try everything in one place.
Basic editor
A short toolbar with the controls most teams use every day.
Custom toolbar
Add, remove and regroup toolbar buttons.
Responsive toolbar
Separate toolbars for desktop and mobile screens.
Mobile toolbar
Large tap targets, a scrolling toolbar and bottom-sheet menus.
Sticky toolbar
Keep the toolbar in view while a long document scrolls.
Distraction-free writing
Reading mode, focus mode, typewriter scrolling and full screen.
Dark mode
A dark toolbar and dialogs, or follow the system setting.
Skins
Restyle the editor with built-in skins or your own CSS.
UI language
Switch the editor's interface language.
Editor size
Set a fixed or percentage size, or change it at runtime.
Auto-grow
The editor grows with its content instead of scrolling.
Resize handle
Let people resize the editor by dragging its corner.
Full page editing
Edit complete HTML documents, including the head.
Multiple editors
Run several editors on one page.
Developer API
Controlling and extending the editor from your code.
JavaScript API
Read and update content and run commands from your own code.
Headless editor
Drive the editor with your own buttons and read its state.
Get & set HTML
Read the current content as clean HTML.
Insert HTML
Insert HTML at the caret or at the end of the document.
Save & load content
Store content in a database and load it back.
Editor in a form
Post the editor's HTML with the rest of a form.
Read-only mode
Use the editor as a read-only document viewer.
Create & destroy on demand
Create an editor when someone clicks Edit, then destroy it.
Custom button
Add a toolbar button with your own icon and command.
Custom dropdown
Build menus, panels and selects for the toolbar.
Custom dialog
Open your own dialog and insert what it collects.
Built-in plugins
PDF export, emoji, code blocks, gallery and templates together.
Default configuration
Run the editor with no toolbar or plugin customization.
Developer tools
State inspector, minimap, custom node types and Shadow DOM.
Large documents
Time loading, saving and undo on up to 10,000 paragraphs.
Try it with your own content
Download the evaluation package and run any of these demos in your app. No sign-up.