Preview an HTML file
Import an .html or .htm file from your device and inspect the rendered page beside its source code.
1234567891011121314151617181920212223242526272829303132333435363738394041424344
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hello World</title> <style> * { box-sizing: border-box; } body { min-height: 100vh; margin: 0; display: grid; place-items: center; font-family: system-ui, sans-serif; background: #f4f7fb; color: #172033; } .card { text-align: center; } h1 { margin-bottom: 8px; color: #0879c9; } button { padding: 10px 16px; border: 0; border-radius: 8px; background: #0879c9; color: white; cursor: pointer; } </style></head><body> <main class="card"> <h1>Hello World!</h1> <p>Edit this file and see your changes instantly.</p> <button type="button" id="hello-button">Test JavaScript</button> </main> <script> const button = document.querySelector('#hello-button'); button?.addEventListener('click', () => { console.log('Hello from the live preview!'); button.textContent = 'JavaScript works'; }); </script></body></html>
HTML VIEWER GUIDE
HTML Online Viewer is a free HTML renderer and live code editor for beginners, students and developers. Paste code or import a file, then compare the source with the rendered page as you work. There is no installation and no account required.
HOW IT WORKS
Paste HTML, start with the sample, or import an HTML file from your device.
Write HTML, CSS or JavaScript while the sandboxed preview updates beside the editor.
Review issues, test screen sizes, format or minify, then download your finished file.
COMMON USES
Use the viewer for a quick check or keep working in it as a lightweight front-end playground.
Import an .html or .htm file from your device and inspect the rendered page beside its source code.
Change a tag, attribute or style and see what it does immediately—without setting up a project or installing software.
Use line markers, readable diagnostics and the preview console to locate common HTML and runtime problems.
Switch the preview between flexible desktop, 768 px tablet and 390 px phone widths while you edit.
Keep everything in index.html or use the optional styles.css and script.js tabs for a familiar three-file workflow.
Format untidy markup, compare a safe minified version, copy the result or export it as a local file.
PRIVACY & SAFETY
The main editor reads imported files, formats code and saves drafts locally in your browser. It does not require an upload or account. The preview runs inside a restricted iframe and is kept separate from the HTML Online Viewer page.
Read the privacy policy →HONEST LIMITS
QUESTIONS
An online HTML viewer turns HTML source code into a rendered webpage in your browser. This viewer also includes an editor, CSS and JavaScript tabs, responsive preview sizes, diagnostics and file export.
Yes. Choose Import, select an .html, .htm or text file, and the file will open in the editor. The import is read by your browser; the editor does not need to upload that file to our server.
Yes. You can write styles and scripts inside index.html or use the separate styles.css and script.js tabs. The viewer combines the three tabs for the live preview.
Not when Keep position is enabled. The viewer restores the preview scroll position after an update, which is useful when editing a long page far below the top.
The main editor processes and auto-saves code in this browser. No account is required. External resources used by your HTML—such as images, fonts or scripts—can still contact their own hosts when the preview loads them.
Yes. On a small screen, use the Code and Preview buttons to move between the editor and rendered result. Phone, tablet and desktop preview controls remain available.
KEEP WORKING
Move your current workflow forward with focused converters, checkers and practical coding guides.
Browse every HTML tool →