Your HTML
Paste or type HTML here, open a file, or pick one of the examples above. With Live on, the preview updates as you type.
HTML Code Viewer
Paste HTML, open a file or load a live page's source. This HTML code viewer renders it as you type, and the console and markup problems show underneath.
Your HTML
Nothing to show yet. Paste or type some HTML.
Nothing logged yet. console.log() output, errors and failed images or stylesheets from the page appear here.
Shortcuts (⌘ on a Mac): Ctrl+Enter runs, Ctrl+F searches, Ctrl+S downloads, Esc then Tab leaves the editor
How to use the HTML code viewer
Paste or type
While Live is on, the HTML code viewer redraws as you type. On a phone, use the Paste button above the editor. Above about 400 KB, live preview pauses so typing stays quick; press Run or Ctrl+Enter.
Open a file
Open file, or drag an .html file onto the HTML code viewer. Code you paste or open in the HTML code viewer stays in your browser; files can be up to 10 MB. A file in another encoding, such as GBK, Shift_JIS or Windows-1252, opens correctly in the HTML code viewer; without a charset tag it guesses and tells you which one it used.
Load a live page
example.com | Source of example.com, status 200 |
| A page that blocks bots | Its 403 or 429 page, with that status in the title |
localhost, 192.168.x.x | Refused: private addresses |
Fetched once, without running scripts, so the HTML code viewer shows the raw HTML the server sent. 5 MB and 12 seconds at most.
Start from an example
Each one replaces what is in the HTML code viewer editor.
Preview width
Fit follows the width of the HTML code viewer panel. Phone is 390 px, Tablet 768 px and Laptop 1280 px; anything wider than the panel is scaled to fit. Media queries in your code fire at the chosen width, not your window’s.
Under the preview
Console
| Your page does | The Console shows |
|---|---|
console.log('hi', {n: 1}) | hi {n: 1} |
alert('Saved') | alert(): Saved |
confirm('Delete it?') | confirm(): Delete it? → returned true |
<form action="/signup" method="post"> submitted | Form not sent from the preview: POST /signup with name=Sam |
undefinedThing() | Uncaught ReferenceError: undefinedThing is not defined (line 10) |
while (true) {} | A loop ran for more than a second, so the preview stopped it. Check its exit condition (line 12) |
<img src="missing.png"> | Failed to load <img> missing.png |
alert() never opens a dialog in the HTML code viewer, so a page that alerts in a loop can’t lock you out. Forms don’t submit; you see what they would have sent.
Problems
- Line 9error<b> (line 9) is not closed before </div> on line 11.
- Line 10warning<img> has no alt attribute. Add alt="" for decorative images or a short description.
- Line 13warningDuplicate id "note" (first used on line 12).
- Line 14errorStray end tag </section>: no open <section> to close.
The HTML code viewer flags unclosed and misnested tags, stray closing tags, a quote or comment left open, a link inside a link, duplicate ids, images without alt, a block inside a <p>, stylesheets and scripts with relative paths, and Markdown fences or chat text pasted above the doctype. In the tool, clicking a row jumps to its line. Optional closing tags such as </li> are not flagged.
From the example, 4 of its 6 rows
Page info
The HTML code viewer lists the size, lines, tag counts, the page title, links, images and scripts, and whether the browser drew the page in standards or quirks mode.
Pick element
Turn it on, then click anything in the preview: the HTML code viewer selects the tag that drew it, with its line and column.
Format and minify
Neither changes how your page renders in the HTML code viewer or anywhere else. Text in elements your CSS sets to white-space: pre stays exactly as written.
Format
<ul><li><a href="/">Home</a></li><li><b>New</b> items</li></ul>
<ul> <li><a href="/">Home</a></li> <li><b>New</b> items</li> </ul>
The HTML code viewer formats with Prettier, CSS and JavaScript blocks included. a<b>b</b>c stays joined and <pre> keeps its spacing. 2 spaces, 4 spaces or tabs.
Minify
| Removes | Keeps |
|---|---|
| Ordinary comments | Outlook conditional comments, closing ones too |
| Extra spaces and line breaks | pre, textarea, script and style as written |
| Whitespace next to blocks | The space between two inline elements |
The HTML code viewer doesn’t rename anything or touch what is inside script and style tags.
Undo
After either one, the HTML code viewer shows an Undo button for a few seconds. Ctrl+Z works too, and takes back the whole change in one step.
Is the HTML code viewer safe?
Previews in the HTML code viewer run in a sandboxed frame. Scripts work, but they can’t read this page, its storage or your other tabs. That matters when you open a file a stranger sent you. You can check any HTML code viewer, this one included, by pasting this:
<script>
try {
var page = parent.document.body;
page.style.background = 'red';
document.write('Not sandboxed');
} catch (e) {
document.write('Sandboxed');
}
</script>Not every HTML code viewer passes.
Code you paste into the HTML code viewer is not sent to me. Share links carry it after the #, a part of the address browsers never send to a server. The privacy policy lists what is stored.
Emails, profile codes and AI-written pages
HTML email
Choose Phone after pasting a template into the HTML code viewer. Open the HTML code viewer in Safari and the preview is close to Apple Mail, since both use WebKit. Gmail strips some CSS and Outlook for Windows draws email with Word, so check those two separately.
Profile codes
Codes for sites like Toyhouse are often written with Bootstrap classes. Put the Bootstrap stylesheet link at the top and the HTML code viewer preview gets much closer to the real profile.
Pages an AI wrote
Paste what ChatGPT or Claude gave you into the HTML code viewer to see whether it really renders. Problems catches the tags it forgot to close; the Console catches scripts that throw.
When to use something else
The HTML code viewer handles one page at a time. Use View Source (Ctrl+U) for the page you’re on, though it’s read-only and hard to reach on phones. Use DevTools (F12) to see the page after its scripts run, and VS Code with Live Preview for a project with many files.
HTML code viewer FAQ
Is this HTML code viewer free?
- Yes. The HTML code viewer has no account, no usage limit and no ads.
Does the HTML code viewer run JavaScript and CSS?
- Both run, and console output appears in the Console tab of the HTML code viewer. Link other files by full URL; a relative path like styles.css has nothing to load.
Does the HTML code viewer work on iPhone and Android?
- Yes. On a phone the HTML code viewer turns Code and Preview into tabs and moves the less used buttons under More. Use the Paste button, or open a file from the Files app.
Why does a page loaded by URL look broken in the HTML code viewer?
- Load source brings in the HTML before any JavaScript runs, so pages built by scripts look incomplete in the HTML code viewer. A 403 or 429 in the panel title means the site refused.
How do I open the HTML code viewer preview full screen or save it as a PDF?
- Press the arrow button at the top right of the preview. Your page opens on its own in a new tab, outside the HTML code viewer, so your browser’s Print command prints all of it and can save it as a PDF.
How big a file can the HTML code viewer handle?
- Files up to 10 MB open in the HTML code viewer, and pages fetched by URL up to 5 MB. Above about 400 KB, press Run to update the preview.
Why does the HTML code viewer say quirks mode?
- The doctype line is missing from the top, so the browser uses old layout rules. Add it as the first line and Page info in the HTML code viewer will say Standards.
Can the HTML code viewer show an email I received?
- Yes: use Show original in Gmail or View, Message, Raw Source in Apple Mail, then paste the HTML part into the HTML code viewer. Lines ending in = are quoted-printable and need decoding first.
Is the HTML code viewer also an HTML editor?
- Yes. Besides showing pages, the HTML code viewer is a full editor with syntax colours, line numbers, Ctrl+F search, tag autocomplete, bracket matching and, on a computer, code folding.
Does the HTML code viewer save my code?
- Your latest code stays in this browser’s local storage, so the HTML code viewer still has it after a reload or tomorrow, up to about 2 million characters. A share link never replaces your own draft. To remove it, clear this site’s data in your browser.
Does the HTML code viewer run PHP or template tags?
- No. The HTML code viewer runs HTML, CSS and JavaScript the way a browser does. PHP, Jinja or Handlebars tags show up as plain text, because a server normally replaces them before a page reaches the browser.
Why don’t my images show in the HTML code viewer?
- An image with a relative path, like img/logo.png, points to a file the HTML code viewer can’t see. Use a full https address, or bring the page in with Load source so its own address becomes the base.
What happens to links in the HTML code viewer preview?
- Section links scroll and links to other sites open a new tab. The HTML code viewer doesn’t follow relative links like about.html, data: links or a meta refresh; the Console says when it skips one.
Can anyone else see code I share from the HTML code viewer?
- Only people with the link. The code travels inside the link, after the #, and the HTML code viewer never stores it on a server.
Can I use the HTML code viewer for a CSS snippet?
- Yes. Put the CSS in a style tag, add a few elements for it to style, and the HTML code viewer shows the result.
What does the HTML code viewer do with an endless loop?
- The HTML code viewer stops any loop in your page’s own scripts after one second and names its line in the Console, so the tab doesn’t freeze.
Who runs the HTML code viewer?
- Me, Jurgen Pine. I build and run the HTML code viewer on my own.