WYSIWYG editor
A rich-text box where bold, headings, links, and other formatting appear directly as you type.
See it
What it is
A WYSIWYG editor is a writing surface where bold text looks bold, headings look like headings, and links look clickable while you edit. The initials mean 'what you see is what you get': unlike a Markdown or raw HTML editor, it shows the formatted result instead of the markup behind it. Microsoft Word is the familiar desktop version and WordPress put one in front of millions of bloggers; on the web, editors such as Tiptap and ProseMirror build a controlled document model over the browser's contenteditable surface.
Reach for one when writers need more structure than plain text but should not have to learn markup: articles, product descriptions, comments, or knowledge-base pages. Keep the toolbar limited to the formats the content actually supports, and store a structured document or sanitized HTML rather than treating the editable DOM as the source of truth.
Gotcha: paste is where rich-text editors earn their keep. Copying from Word or a website can bring stray styles, empty spans, and unexpected HTML, so normalize pasted content and allowlist the elements and attributes you save. Undo, keyboard shortcuts, selection state, and screen reader labels also have to survive every formatting command; a row of buttons around contenteditable is only the beginning.
Ask AI for it
Build a WYSIWYG editor with Tiptap and its StarterKit extension. Show a compact toolbar for paragraph, heading levels 2 and 3, bold, italic, bulleted list, numbered list, blockquote, link, undo, and redo, with pressed states driven by editor.isActive(). Give every button an aria-label and keyboard-visible focus ring, preserve standard shortcuts such as Ctrl+B and Cmd+B, and show a clear empty-state placeholder. Store Tiptap JSON as the document value, sanitize pasted HTML with DOMPurify, and strip unsupported styles and elements. Keep the toolbar sticky inside the editor, make the content area at least 12rem tall, and expose validation and disabled states.