What Is a WYSIWYG Editor?
WYSIWYG (What You See Is What You Get) is a type of editor that displays content during editing in a form closely resembling the final output. This tool provides a rich text editor powered by Tiptap and ProseMirror that outputs clean, semantic HTML. It supports common formatting options like headings, bold, italic, lists, code blocks, blockquotes, and horizontal rules.
How to Use This WYSIWYG Editor
- 1Type or paste content into the editor area.
- 2Use the toolbar buttons to format text: bold, italic, strikethrough, headings, lists, etc.
- 3Toggle headings with H1, H2, H3 buttons.
- 4Add code blocks, blockquotes, and horizontal rules from the toolbar.
- 5Enable Show HTML Output to see the generated HTML code.
- 6Copy the HTML output with the Copy HTML button.
Common Use Cases
Create HTML Email Content
Write formatted content and copy the HTML for use in email templates.
Generate Blog Post HTML
Draft blog posts with formatting and export clean HTML for your CMS.
Quick Rich Text Editing
Format text content visually without writing HTML by hand.
Frequently asked questions
What formatting options are available?
Bold, italic, strikethrough, inline code, headings (H1-H3), bullet lists, ordered lists, code blocks, blockquotes, horizontal rules, undo, and redo.
Is the HTML output clean?
Yes. The editor is powered by Tiptap/ProseMirror which produces clean, semantic HTML without unnecessary wrappers or inline styles.