About the Online HTML Editor
A bare fragment does not render the way a real page does. There is no <meta name="viewport">, no charset, and no base typography, so text arrives at 16 pixel Times New Roman and mobile widths behave oddly. This editor builds the surrounding document for you: doctype, language attribute, charset, viewport and a small readable stylesheet go around whatever you type, and the preview reflects that finished page rather than a naked fragment.
Paste a full document instead and the wrapper steps aside; the base stylesheet is injected into the existing <head> and everything else is left exactly as written. Choose the dark base when you are drafting for a dark site, or None when you want to see the browser defaults with no help at all. The preview repaints roughly a third of a second after you stop typing, which is fast enough to iterate on a layout and slow enough not to flicker.
Rendering happens in a sandboxed frame on this page, so scripts do not execute and the markup cannot reach the page around it. Download saves the composed document, viewport tag included, ready to open as a file. When you want a scratchpad for a fragment with no wrapper at all, the HTML Viewer renders exactly what you paste, and the HTML Formatter tidies the source afterwards.
How to use
- Type or paste markup on the left. A fragment is fine.
- Leave Wrap fragment in a full page ticked so the preview matches a real browser tab.
- Adjust the base styles, then download the finished document when the layout looks right.
Common questions
- Why do my inline scripts do nothing?
- The preview frame is sandboxed without script permission, so pasted markup can never touch this page. The composed source you download keeps the scripts intact.
- Does the downloaded file include the wrapper?
- Yes. Download saves the exact document shown in the preview, including the doctype, charset, viewport tag and base stylesheet.
- Can I load my own CSS file?
- Add a link tag with an absolute https URL, or paste a style block. Relative paths cannot resolve because the frame has no origin of its own.
- How do I check a narrow layout?
- Use the fullscreen button and drag the browser window narrower. The frame follows the pane, and the viewport tag means media queries respond the way they would on a phone.