Online HTML Editor

Continue in the tool

More pages for this tool

live html css editor

Live HTML and CSS editor with instant preview

Type in the HTML or CSS pane and the preview rebuilds the page 450 milliseconds after your last keystroke. Seven ready-made templates serve as starting points, and three buttons show the same page at full, tablet or phone width.

How your HTML and CSS become the preview page

The HTML pane takes only what would go inside the page body, with no doctype, head or body. The CSS from the second pane becomes a style tag in the head, and the practical upshot is that its rules apply to the whole document, body included, which lets you test the background, margins and fonts of the entire page. The browser builds the document with a meta charset and a meta viewport, so vw units and media queries respond to the width chosen in the preview. Switching from Full to Tablet or Phone makes the frame 768 px or 375 px wide, and an @media (max-width: 600px) rule starts to apply without you resizing the window.
Refreshing works by rebuilding: every run recreates the document from scratch, so JavaScript state and scroll position go back to the start. In exchange, nothing is left over from a previous test. Auto-run can be switched off for anyone who wants to type a lot before seeing the result, and the Run button works at any moment. The seven templates (Hello world, Flexbox, Card, Form, Animation, Canvas and Blank) swap all three panes at once, and an undo shortcut brings back what was there before, because switching templates by accident would otherwise wipe out hours of work.
Everything runs inside the browser, in an isolated frame that sees neither cookies nor the page that contains it, so testing CSS here never affects the site. The draft is saved on this device at each pause in typing, with no account. To take the result away, the Download button hands over a single .html file with the CSS inside a style tag, which opens in any browser and can be sent to whoever will review the layout.

Checked numbers and behaviors

Auto-run delay

Input: digitar e parar
Expected output: 450 ms

Wait after the last keystroke before the preview is rebuilt.

Phone mode width

Input: botão Celular
Expected output: 375 px

Maximum width of the preview frame.

Tablet mode width

Input: botão Tablet
Expected output: 768 px

Handy for the most common layout breakpoint.

Where the CSS goes

Input: h1 { color: red; }
Expected output: tag style dentro do head

Placed before the body HTML and applying to the whole document.

Available templates

Input: lista de modelos
Expected output: 7

Hello world, Flexbox, Card, Form, Animation, Canvas and Blank.

Full tool FAQ

How can I test HTML, CSS and JavaScript online without installing anything?

Write in the three panes and the preview updates at once. There is no account, server or file: the browser builds a page with your HTML in the body, your CSS in a style tag and your JavaScript at the end of the body, and runs it all in an isolated iframe. The console shows whatever the code prints.

Does my code have access to this site's data?

Why do alert, confirm and prompt not open a dialog?

How do I share what I wrote?

Does the share link send my code to a server?

Can I use CDN libraries and call APIs with fetch?

How do I download the page as an HTML file?

The preview froze. What should I do?

Can I paste a complete HTML page?

Is what I write saved?

Frequently asked questions

What do I type in the HTML pane?

Only the body content, such as a heading and a paragraph. The doctype, head and body are built by the tool. If you paste a complete page, it is recognized and the CSS and JavaScript from the other panes are fitted into it.

Do I need an account to use it?

No. The editor works without sign-up, and the draft is kept only in your browser's storage, on this device.

Why does the page state reset on every change?

Because each run recreates the whole document, which guarantees the result reflects exactly the current code. If that gets in the way, turn off run-as-you-type and use the Run button.

Next steps

How your HTML and CSS become the preview page

The HTML pane takes only what would go inside the page body, with no doctype, head or body. The CSS from the second pane becomes a style tag in the head, and the practical upshot is that its rules apply to the whole document, body included, which lets you test the background, margins and fonts of the entire page. The browser builds the document with a meta charset and a meta viewport, so vw units and media queries respond to the width chosen in the preview. Switching from Full to Tablet or Phone makes the frame 768 px or 375 px wide, and an @media (max-width: 600px) rule starts to apply without you resizing the window.

Refreshing works by rebuilding: every run recreates the document from scratch, so JavaScript state and scroll position go back to the start. In exchange, nothing is left over from a previous test. Auto-run can be switched off for anyone who wants to type a lot before seeing the result, and the Run button works at any moment. The seven templates (Hello world, Flexbox, Card, Form, Animation, Canvas and Blank) swap all three panes at once, and an undo shortcut brings back what was there before, because switching templates by accident would otherwise wipe out hours of work.

Everything runs inside the browser, in an isolated frame that sees neither cookies nor the page that contains it, so testing CSS here never affects the site. The draft is saved on this device at each pause in typing, with no account. To take the result away, the Download button hands over a single .html file with the CSS inside a style tag, which opens in any browser and can be sent to whoever will review the layout.

Checked numbers and behaviors

Auto-run delay

Input: digitar e parar
Expected output: 450 ms

Wait after the last keystroke before the preview is rebuilt.

Phone mode width

Input: botão Celular
Expected output: 375 px

Maximum width of the preview frame.

Tablet mode width

Input: botão Tablet
Expected output: 768 px

Handy for the most common layout breakpoint.

Where the CSS goes

Input: h1 { color: red; }
Expected output: tag style dentro do head

Placed before the body HTML and applying to the whole document.

Available templates

Input: lista de modelos
Expected output: 7

Hello world, Flexbox, Card, Form, Animation, Canvas and Blank.

Full tool FAQ

How can I test HTML, CSS and JavaScript online without installing anything?

Does my code have access to this site's data?

Why do alert, confirm and prompt not open a dialog?

How do I share what I wrote?

Does the share link send my code to a server?

Can I use CDN libraries and call APIs with fetch?

How do I download the page as an HTML file?

The preview froze. What should I do?

Can I paste a complete HTML page?

Is what I write saved?

Frequently asked questions

What do I type in the HTML pane?

Do I need an account to use it?

No. The editor works without sign-up, and the draft is kept only in your browser's storage, on this device.

Why does the page state reset on every change?

Because each run recreates the whole document, which guarantees the result reflects exactly the current code. If that gets in the way, turn off run-as-you-type and use the Run button.