HTML WYSIWYG Editor

Overview

A rich text editor built on the browser's contentEditable: a formatting toolbar with bold, italic, underline, strikethrough, H1 and H2 block formatting, ordered and unordered lists, and a clear-formatting button, plus a live two-way HTML source panel. The HTML output is whatever the browser produces from your edits, copied in one click. All editing is local.

How It Works

Type in the visual canvas on the left and use the toolbar buttons to format; each button issues the corresponding editor command at your caret. The HTML source panel on the right always mirrors the canvas, and editing the source directly updates the canvas in return, so you can hand-tune the markup and continue editing visually. The Copy HTML button places the current markup on your clipboard.

Step-by-Step Usage Guide

1. Type or paste content into the visual canvas.
2. Select text and apply bold, italic, headings, or lists with the toolbar.
3. Fine-tune the markup directly in the HTML source panel; the canvas follows your edits.
4. Copy the final HTML with the copy button.

Technical Specifications & Standards

Under the hood every toolbar button calls document.execCommand, the browser command API that predates modern selection libraries: bold, italic, underline, and strikeThrough toggle inline styles, formatBlock with H1 or H2 changes the block element at the caret, insertUnorderedList and insertOrderedList toggle list structures, and removeFormat strips inline styling from the selection. execCommand is formally deprecated but still implemented in every major browser, which is why this simple editor works; what deprecated means here is that behavior details are frozen and inconsistent between engines rather than that it will stop working. The two-way sync works because both the canvas and the textarea read and write innerHTML: the canvas pushes on every input event, and the textarea writes back on change, with the canvas re-rendering from the string. Three consequences for the output. Browsers do not agree on generated markup, so the same edits can produce b versus strong, or style attributes versus semantic tags, depending on the engine; expect clean-up if the HTML must meet a house style. Pasted rich text from other applications brings its own markup along, often including spans and inline styles that removeFormat only strips where selected. And the round trip is string-based, so hand-edited invalid HTML can be silently re-normalized by the parser on the next canvas update.

Targeted Use Cases

• Drafting CMS or email content where you need both visual editing and raw HTML access.
• Producing HTML snippets for a blog without a heavyweight editor library.
• Cleaning up and hand-adjusting formatting that a toolbar round trip did not get right.
• Demonstrating how contentEditable and editor commands behave across browsers.

Notes & Gotchas

• Inspect the HTML panel after formatting; browsers emit different tags for the same command, and pasted text carries foreign markup.
• Use Clear formatting on pasted content first, then re-apply your own styles, to shed imported spans and inline styles.
• Prefer H1/H2 and list commands over manual markup for blocks, so the source stays consistent.
• Treat the HTML panel as the source of truth for anything structural, since hand edits there are what the canvas will re-render.

Frequently Asked Questions