How the HTML
viewer works.
Edit HTML and see the result in your browser. Here is how the preview, drafts and sharing work.
The HTML viewer puts editing and previewing in one workspace. Open a file, paste a snippet, check the console, then download or share the source.
What is an HTML viewer?
An HTML viewer renders HTML as a web page. This one updates as you type, so you can check a snippet without creating a project. CSS in <style> and JavaScript in <script> work; JSX and server-side languages must be built into HTML first.
How HTML viewers work
This viewer renders your document in a sandboxed iframe. Scripts can run, but the preview cannot read the parent page or navigate your tab. External images, styles, scripts and network requests can still contact their own servers.
Rendering does not upload your source to us. Requests made by the document still follow browser rules such as CORS. Share links carry compressed HTML; their length depends on the document, and very long links are better replaced by a file.
HTML viewer vs CodePen, JSFiddle, your local file
CodePen and JSFiddle provide hosted code playgrounds. Compare their project-saving and code-panel options if you need more than a single HTML document.
Opening a local HTML file works well when you already have the file. Relative images and styles need to be available at the paths it uses. For a project with a build step or API, use its development server.
HTML Viewer Cat is for a quick edit and preview. There is no account to create. A local draft keeps your work in this browser; downloading HTML gives you a file you can keep elsewhere.
The workspace
The editor and preview fill the window. Open Console to read logs and errors, or choose an example from the bottom bar.
Editing and testing
Keep Live on to preview edits as you type, or pause it and press Run when a script is ready. On a wide screen, device frames test viewport widths; they do not emulate a different browser or email client.
The editor supports syntax highlighting, search, code folding and Undo. Format uses Prettier. Drag the divider to resize the panes. Share links contain the HTML source; they do not save form values or JavaScript state created in the preview.
Usage and storage
- Free, with no account required.
- Rendering happens in your browser; external resources can make network requests.
- Drafts and preferences are stored locally. Analytics is cookieless by default; accepting the banner enables an analytics cookie.
- File imports are limited to 10 MB. Download your HTML to keep a separate copy.
Built and maintained by Axel, a solo developer in Norway.