How to use the HTML viewer
- 1Type or paste markup into the HTML box, press Open .html to load a file, or press Example.
- 2With Auto-preview ticked the Preview updates as you type. Untick it for large pages and press Run (or Ctrl + Enter) when you want to refresh.
- 3Tick Run JavaScript only if you need scripts to run, and choose a Preview width: Full, Tablet 768 or Phone 375.
- 4Press Copy or Download under the editor to save your code as
page.html.
Live preview and sandboxing
The preview is an <iframe> built from your code (srcdoc) with the sandbox attribute, and without allow-same-origin. That gives it a unique, empty origin: it can't read this site's cookies or storage, can't reach the page around it, and can't navigate the browser window. Forms, pop-ups and downloads are blocked.
Scripts are blocked too unless you tick Run JavaScript, which adds allow-scripts and nothing else. Code you paste from an unknown source is therefore safe to look at; only allow scripts for code you trust or want to test.
Opening and saving .html files
Open .html reads a .html or .htm file from your device into the editor; nothing is uploaded. Download saves the editor content as page.html, which opens in any browser. Your code also stays in this tab's session storage, so reloading the page doesn't lose it; it is cleared when you close the tab.
The preview has no address, so relative URLs such as images/logo.png or style.css have nothing to resolve against. Use full https:// URLs, put the CSS in a <style> block, or add <base href="https://your-site.com/"> to the <head>.
Using CSS and JavaScript
Write CSS in a <style> block or style attributes, and scripts in <script> blocks; both apply exactly as in a normal page. External stylesheets and fonts (Google Fonts, CDN libraries) load over the network like on any page. With Run JavaScript on, console.log output goes to your browser's developer console (F12), and alert() is suppressed by the sandbox.
Preview width sets the frame to 768 px or 375 px so media queries for tablets and phones apply. The frame is narrower, not a real device, so touch behavior and device fonts can still differ.
Viewer vs formatter
This page shows what the code looks like when rendered. The HTML formatter changes how the code itself is laid out: indentation and line breaks, without rendering it. A common workflow is to format minified markup first so you can find what to change, then edit and check it here. To create HTML rather than edit it, use Word to HTML for documents and text to HTML for plain text; placeholder text fills a layout before the real copy exists.
Is my text private?
This tool runs entirely in your browser. Your text is not uploaded to our servers.