How the visual HTML editor works
The editor above is built on Quill 2, an open-source rich text editor. You type and format text in the left panel, and Quill keeps the underlying HTML in sync. The right panel shows a plain-text preview of the same content (formatting removed), which is handy for checking what a text-only email or a search snippet would contain. On a phone, switch between the two with the Editor and Preview tabs.
The toolbar covers:
- Headings 1 to 6, three font families (sans serif, serif, monospace), and four text sizes
- Bold, italic, underline, strikethrough, text color, and highlight color
- Alignment, numbered and bulleted lists, indentation, and right-to-left text
- Blockquotes, code blocks, links, images, and embedded videos
- A clear-formatting button that strips styling from the selected text
Standard shortcuts work too: Ctrl + B, I, and U for bold, italic, and underline, and typing - or 1. at the start of a line starts a list. Click Source to open the generated HTML in a code editor, change it, and apply it back.
What the generated HTML looks like
Say you type a short release note: a heading, a centered line with one bold phrase and one word in red, two bullet points, and a code block. Copy HTML gives you this (line breaks added here for readability; the real output is on one line):
<h2>Release notes</h2>
<p class="ql-align-center">Fixed <strong>login timeout</strong> and
<span style="color: rgb(230, 0, 0);">red</span> badge</p>
<ol>
<li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Item one</li>
<li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>Item two</li>
</ol>
<div class="ql-code-block-container" spellcheck="false">
<div class="ql-code-block">npm run build</div>
</div>
Headings, paragraphs, bold, and links come out as ordinary tags. Links get target="_blank" and rel="noopener noreferrer" added automatically. Colors are inline styles, so they survive anywhere. The rest needs a closer look.
Markup that depends on Quill's stylesheet
- Bullet lists are
<ol> elements. Quill 2 stores both list types as <ol> and marks bullets with data-list="bullet". Pasted into another site, they display as numbered lists.
- Alignment, indentation, font, and size are classes such as
ql-align-center, ql-indent-1, ql-font-serif, and ql-size-large. Without Quill's CSS they do nothing.
- Code blocks are
<div> elements, not <pre>, so they lose their monospace look elsewhere.
Two fixes: load Quill's stylesheet on the destination page and wrap the HTML in <div class="ql-editor">, or stick to headings, paragraphs, inline formatting, and links when the HTML is headed for a CMS or email template you do not control.
Importing existing content
Import File accepts .html and .txt files, and Import URL fetches a page from your browser. Either way, the import replaces what is in the editor, and the HTML is run through Quill, which keeps only what it can represent. This page:
<h1 id="top" class="hero">Title</h1>
<div class="card" style="padding:20px">Card text</div>
<p style="text-align:right;font-weight:bold">Signed</p>
becomes:
<h1>Title</h1>
<p>Card text</p>
<p class="ql-align-right"><strong>Signed</strong></p>
Things to expect when importing:
- Ids, classes,
<style> blocks, and the <head> are dropped. Buttons and form fields become plain text.
- Scripts are never run, but their source code can end up as visible text. Delete it after importing a full web page.
- A
.txt file is read as HTML, so its line breaks collapse and the whole file lands in one paragraph.
- Import URL only works for sites that allow cross-origin requests. Most web pages do not; raw files on GitHub do.
Saving and exporting
Your content is saved to your browser's local storage every 2 minutes, and right away when you press Ctrl + S. It comes back automatically the next time you open the page in the same browser. Only one document is stored, and nothing is kept on a server, so a different browser, a private window, or cleared site data means a blank editor. If you leave the page with changes that have not been saved yet, the browser asks you to confirm.
Images inserted from the toolbar (PNG or JPEG from your device) are embedded as base64 text inside the HTML. That makes the HTML self-contained, but large photos inflate it quickly, and browsers cap local storage at a few megabytes per site. Past that limit auto-save stops working, so link to hosted images for anything big.
Download HTML saves the fragment as content.html. Download Word saves content.doc, which is the same HTML wrapped for Microsoft Word. Download TXT and Copy Text give plain text with all formatting, images, and videos removed.
What this editor does not do
- It edits content, not whole pages. There is no way to add a
<head>, meta tags, custom classes, or your own CSS.
- There is no table button, and no form, column, or layout tools.
- The preview panel is plain text, not a rendered view of the HTML.
- There are no accounts, cloud storage, sharing, or version history.
When to use a different tool
Frequently asked questions
How do I get the HTML code from the visual editor?
Click Copy HTML to put the markup on your clipboard, or Download HTML to save it as content.html. To read or change the markup first, click Source, which opens the HTML in a code editor. The HTML is a fragment of the content only, with no html, head, or body tags.
Where is my work saved, and how long does it stay?
The editor saves your content to your browser's local storage every 2 minutes, and immediately when you press Ctrl+S (Cmd+S on Mac). It is restored the next time you open the page in the same browser. Only one document is kept. Clicking Clear, clearing your browser's site data, or using a private window removes it, so download anything you need to keep.
Why do my bullet lists show up as numbered lists when I paste the HTML somewhere else?
The editor is built on Quill 2, which writes every list as an ol element and marks bullet items with data-list="bullet". Inside the editor, Quill's stylesheet draws the bullets. Other sites do not have that stylesheet, so they show numbers. Either load Quill's CSS and wrap the HTML in an element with the class ql-editor, or change those ol tags to ul by hand.
Can I edit the HTML source directly?
Yes. Click Source, edit the markup, then click Apply Changes. The HTML is converted back through Quill, so only formatting Quill supports is kept. Class names, ids, most inline styles, style blocks, and form elements are removed.
Does the Word download open in Microsoft Word?
Yes. The .doc file is HTML wrapped in Microsoft Office markup, which Word can open. Word may warn that the file format and extension do not match. Headings, bold, italic, links, and text colors carry over. Alignment, fonts, sizes, and indentation rely on Quill class names and are lost, and bullet lists appear numbered because Quill stores them as ol elements.
Is the editor free, and is my content sent to a server?
It is free and needs no account. Editing happens in your browser and the content is not uploaded. Import File reads the file locally. Import URL fetches the page directly from your browser, so it only works when that site allows cross-origin requests.