How to preview HTML online, free and private
An HTML previewer shows how markup renders without saving a file or starting a server. Here, type or paste HTML into the HTML tab, add styles in CSS and scripts in JS, and Live Preview refreshes about 0.4 seconds (400 ms) after you stop typing. Choose a screen under Device (Mobile, Tablet, Laptop or Desktop), or press Custom size to add your own, and open Console to see console.log output and errors.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). The preview sits in a sandboxed iframe that cannot reach ZipConvert’s cookies or storage. If your own code loads an image, font or script from another site, your browser requests it from that site, as on any web page.
You can paste a whole document or just a fragment; the CSS and JS panels are merged into it for you. The editor is plain text, with no syntax highlighting. Tidy markup first with the HTML beautifier, and shrink the finished page with the HTML minifier.
Table of Use: what to click for each job
| Job | Click or do | What you get |
|---|---|---|
| Test a snippet | Paste it into the HTML tab; a fragment is fine | It renders in Live Preview, wrapped in a minimal page |
| Check a phone layout | Device: Mobile (375×667) | A 375-pixel-wide viewport, so media queries respond |
| See a tablet in landscape | Device: Tablet (768×1024), then click the rotate button (it reads Portrait until you click it) | The preview becomes 1024×768 |
| Test a screen that is not listed | Custom size: Device Name, Width, Height | A new entry in the Device list, up to 7680 pixels per side |
| Debug a script | Console, then the ERROR filter | Messages such as (JS panel, line 11) |
| Control when the script runs | Auto refresh off, then Run | The preview reloads only when you press Run |
| Start from an example | Templates…: Blank, Basic HTML, Gradient Card or Flexbox Layout | All three panels replaced, after a confirmation if you have code |
| Send a live example | Share Link | A link with the code after #; it runs only when the reader presses Run shared code |
| Keep work for later | Snippets, then Save | A named copy stored in this browser |
| Take the files away | Download HTML or Download Files (ZIP) | preview.html, or preview-project.zip with index.html, style.css and script.js |
Need code to test? Generate layouts with the flexbox generator or the CSS grid generator, add a background from the gradient generator, or paste HTML from the Markdown to HTML converter.
Features
- Three panels, one preview. HTML, CSS and JS tabs feed one document. A full page gets the CSS in its head and the JS before the closing body tag.
- Real viewport sizes. The page inside the preview sees the true device width, scaled with the Zoom slider (10% to 100%) or Fit. The Portrait or Landscape button swaps width and height, and Expand preview hides the editor.
- Console with filters. Shows console.log, info, warn and error output, uncaught errors with their JS panel line, and unhandled promise rejections. It keeps the latest 500.
- Sandboxed preview. The frame has no access to this site’s cookies or storage, so a script in the preview cannot reach them.
- Share, save and export. Share Link, Snippets, Download HTML, Download Files (ZIP) and a Copy button for the active panel. Tab indents, and Esc then Tab leaves the editor.
- Private and free. No account, and nothing is uploaded.
Once the page works, polish the styling with the box shadow generator and border radius generator, or choose colors with the color picker.
How to use the HTML previewer
- Type or paste HTML into the HTML tab. The editor starts with the Gradient Card example; choose Templates… for Blank, Basic HTML or Flexbox Layout.
- Open the CSS and JS tabs to add styles and scripts. Live Preview updates about 0.4 seconds (400 ms) after you stop typing.
- Pick a screen under Device, press the Landscape or Portrait button to rotate it, and use Zoom or Fit if the page is larger than the panel.
- Press Console to read logs and errors, and filter with ALL, LOG, ERROR or WARN.
- To run the code only on demand, press Auto refresh on to turn it off, then press Run when you are ready.
- Press Format HTML or Format CSS to re-indent the current panel. For JavaScript, use the JavaScript beautifier.
- Save with Snippets, send with Share Link, or take the work with Download HTML or Download Files (ZIP).
Who can use it
- Students learning HTML, CSS and JavaScript who want to see each change straight away, with starter text from the Lorem Ipsum generator.
- Front-end developers trying a snippet, a media query or a script in isolation before putting it in a project.
- Designers and testers checking how a layout behaves at phone, tablet and desktop widths.
- Teachers and support staff sharing a working example or a bug reproduction as a Share Link.
- Site owners checking an HTML block before pasting it into a CMS.
FAQs
How do I preview HTML code online?
Type or paste HTML into the HTML tab, add styles in the CSS tab and scripts in the JS tab. Live Preview updates about 0.4 seconds (400 ms) after you stop typing. You can paste a complete document or just a fragment. Pick a Device size, press the Landscape or Portrait button to rotate it, and open Console to see console.log output and errors from your script.
Is it safe to run code in the HTML previewer?
Yes. The preview runs in a sandboxed iframe with its own isolated origin, so your code cannot read ZipConvert’s cookies, storage or pages. The same isolation means your own code cannot use cookies or localStorage inside the preview. Your code is not uploaded to ZipConvert. If it loads an image or script from another site, your browser requests that file from that site.
How do I test how my page looks on a phone?
Choose Mobile (375×667) under Device. The page inside the preview sees a real 375-pixel-wide viewport, so your media queries respond as they would on that screen. Press the Portrait or Landscape button to rotate, use Fit to scale it into the panel, or add your own width and height with Custom size, up to 7,680 pixels per side.
How do I find the line that causes a JavaScript error?
Open Console. Uncaught errors from the JS tab are listed with the line number in that tab, for example “(JS panel, line 11)”, in red. Messages from console.log, console.warn and console.error appear too, and unhandled promise rejections are listed. Use the ALL, LOG, ERROR and WARN buttons to filter, and Clear to empty the list.
How does the HTML previewer Share Link work?
Share Link compresses your HTML, CSS and JS into the link itself, after the # sign. Browsers never send that part of a link to a server, so ZipConvert does not receive or store the code, but anyone with the link can read it. When someone opens it, the code loads into the editor and does not run until they press Run shared code.
Can I download my HTML, CSS and JavaScript?
Yes. Download HTML saves one file, preview.html, with your CSS in a style tag and your JavaScript in a script tag. Download Files (ZIP) saves preview-project.zip containing index.html, style.css and script.js, with index.html linking to the other two. Copy HTML, Copy CSS or Copy JS copies only the panel you are on.
Does the editor have syntax highlighting or autocomplete?
No. It is a plain-text editor that keeps your formatting exactly. Tab inserts two spaces, and pressing Esc first lets Tab move focus to the next control. Format HTML and Format CSS re-indent the panel you are on; JavaScript has no Format button. For highlighted code to paste into a blog or document, use the code syntax highlighter.
Is my code uploaded or saved anywhere?
Your code stays in your browser: nothing is uploaded to ZipConvert (you can check the Network tab in DevTools). The tool does not save your work automatically, so reloading the page returns the starter template. Code you store with Snippets is kept in this browser’s localStorage only.
Related tools: highlight finished code for a post with the code syntax highlighter, or turn a page into Markdown with the HTML to Markdown converter.