HTML WYSIWYG editor — Guide
Online, feature-rich WYSIWYG HTML editor which generates the source code of the content immediately.
What it is and when to use it
A rich-text editor in the browser with the generated HTML shown beside it, run through Prettier so the source stays readable. It is Tiptap with the StarterKit bundle, which means the toolbar covers the paragraph-level building blocks: bold, italic, strikethrough, inline code, code blocks, headings 1–4, bullet and ordered lists, blockquote, horizontal rule, clear formatting and undo/redo. Your draft is kept in browser storage so a reload does not lose it, and nothing is uploaded anywhere.
A WYSIWYG rich-text editor whose HTML source you can grab once you are done editing.
How to use it
- Type or paste into the editing area
- Use the toolbar to adjust formatting
- Copy the generated HTML from the panel below
Things that trip people up
- Tables, images and links are outside the loaded schema — they will not appear, however you paste them in.
- The HTML panel is read-only output: copy from it, do not type into it.
- The draft is stored in this browser only, so it survives a reload but not a different device.
Questions people ask
- How clean is the generated HTML?
- Cleaner than most. StarterKit renders marks and nodes as plain semantic elements — <strong>, <em>, <h2>, <ul><li>, <pre><code> — without the inline style attributes that Word and page builders leave behind. Prettier then re-indents the result. Review it anyway when the HTML goes into a template with its own CSS.
- Can I paste from Word or a web page?
- You can, but the editor does not keep what it does not understand. Content is parsed against the loaded schema, so spans, classes and empty paragraphs from Word are dropped rather than carried over — which is usually what you want. Formatting that survives is the subset the toolbar can produce.
- Does it support tables and images?
- No. Only Tiptap StarterKit is loaded, and it has no table, image or link node, so there is no button for them and pasted tables or images are discarded on the way in. For those elements you need hand-written HTML in an editor whose schema includes them.
- Can I edit the HTML directly?
- No. The HTML panel is a formatted, copy-only view of what the editor produced — typing there does not feed back into the document. Format with the toolbar, then copy the source out.
- Will my text survive a refresh?
- Yes. The document is saved to this browser's local storage under the tool's own key, so it is still there when you come back. Clearing site data, or switching browser or machine, starts from the default sample text.
Next steps
Open the HTML WYSIWYG editor tool
- Markdown to HTML
- URL Encoder & Decoder
- Escape HTML entities
- URL parser
- Device information
- Basic auth generator
Spotted something wrong on this page? Tell us via Contact Us