HTML WYSIWYG Editor

Rich text editor with formatting toolbar that outputs clean HTML. Edit visually and copy the generated code.

HTML WYSIWYG Editor tool

Loading...

Example

Input: Type Hello world, select the word world and click Bold

Result: Hello <b>world</b>

The formatting applied in the editor is written out as HTML tags, which you can copy or edit directly in Code view.

  1. Type or paste your content into the editor.
  2. Use the toolbar to add bold, italic, headings, lists, links and block quotes.
  3. Select text and click a toolbar button to apply or remove formatting.
  4. Watch the Generated HTML panel update, or click Code to switch to the code view.
  5. Edit the raw HTML in code view if you need fine control.
  6. Click "Copy HTML" to copy the markup for your project.

Writing HTML Visually With a WYSIWYG Editor

This WYSIWYG editor lets you format text as you would in a word processor, and gives you the HTML behind it. Type in the editor, use the toolbar for bold, italic, headings or lists, and the HTML updates below as you work. Select "world" in "Hello world", click B, and the code reads Hello <b>world</b>.

WYSIWYG stands for "what you see is what you get". The toolbar covers bold, italic, underline, strikethrough, headings H1 to H3, paragraphs, bulleted and numbered lists, block quotes and links. A Clear button removes formatting from the selected text. The editor runs on the editing feature built into your browser, so the exact tags can vary a little. Most browsers write b and i rather than strong and em.

Switch to Code view to edit the markup by hand, for example to add a class, a table or an image. When you switch back to Visual, the HTML is cleaned for safety. Scripts, iframes, forms and style blocks are removed, along with event attributes such as onclick and any javascript: links. Links added with the toolbar must start with https://, http://, mailto:, tel:, / or #.

Pasting from Word or Google Docs brings along their extra markup, such as inline styles and spans. For clean output, paste as plain text (Ctrl+Shift+V in most browsers) and format with the toolbar. Your work is not saved, so copy the HTML before you leave the page. Then shrink it with the HTML Minifier, or turn it into Markdown with the HTML to Markdown Converter.

Frequently Asked Questions

The editor uses the formatting commands built into your browser, and most browsers write b and i. Both look the same on screen. strong and em add meaning, marking text as important or stressed, while b and i are only visual. If your style guide needs strong and em, change the tags in Code view.
Not from the toolbar, which covers text formatting only. Switch to Code view and type the img or table markup yourself. When you go back to Visual, the image or table shows in the editor and stays in the HTML output. Use full https:// addresses for images so they load wherever you paste the code.
The tool removes scripts, iframes, forms and event attributes when you switch from Code view to Visual, which blocks the most common risks. Still, treat it like any HTML you did not write line by line. Read it over, and let your CMS apply its own filters, especially if the content came from someone else.
No. Nothing is stored, not even in your browser, so refreshing or closing the page clears the editor. Click Copy HTML and paste the result somewhere safe before you leave. For longer pieces, write in your usual editor and use this tool for the final formatting step.

Related Tools

Markdown to HTML Converter

Convert Markdown text to clean, semantic HTML. Supports headings, lists, links, images, code blocks, tables, and more.

Text and Writing

HTML to Markdown Converter

Convert HTML code to clean Markdown syntax. Preserves headings, links, lists, images, bold, italic, and code formatting.

Text and Writing

HTML Minifier

Minify HTML by removing comments and collapsing whitespace between tags and inside tags to reduce document size.

Developer Tools

HTML Entity Encode and Decode

Convert special characters to HTML entities and decode HTML entities back to readable text.

Developer Tools

Meta Tag Generator

Generate HTML meta tags for SEO, Open Graph, and Twitter Cards with a live preview of search and social results.

Web and SEO Tools