How to use the html viewer
- 1Paste your HTML into the editor, or edit the example.
- 2Watch the preview update as you type.
- 3Choose a width such as 390 or 768 to see how the page looks on a phone or tablet.
- 4Turn on Run JavaScript if your page needs scripts.
- 5Copy or download the finished file. Your draft is also kept in this browser.
A safe place to preview HTML
The preview runs in a sandboxed frame. Your code cannot read this site's cookies or storage, open pop-ups or navigate the page. JavaScript is off by default; turn it on only for code you trust. Even then it stays inside the sandbox.
Your code is never uploaded. The latest draft is saved in your browser's local storage so it is still there if you reload, and you can clear it at any time.
Testing responsive layouts
The width buttons resize the preview frame to common device widths: 320 (smallest phones), 390 (a typical iPhone), 768 (tablets) and 1280 (laptops). If a layout breaks, check that the page includes the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Tips
- Use Full screen to see the page without the editor.
- Inline your CSS in a
<style>tag; external files on your computer cannot be loaded. - Images and fonts from public URLs work as normal.
- Tab inserts two spaces so you can indent code.
Frequently asked questions
Is it safe to paste HTML from other sources?
The preview is sandboxed, and scripts are off unless you turn them on. Only enable JavaScript for code you trust.
Can I include CSS and JavaScript?
Yes. Put CSS in a style tag and JavaScript in a script tag, then switch on Run JavaScript in preview.
Is my code saved?
Your latest draft is saved in this browser only, so it survives a reload. It is never sent to our servers.
Why do my local images not show?
Files on your computer cannot be loaded from a web page. Use images hosted at a public URL, or convert small images to Base64 data URLs.
Last updated