Rich Text Editor
Bold, links, lists — and a toolbar that knows what's under the caret.
AdvancedWeb appUI component16–34hAI-buildable 3/5no setup
A contenteditable editor with formatting, a floating selection toolbar, and markdown shortcuts. contenteditable is famously hostile, and taming it — especially keeping the toolbar in sync with the current selection — is the entire lesson.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Bold, italic, headings, lists and links
- A floating toolbar appears over the current selection
- The toolbar reflects the formatting under the caret
- Markdown shortcuts convert as you type
- Pasted content is sanitised to allowed formatting only
- Undo and redo behave predictably across formatting changes
- Content serialises to a structured format, not raw HTML
The interesting part
- contenteditable behaves differently across browsers
- Tracking selection state without fighting the browser's own handling
- Sanitising paste without destroying legitimate formatting
Once it works
- Add image embedding with drag and drop
- Add slash commands for block insertion
- Add collaborative editing
Suggested stack
reacttypescripttailwind