Online HTML Editor with Live Preview
Free online HTML editor with a live preview beside the code. Styles and scripts work, nothing is uploaded, and the result downloads as a file.
On your device: nothing you enter here is uploaded.
HTML
19 lines, 9 tags, 474 bytes
Preview
The preview runs in a sandboxed frame with no access to this page, so your code cannot touch anything outside it.
What this tool is for
Code on the left, the rendered page on the right, updating as you type. Useful for trying a layout, checking an email template, or explaining markup to someone without setting up a project first. The preview runs inside a sandboxed frame that has no access to this page, and nothing you write is uploaded anywhere.
A minimal HTML page to start from
Every page needs the same skeleton: a <!doctype html> line, an <html lang="en"> element, a <head> with <meta charset="utf-8">, a viewport meta tag and a <title>, then a <body> with the visible content. The viewport tag, <meta name="viewport" content="width=device-width, initial-scale=1">, is what makes a page readable on a phone instead of a shrunken desktop view.
Styles go in a <style> block in the head and scripts in a <script> block at the end of the body. Both work in the preview, so you can try a complete component, markup, styles and behaviour together.
Tags you will use most
| Tag | What it is for |
|---|---|
| <h1> to <h6> | Headings, one <h1> per page |
| <p> | Paragraph of text |
| <a href="..."> | Link |
| <img src="..." alt="..."> | Image, alt text describes it |
| <ul>, <ol>, <li> | Bulleted and numbered lists |
| <div>, <span> | Generic block and inline containers |
| <header>, <main>, <footer> | Page regions, help screen readers |
| <button> | Clickable action, not a styled <div> |
| <form>, <input>, <label> | Forms, every input needs a label |
| <table>, <tr>, <td> | Tabular data only, not layout |
Testing an email template
Email clients render far less than browsers: no external stylesheets, limited CSS, and in Outlook for Windows, a Word based renderer. Write styles inline on each element, lay out with tables, and keep the width around 600 pixels. The preview here shows how a browser renders the template, which is close to Apple Mail and Gmail, so test the final version in the real clients you care about too.
How to use it
- Write or paste HTML, including style and script tags.
- Watch the preview update, or switch live mode off and press run when you prefer.
- Download the result as an .html file when it looks right.
Frequently asked questions
Do scripts run in the preview?
Yes, otherwise the editor would be lying to you. The frame is sandboxed without same-origin access, so code in the preview cannot read this page, its storage or anything else outside the frame.
Can I load external CSS or images?
Yes, if the address is reachable over https. Anything served over plain http will be blocked by the browser inside a secure page.
Is my code saved anywhere?
No. It exists in this tab only. Closing the page loses it, so download the file if it matters.