Skip to content
CornerTools

HTML Viewer

Preview HTML as a page, safely, and format or minify the code.

1
Output
Width
The page shows here.
Characters: 0
Format
Indent
Over
attributes

Paste HTML or open an .html file to see it as a page, and switch to the code to read it indented or minified. Saved web pages, email templates and exported reports open the same way on a phone as on a computer.

The preview runs in a sandbox, cut off from this site, and the page's scripts stay off unless you turn them on. Your HTML is never uploaded. With external resources on, the images, styles and scripts it links to load from their own servers.

Options

  • Output — Preview shows the page; Code shows the formatted HTML. Copy and Download always take the formatted code.
  • Width — Full, Tablet (768 pixels) or Phone (375 pixels), 600 pixels tall. A width wider than the screen is scaled down to fit, and the scale is shown.
  • Run scripts — off by default, and off again each time you open the tool.
  • External resources — on by default. Turned off, nothing outside the HTML itself loads: no images, styles, fonts, scripts or frames from other servers. Images and fonts embedded as data: URLs still show.
  • Full screen — shows the preview on the whole screen. Safari on iPhone cannot show part of a page full screen, so the button is unavailable there.

The sandbox gives the page no access to this site, its storage or its cookies. Forms do not submit, alerts and other dialogs are blocked, and the page cannot take over this tab. Links open in a new tab, and links to a section of the same page, such as a table of contents, jump within the preview.

  • Format — Pretty puts each block element on its own line, indented by its depth; text and inline elements such as <b> stay on their line. Minified collapses whitespace.
  • Indent — 2 spaces (the default), 4 spaces or a tab, for Pretty.
  • Format CSS and JS — for Pretty, formats the code inside <style> and <script>. Off, that code keeps its own lines and is only indented.
  • Attributes on separate lines — for Pretty, puts each attribute on its own line when a tag has more than the number you set (3 by default).
  • Remove comments — for Minified. Conditional comments (<!--[if mso]>), which Outlook and other email clients read, are kept.

Opening a file reads its encoding the way a browser does: a byte order mark first, then a <meta charset> or Content-Type in the first 1024 bytes, then an XML declaration; otherwise UTF-8. The formatted code is UTF-8, so a <meta> naming another encoding is rewritten to UTF-8, and a note says so. Download saves it as <name>.formatted.html, or formatted.html for pasted HTML.

What minifying changes

Minifying here is conservative. Every run of spaces, tabs and line breaks becomes one space, never none: between inline elements a space is rendered, and removing it joins words. Inside tags, the space between attributes collapses the same way, and attribute values are kept exactly as written.

<pre>, <textarea>, <script> and <style> are kept verbatim, so CSS and JavaScript are not minified. Text that a stylesheet shows with its spacing intact, through white-space: pre, is still collapsed, because the minifier does not read CSS.

Examples

An email template on one line, pretty-printed

Input
<table width="100%"><tr><td><h1>Your order has shipped</h1><p>Hi Asha, order <b>#1042</b> is on its way.</p><a href="https://example.com/track">Track it</a></td></tr></table>
Pretty, default options
<table width="100%">
  <tr>
    <td>
      <h1>Your order has shipped</h1>
      <p>Hi Asha, order <b>#1042</b> is on its way.</p><a href="https://example.com/track">Track it</a>
    </td>
  </tr>
</table>

Each table element and block goes on its own line. The paragraph keeps its <b> on one line, and the link, an inline element, stays beside it as in the input.

A product card, minified with comments removed

Input
<div class="card">
    <!-- product photo -->
    <img src="https://example.com/mug.jpg" alt="Mug">
    <p>
        Blue mug,
        <strong>₹450</strong>
    </p>
</div>
Minified, Remove comments on
<div class="card"> <img src="https://example.com/mug.jpg" alt="Mug"> <p> Blue mug, <strong>₹450</strong> </p> </div>

The indentation becomes single spaces, so “Blue mug,” and the price keep the space between them.

Frequently asked questions

Tap Open file above the input and pick the file from your downloads or files app. An HTML file attached to an email needs saving to the phone first. The preview shows the page; Code shows its source.
Files saved next to the page, such as images/logo.png or a page_files folder, are given by relative paths, and the preview has only the HTML, not the folder. A note under the preview says when the page uses them. Images given by a full web address load while External resources is on, unless the server refuses requests from other sites.
With scripts off, the page can show content but cannot run code, submit forms or redirect itself. It never reaches this site, your other tabs or your cookies, even with scripts on. Turn External resources off for an email you do not trust: tracking images report to their sender that the email was opened, and from which IP address. With scripts on, the page's code can send what the page contains to another server, by loading resources or opening another page, so turn them on only for HTML you trust.

See also