PrettifyPrettify
DocsHome

Docs / Formats

HTML

Last updated:

Prettify shows an HTML page in a safe Preview and as source in a Raw view. It formats HTML with Prettier when you ask. The Preview, the Raw view, and formatting are free. Side by side editing is a Pro feature.

This page is for anyone who opens HTML files: saved web pages, email templates, exported reports, and pages from other tools.

Open HTML

Open a .html or .htm file, or paste HTML into the editor at /app/editor. Prettify detects HTML when the text starts with <!doctype html or <html. A file with the .html or .htm extension is always HTML.

An HTML fragment, for example <div>Hello</div>, is not a full page. Prettify reads a fragment as XML. To read it as HTML, pick HTML in the format list. Prettify then shows an empty HTML tab. Paste the fragment into that tab.

Prettify does not format HTML when you paste or open it. Your text stays exactly as it came in.

Views

The view switcher offers three views for HTML.

  • Preview: the page, drawn in a sandboxed frame.
  • Raw: the HTML source as plain text.
  • Both: the source and the Preview side by side (Pro).

The Preview is safe

The Preview shows the page in a sandboxed frame. The frame has no access to the storage or data of Prettify.

  • Scripts never run. The page can look different from the page in a browser if scripts draw its content.
  • The page makes no network requests. The one exception is images, when you select Load remote images.
  • Links to other pages do nothing. Links to a place in the same page, such as #section, scroll the page.
  • Audio and video do not play.
  • A frame inside the page shows nothing.

Two notices tell you what the Preview left out:

  • "This page has scripts. They do not run in the preview."
  • "Remote images are blocked."

Load remote images

Prettify blocks images from the internet by default. A remote image can tell its server that you opened the page.

Select Load remote images to show them. The choice applies to the current document only. Prettify does not remember it. When you open the document again, remote images are blocked again.

Images that are inside the page as data: URIs always show.

Data URI chips in the Raw view

HTML pages often hold images as data: URIs. One URI can be several megabytes of text. In the Raw view, a data: URI of 1 KB or more shows as a short chip. For example: data:image/webp · 312 KB.

  • Select a chip to copy the full URI.
  • In edit mode, the URI shows as a token, for example data:image/webp;base64,⟦prettify-uri-0 · 312 KB⟧. The token keeps the full URI when you save.
  • Edit and save the document as usual. Prettify keeps the exact source, including every URI.
  • If you delete a chip, you delete that image.

Smaller URIs stay as text.

Format document

Select Format in the toolbar, or press Cmd+K and run Format document. Prettify formats the HTML with Prettier.

  • The text of <style> and <script> elements stays as you wrote it.
  • Whitespace that changes how the page looks stays in place.
  • Every data: URI stays byte for byte.
  • If Prettier cannot format the page, or formatting would lose a data: URI, the text does not change. Prettify shows an error.

Each format adds one version to History.

Side by side (Pro)

Both shows the source and the Preview next to each other. The Preview reloads after you stop typing for a short time. The pause is longer for a source over 1 MB.

Both is a Pro feature named HTML Side by Side. Free users get one try per day. See Pro for the full list.

Large files

A document over 5 MB opens and edits as normal. Prettify does not save History versions for it. A notice says: "This file is too large to keep in History."

Problems panel

The Problems panel shows two notes for HTML. Both are information only.

  • The page has scripts, and they do not run in the Preview.
  • The page links to external files, for example a style sheet, that the Preview cannot load.

Download

Download saves the document as a .html file. Copy and Download write the exact source.