HTML WYSIWYG editor

A WYSIWYG (What You See Is What You Get) editor lets you format text visually, like in a word processor, while it produces the HTML for you. It is useful for writing content for CMS fields, product descriptions, email snippets and documentation when you do not want to write tags by hand.

How to use it

1. Type and format text with the toolbar: headings, bold, italic, lists, links, quotes and code.
2. Watch the HTML source update.
3. Copy the HTML and paste it where you need it.

Example

Typing a heading Shipping, a sentence with a bold word and a two-item bullet list produces HTML like:

<h2>Shipping</h2>
<p>Orders ship within <strong>2 business days</strong>.</p>
<ul>
  <li>Free over 50</li>
  <li>Tracking included</li>
</ul>

Why use it instead of copying from Word or Google Docs?

Pasting from office software brings along inline styles, fonts, spans and hidden classes that clutter the HTML and clash with your site's design. A structural editor produces clean semantic tags that inherit your site's styling.

Tips for clean, accessible content

• Use real heading levels in order rather than bold text as headings; screen readers and search engines rely on them.
• Write descriptive link text instead of click here.
• Use lists for lists, not lines starting with dashes.
• Keep paragraphs short for readability on mobile.

Everything runs in your browser; nothing is saved on a server, so copy your HTML before closing the page.