HTML CSS Online Editor (Live Preview)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello, World!</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Write code here: the preview updates as you type. -->
  <h1>Hello, World!</h1>
  <script src="script.js"></script>
</body>
</html>

The page appears here.

Console output from script.js shows here. Press Run to run it.

About this online HTML CSS editor

This online HTML CSS editor shows your web page live as you type. Write the structure in index.html, the styles in style.css and the behaviour in script.js, and see the result in the preview next to the code, just like a page in a browser tab.

It is a quick way to try a layout, test a selector, build a card or a navigation bar, or practise flexbox and grid without creating files on your computer.

How to use the HTML CSS editor

  1. Write your page in index.html; it can be a full document or just a few elements.
  2. Style it in style.css. It is applied to the page automatically, so a link to style.css is optional.
  3. Watch the preview update as you type HTML and CSS.
  4. Add JavaScript in script.js and press Run (Ctrl + Enter) to run it in the page; console output appears under the preview.

Keyboard shortcuts

Ctrl + Enter (Cmd + Enter on a Mac)
Run script.js in the page
Ctrl + / (Cmd + / on a Mac)
Comment or uncomment the selected lines
Ctrl + Z, Ctrl + Shift + Z
Undo and redo
Tab, Shift + Tab
Indent or outdent the selection
Escape, then Tab
Leave the editor and move to the next control

What it supports

  • Full HTML documents with a head and a body, or fragments; the page title shows on the preview tab.
  • Modern CSS: flexbox, grid, custom properties, media queries, transitions and animations.
  • script.js runs after the page is in place, with DOM access, events and console output.
  • Images written as data: URLs, and every HTML element and CSS property your browser supports.

Limits to know

  • The page loads nothing from other addresses: external stylesheets, fonts, scripts and images do not load, and forms are not sent anywhere.
  • Script tags written inside index.html do not run; put your JavaScript in script.js.
  • script.js runs when you press Run, while HTML and CSS update as you type.

Example: A styled heading

index.html

<h1 class="title">Hello, web!</h1>

style.css

.title {
  color: rebeccapurple;
  text-align: center;
}

Result

The preview shows a centered purple heading that reads: Hello, web!

Frequently asked questions

Is this HTML CSS editor free?

Yes. Every editor in the DevArcade playground is free to use, with no sign-up, no account and no limit on runs.

How do I see a live preview of my HTML and CSS?

Type in index.html or style.css and the preview next to the editor updates a moment later. On a phone, open the Output tab to see it.

Can I add JavaScript to my page?

Yes. Write it in script.js and press Run. It runs in the page after the HTML is in place, can use the DOM and events, and prints its console output under the preview.

Why does my external stylesheet or image not load?

The preview is a sandbox that loads nothing from other addresses. Write your styles in style.css and give images as data: URLs instead.

How do I share my HTML and CSS code?

Press the share key next to Run. Copy link packs the code into the link itself, so whoever opens it sees your code and can run it with one press of Run; nothing is uploaded to a server. You can also save the code as a PNG image to post anywhere.

Also try