HTML viewer, see the page as you type.

An HTML viewer shows what a piece of HTML code looks like as a web page. You paste the code, or open a file, and the page appears right beside it. This one updates as you type, runs the page in a sandboxed frame with scripts off unless you allow them, and previews it at phone, tablet and laptop widths. You can also format the code so it is easy to read, shrink it with the minifier, and save the result as an .html file. Everything happens in your browser.

How to use the HTML viewer

1. Click in the HTML box and paste your code. Or click Paste, or Open files to choose an .html file. You can also drop files on the box. The Examples under the box load a sample page to try.
2. The page shows on the right and updates a moment after you stop typing. Click Reload to run it again from the top.
3. Use Fit, Phone, Tablet or Laptop above the page to change its width. Type a number in Width for your own size. A wide size is scaled down to fit, and the readout says by how much.
4. Under Show, pick Side by side, Stacked (the page under the code, which gives it more width), Code only or Page only. Full screen opens the page over the whole window. Press Esc to leave.
5. Click Format to lay the code out one block to a line, or Minify to make it smaller. Both can be undone with Cmd or Ctrl and Z. On a very long page, an Undo button shows next to the status line instead.
6. Click Download .html to save the code. The file is named after the page title. Copy code puts it on the clipboard.

Scripts, outside files and why the frame is sandboxed

The page runs in an iframe with the sandbox attribute set. With Allow scripts off, no JavaScript in the page runs at all, so you can look at a snippet from an email or a forum without it doing anything. Switching Allow scripts on lets the page run its own scripts, and a Console strip appears under the page showing what it logs with console.log and any errors. Even then the frame has no access to this page, its cookies or its storage, and a page that tries to use localStorage will get an error. Links in the page open in a new tab.

The switch Load pictures, styles and fonts from other sites controls links such as an image from another website. Leave it on to see the page as it will look online. Turn it off to see only what is in your own code and files, which is a quick way to find out what the page depends on. The note under the page counts how many outside files it asks for.

Opening a page with its CSS, scripts and pictures

A saved web page often points to files next to it: style.css, app.js, logo.png. Choose them all together in Open files, or drop them all on the code box. The .html file goes into the editor and the others are matched by file name. A style sheet linked with link rel="stylesheet" and a script with a src are put into the page, and pictures, fonts and media are linked. Folders in the path are ignored, so two files with the same name in different folders will clash. Remove them clears the extra files.

Format and minify

Format puts each block element on its own line and indents what is inside it, using 2 spaces, 4 spaces or tabs from the Indent setting. Text and inline tags such as links and bold stay together on a line, and long lines are wrapped. Content in pre and textarea is left exactly as it is. Tags that were left open, such as a missing closing li or p, get their closing tag.

Minify removes comments (untick Remove comments when minifying to keep them) and the spaces between blocks, and shortens the code inside style tags. It keeps one space between inline items, because that space is visible. Code inside script tags is kept as written apart from the spaces at its ends, so a script is never changed in a way that could break it. The status line shows the size before and after.

Checking a layout at different widths

The frame is given the width you pick, so CSS media queries respond to it just as they would on a screen of that width. The example page called Pricing cards shows this: three cards side by side at Laptop, and stacked in one column at Phone, because its style says so at 480 pixels and under. Fit uses the space the preview has. If the code has a viewport meta tag, as a mobile page should, it is read, but the preview itself is not a phone, so touch and device pixel behaviour are not simulated.

Common problems

• The page is blank: check that the code has a body, or at least some visible tags. A script that builds the page needs Allow scripts on.
• Pictures are missing: relative paths such as images/a.png only work if you open the picture with the page. Or use full web addresses with the outside files switch on.
• A button or form does nothing: forms do not submit from the preview, and buttons that need a script need Allow scripts.
• Tab inserts spaces in the box, so the keyboard does not leave it. Press Esc, then Tab, to move on.
• Fonts look different: the preview uses the fonts your device has unless the page loads its own.

To turn a page into a document, use HTML to PDF. To write the content in plain text first, try the Markdown editor or Markdown to HTML. To tidy a data file, see the XML formatter.