This free HTML viewer shows a live preview of any HTML you paste, and it can format, beautify or minify the code with one click. The preview runs in a locked frame, so the code you test cannot run scripts or touch this page.
- How to use the HTML viewer
- HTML formatter, beautifier and minifier: what each button does
- How the live preview works and what it will not do
- Practical ways to use an HTML viewer
- Best practice for clean HTML
- Common mistakes
- FAQ
- Related tools
How to use the HTML viewer
- Paste your HTML into the HTML code box, or press Load sample to see a working example.
- Watch the Live preview on the right. It refreshes a moment after you stop typing.
- Use the Full, Tablet and Phone buttons above the preview to change its width and see how the page behaves on a narrower screen.
- Press Format to tidy messy code, or Minify to make it smaller. The note under the editor shows the size before and after.
- Press Copy code to copy the result, or Clear to start again.
The size of your code shows above the editor as you type. Nothing is uploaded and no account is needed. If you close the page, the code is gone, so copy anything you want to keep.
HTML formatter, beautifier and minifier: what each button does
The two buttons do opposite jobs. Format makes code easy for a person to read. Minify makes it small for a browser to download.
| Button | What it does | Best for |
|---|---|---|
| Format | Puts each block element on its own line and indents child elements by two spaces. Inline tags such as links and bold text stay with their text | Reading and editing code copied from a page, a CMS or an email |
| Minify | Removes comments and extra spaces and line breaks, and shortens the CSS inside style tags | Cutting file size for a snippet or an email template |
| Load sample | Fills the editor with a small example page | Trying the tool for the first time |
Format leaves pre and textarea blocks exactly as they are, because their spacing is part of the content. Script and style blocks are indented but not rewritten. Minify keeps conditional comments, which some email templates use, and it only trims script text line by line, so it cannot break your JavaScript. It does not rename variables or compress scripts. If the tool cannot change the code safely, it leaves it as it was and says so.
How the live preview works and what it will not do
The preview is an iframe with the sandbox attribute set to its strictest setting. In practice that means scripts do not run, forms cannot be submitted, popups are blocked and the code cannot read or change this page. It is a safe place to look at code you did not write yourself.
That safety has a cost. Anything that needs JavaScript will not work in the preview. Menus, sliders, tabs and cookie banners that depend on scripts will look static. The preview shows how the HTML and CSS look, not how the whole page behaves.
The Tablet and Phone buttons set the width of the preview frame to 768 and 375 pixels. This helps you check whether a layout wraps and stacks as you expect. It is a width test, not a full device simulator, so it does not copy a phone's fonts or browser features. Test on a real phone before you publish.
The viewer is not a validator. It does not list syntax errors, and it does not repair broken HTML. Browsers are forgiving and will show a page even when tags are missing, so a good looking preview does not prove the code is correct.
Practical ways to use an HTML viewer
Paste the HTML of a newsletter and see how it looks before you send it. Remember that email programs differ, so send a test to a few inboxes too.
Page builders and editors often produce one long line of code. Format it so you can find the part you want to change.
Test a block of HTML and CSS from a tutorial or a client, without setting up files or a local server.
Minify a small block of code to cut the size before you paste it into a field that has a length limit.
If you are building a full website rather than a snippet, the preview is only a small part of the job. Our web design team builds sites that are fast, easy to edit and ready for search, and you can talk to them about a build or a rebuild.
Best practice for clean HTML
Use one H1 on a page, then H2 and H3 in order. You can check the outline of a live page with the Heading Checker. Give images a short description in the alt attribute, and set the page language on the html tag. Close the tags you open, and use a lowercase tag name so your code is consistent.
Keep structure in HTML and style in CSS. Inline style attributes are fine for tests but become hard to manage on a whole site. Put scripts at the end of the body or use the defer attribute so they do not block the page from loading.
On minifying, remember that most web servers already compress text files with gzip or Brotli, which saves far more than removing spaces does. Minify helps, but turn compression on first. Keep a readable copy of your source and only publish the minified file. Format the source when you edit it.
Common mistakes
The first is expecting the preview to run scripts. If your page relies on JavaScript, you will need a normal browser for that part. The second is minifying code and then losing the original. A minified file is hard to read, so always keep the source.
The third is pasting code with a missing closing tag and trusting what the preview shows. Browsers guess what you meant, and different browsers can guess differently. The fourth is pasting private data, such as customer names in an email template, into any online tool. This one runs in your browser, but use dummy text for tests as a habit. For data files rather than pages, try the JSON Formatter, and to compare two versions of a page, use the Diff Checker.
Frequently asked questions
What is an HTML viewer?
An HTML viewer shows how a block of HTML code looks when a browser draws it. You paste the code on one side and see the result on the other. This one also formats and minifies the code, and it never runs scripts in the preview.
How do I use the HTML formatter or beautifier?
Paste your code and press Format. The tool puts each block element on its own line, indents child elements by two spaces and keeps inline tags with their text. It leaves pre and textarea content as it is.
How do I use the HTML minifier?
Paste your code and press Minify. The tool removes comments and extra white space, and it shortens the CSS in style tags. Scripts are only trimmed line by line, so the code still works. The note below the editor shows the size before and after.
Why do my scripts not run in the preview?
The preview frame is sandboxed on purpose. Scripts, forms and popups are blocked so that pasted code cannot do anything harmful or reach this page. Use a normal browser to test JavaScript.
Is the HTML I paste uploaded?
No. Your code stays in your browser. It is not sent to a server or stored, and you do not need an account. When you close or refresh the page, the code is cleared, so copy anything you need first.
Can it fix broken HTML?
No. The tool does not validate or repair code. It will format and minify what you give it, but a missing tag stays missing. If the tool cannot change the code safely, it leaves it unchanged and shows a message.
What do the Tablet and Phone buttons do?
They change the width of the preview to 768 pixels for a tablet and 375 pixels for a phone, so you can see how the layout adapts. It is a width test only. Check the real page on a real device before you launch.
Related free tools
Need help with a website as well as a quick tool? Get in touch with Rank Ray and tell us what you are working on.