About HTML Code Viewer

Why I built it

I kept needing the same small thing: paste a chunk of HTML, see it render, and find out why it looks wrong. The viewers I tried mostly showed the page and stopped there. One formatter put a visible space inside a<b>b</b>c, another squeezed the spaces out of a <pre> block, and some let the previewed code reach the page around it. The safety section has a script that checks that last one in any viewer.

So I built HTML Code Viewer. You paste code, open an .html file or load the source of a public page, and it renders in a sandboxed frame while you type. Under the preview you get the page’s console, the problems in its markup with line numbers, and a few facts about it, such as its size and whether the browser drew it in standards or quirks mode. Pick element jumps from anything you click in the preview to the tag that drew it. Download saves the editor text as UTF-8 with nothing wrapped around it (a file you opened and didn’t edit comes back byte for byte; after edits, a meta charset naming another encoding becomes utf-8), and 12 small examples are there if you just want to poke at something.

What it won’t do

It shows one file. A stylesheet or image linked with a relative path, like styles.css, has nothing to load, so link those by full address. Load source fetches what a server sends before any JavaScript runs, which means pages built in the browser look nearly empty, and pages behind a login can’t be fetched at all. The preview is your own browser, not Outlook or a phone you don’t have, so an email can still look different in a mail client. PHP and template tags appear as plain text. Scripts can’t use cookies or storage inside the sandbox.

How I check it

One bug that nearly shipped: Minify kept Outlook’s opening conditional comments but dropped the closing <!--<![endif]-->, which would have hidden the rest of an email in Outlook. A test with a full order email caught it before launch. There’s a test for that exact comment now.

Who runs it

I’m Jurgen Pine. I build and run HTML Code Viewer on my own. The site counts visits and which features get used with its own analytics, never the code you paste. The privacy policy spells out what is stored and how to switch counting off.

Spotted a mistake?

If the preview, a formatter result or anything written here is wrong, tell me through the contact page. A share link to the code that misbehaves is the most useful thing you can send.