Basic document
<!DOCTYPE html>
<html>
<head><title>Demo</title></head>
<body>
<h1>Hello</h1>
<p>Welcome to the page.</p>
</body>
</html>About the HTML Viewer playground
The HTML Viewer renders your HTML markup as a live preview so you can see the rendered page beside its source. This is handy for checking a snippet, previewing email or template markup, or understanding how elements, attributes, and inline styles combine into a visual result. HTML (HyperText Markup Language) is the standard markup language of the web, structuring content with elements like headings, paragraphs, lists, links, and tables, and is styled with CSS and made interactive with JavaScript.
The preview is generated entirely in your browser, so your markup is never uploaded or stored on a server. Paste a fragment or a full document and immediately see how it displays, then adjust tags or styles and re-render. It is a quick way to validate layout and structure, experiment with markup, or confirm that generated HTML looks correct before embedding it into a larger page or sending it onward.
HostedHTML Viewer runtime
mainentry file
single fileworkspace
stdinprogram input
How it works
1
Write
The main file is the entry point for each run.
2
Give it input
Use the Input panel to pipe standard input to your program when it needs data.
3
Run
Run sends your code to a fresh hosted runtime and streams the result into the output panel.
4
Keep or share
Your draft stays in this browser, and Share creates a separate snapshot link.
External resources
- html.spec.whatwg.org— Format reference
List and link
<ul>
<li><a href="https://example.com">Example</a></li>
<li>Plain item</li>
</ul>Inline-styled table
<table border="1" style="border-collapse:collapse">
<tr><th>Name</th><th>Score</th></tr>
<tr><td>Ada</td><td>95</td></tr>
</table>Form with inputs
<form>
<label for="email">Email</label>
<input id="email" type="email" placeholder="[email protected]">
<button type="submit">Sign up</button>
</form>Image with caption
<figure>
<img src="https://placehold.co/120" alt="Placeholder" width="120">
<figcaption>A sample image</figcaption>
</figure>Semantic layout
<header><h1>Site</h1></header>
<nav><a href="#a">Home</a> | <a href="#b">About</a></nav>
<main>
<article>
<h2>Post title</h2>
<p>Body text.</p>
</article>
</main>
<footer>© 2026</footer>Inline emphasis and code
<p>Use <strong>bold</strong>, <em>italic</em>, and
<code>inline code</code>. Quote: <q>be concise</q>.</p>
<pre><code>const x = 1;</code></pre>Ordered and definition lists
<ol>
<li>First</li>
<li>Second</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>Markup language of the web.</dd>
</dl>Details and inline style
<details>
<summary>More info</summary>
<p style="color:#2563eb">Hidden until expanded.</p>
</details>
<p>Highlight: <mark>important</mark> text.</p>How it works
The editor uses Monaco, the engine behind VS Code, with language-aware editing tools and familiar keyboard controls.
How it works
Paste an HTML fragment or full document into the source pane
A live rendered preview appears beside the markup
Edit tags, attributes, or inline styles and re-render to see changes
What you can preview
Snippets, email markup, or template output before embedding
How elements, attributes, and inline CSS combine visually
Layout and structure of generated or hand-written HTML
Privacy
Rendering happens entirely in your browser
Your markup is never uploaded or stored on a server
Tips
Add inline styles to test visual tweaks instantly
Use it to confirm generated HTML looks right before sending it on
Every shortcut, searchable:
Editing
Undo
Ctrl+Z
Redo
Ctrl+⇧+Z
Select next occurrence
Ctrl+D
Delete line
Ctrl+⇧+K
Move line up / down
Alt+↑ / ↓
Copy line up / down
Alt+⇧+↑ / ↓
Toggle comment
Ctrl+/
Indent line
Ctrl+]
Outdent line
Ctrl+[
Navigation
Find
Ctrl+F
Find & replace
Ctrl+H
Go to line
Ctrl+G
Go to symbol
Ctrl+⇧+O
Selection
Select all
Ctrl+A
Select line
Ctrl+L
Select all occurrences
Ctrl+⇧+L
Shortcuts follow your OS — ⌘ becomes Ctrl on Windows and Linux.
It renders pasted HTML as a live preview so you can see how the markup displays alongside its source.
No. The HTML is rendered in your browser. Your markup is never uploaded or stored on a server.
Yes, it is free with no sign-up needed.
Both. You can paste a complete document with doctype and head, or just a fragment of elements, and the preview will render what you provide.
Inline styles and basic markup render directly. External resources depend on their URLs being reachable, and scripts may be sandboxed for safety in the preview.
HTML
Loading...
Preview