Utilrix

Online HTML, CSS & JavaScript Editor

Edit HTML, CSS and JavaScript with a live preview and a console — the whole page renders as you type.

1:1
PREVIEW
Rendered in a sandboxed iframe in this tab — your code is never uploaded.

HTML/CSS/JS examples you can run

Every one of these is loaded from the Examples menu in the editor above — press Run and it works. They are printed here so you can read the code before you run it.

Click counter

A click counter: an element looked up by id, an event listener, and a template literal updating the text.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="card">
      <h1>Hello from Utilrix</h1>
      <p>Edit the HTML, CSS or JS and the preview updates as you type.</p>
      <button id="count">Clicked 0 times</button>
    </main>
    <script src="script.js"></script>
  </body>
</html>

Flexbox layout

A page-level flexbox layout — header, sidebar, main, footer — that reflows when the preview is resized.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Flexbox</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>Header</header>
    <div class="row">
      <aside>Sidebar</aside>
      <main>
        <h1>Flexbox layout</h1>
        <p>Resize the preview to watch it reflow.</p>
      </main>
    </div>
    <footer>Footer</footer>
  </body>
</html>

Form & DOM events

A form with preventDefault, elements created in JavaScript, and a class toggled on click.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Todo</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <form id="form">
      <input id="field" placeholder="Add an item…" autocomplete="off" />
      <button type="submit">Add</button>
    </form>
    <ul id="list"></ul>
    <script src="script.js"></script>
  </body>
</html>

HTML quick reference

The syntax people look up most often. Copy any line into the editor above to see what it does.

Flexbox

WhatSyntaxNotes
Containerdisplay: flexChildren become flex items on one axis.
Directionflex-direction: columnStacks vertically instead of in a row.
Main axisjustify-content: space-betweenSpacing along the direction.
Cross axisalign-items: centerAlignment across the direction.
Growflex: 1Take the remaining space.
Fixed then flexibleflex: 0 0 12remDon't grow, don't shrink, be this wide.
Wrapflex-wrap: wrapItems drop onto a new line instead of squashing.

CSS Grid

WhatSyntaxNotes
Columnsgrid-template-columns: repeat(3, 1fr)Three equal columns.
Responsiverepeat(auto-fit, minmax(16rem, 1fr))As many columns as fit — no media query.
Gapgap: 1remSpacing between tracks; works in flexbox too.
Spangrid-column: span 2One item covering two columns.
Areasgrid-template-areas: "head head"Name regions and place items by name.

DOM essentials

WhatSyntaxNotes
Select onedocument.querySelector(".card")First match, any CSS selector.
Select alldocument.querySelectorAll("li")A static NodeList — spread it to get an array.
Listenel.addEventListener("click", fn)Prefer this over onclick.
Createdocument.createElement("li")Then append it with el.append(child).
Classesel.classList.toggle("done")add, remove, toggle, contains.
Text vs HTMLel.textContent = valueUse textContent unless you need markup — it can't inject script.
Formevent.preventDefault()Stops the page reloading on submit.

Other languages you can run here

Processed 100% in your browser — nothing you enter here is ever uploaded.

Common use cases

Learning HTML and CSS

Change a property and watch the layout move. Flexbox, grid, transitions and media queries all render exactly as they will in production.

Trying a layout before touching your project

Prototype a card, a nav bar or a form in isolation, then copy the markup into your real codebase.

Teaching or answering a question

Build a minimal reproduction and send the link — the recipient sees your exact HTML, CSS and JS, already running.

Practising DOM JavaScript

querySelector, addEventListener, classList and fetch all work, because the preview is a real page in a real iframe.

How to use the HTML/CSS/JS Editor

Edit index.html, style.css or script.js using the file tabs — the preview on the right re-renders a moment after you stop typing.

console.log from your script shows up in a console strip under the preview, and so does any uncaught error, with its line number.

The three files are wired together for you: the <link> and <script> tags are resolved automatically, so the preview behaves like a real page served from a folder.

Suggestions offer HTML tags as complete snippets — type div and accept it to get an opening and closing tag with the cursor between them.

Press Run, or Ctrl + Enter, to render immediately. The preview also updates on its own as you type — turn Live preview off in the Editor panel if you would rather only see it when you ask.

Type an opening tag and the closing one is written for you: type <h1> and you get <h1></h1> with the cursor in the middle. Typing </ completes whichever tag is still open. Void elements like <br> and <img> are left alone.

Press ZIP to download the three files as a folder you can open directly in a browser, or Share to send a link containing your work.

Frequently asked questions

Related tools

JS CompilerTS CompilerPython CompilerSQL Editor