2.2.0See what’s new

HTML, CSS, JavaScript.Nothing in between.

ColdCode is a playground for the web’s three languages. Type in the editors, watch the preview update, and read real errors in the console.

Open the editor Read the spec sheet

Free · No account · Saves in your browser · Chrome, Edge, Firefox, Safari

Try it: retype the heading or the background color, press “Add a flake”, or empty the console with its bin icon.

ColdCode

Auto-run

HTML

<div id="sky"></div>
<h1></h1>
<p>Click the button, then check the console.</p>
<button id="snow">Add a flake</button>

CSS

body {
  margin: 0; min-height: 100vh;
  display: grid; place-content: center; justify-items: center;
  background: ; color: white;
  font-family: system-ui; text-align: center;
}
button { font: inherit; padding: 8px 18px; border-radius: 99px; }
#sky i {
  position: fixed; top: -1em;
  width: 6px; height: 6px; border-radius: 50%;
  background: white; animation: fall 4s linear infinite;
}
@keyframes fall { to { top: 100%; } }

JavaScript

const sky = document.querySelector('#sky');
const snow = document.querySelector('#snow');
 
snow.addEventListener('click', () => {
  const flake = document.createElement('i');
  const x = Math.round(Math.random() * 100);
  flake.style.left = x + '%';
  sky.append(flake);
  console.log(`Flake ${sky.children.length} at ${x}%`);
  if (sky.children.length > 12) console.warn('Blizzard warning');
});

Preview

Console

Console output will appear here...

Write. Three editors or one full HTML document, with highlighting, search and autocomplete.

Run. Auto-run refreshes the preview as you type. Rather pick the moment? Turn it off and press Ctrl/Cmd + Enter.

Read. Logs, warnings and uncaught errors land right under the preview, cleared on every run.

Small on purpose.

ColdCode does a handful of things and does each one carefully. No file trees, build settings or plugins: just the parts that help you write, run and understand code.

Errors that point at the problem.

Everything your code says lands under the preview: logs, info, warnings and errors, each in its own color. Uncaught exceptions and rejected promises are caught too, and stack traces name the line in your own editor.

Cleared automatically on every run
Keeps the latest 500 entries, so a logging loop can’t flood the page

JavaScript

function render(forecast) {
  const now = forecast.current;
  gust.textContent = now.wind.gust;
  temp.textContent = now.temp;
}

Console

Fetching forecast for Tromsø

Using cached forecast from 08:00

Wind chill below -20 °C

Uncaught TypeError: Cannot read properties of undefined (reading 'gust') at render (app.js:14:31) at app.js:22:1

app.js is your JavaScript editor, so line 14 means line 14.

Break things. Your work survives.

Your code runs in a sandboxed frame with no way into ColdCode’s own page or storage, so a bad snippet can’t erase your project. Every change is saved in your browser as you type.

Snippets get their own localStorage, reset on every run
A second tab left open won’t overwrite newer work
If a run never finishes, it isn’t repeated on the next start

ColdCode

Your saved project
Theme, layout and Auto-run
Autosave on every change

Sandboxcode inlogs out

Preview frame

Your HTML, CSS and JavaScript
Its own throwaway storage
No way into ColdCode’s data

Allowedallow-scriptsallow-formsallow-modalsallow-popups

Blocked~~allow-same-origin~~

Arrange it the way you think.

Put the editors left, right, above or below the preview, or work in one full HTML document. Titles, meta tags and links in your <head> survive the switch.

Eight layouts, remembered between visits
On wider screens, drag a divider to resize the panes
Stacks into one column on small screens

Split editors

Full code

Showing: Editors Left

Plain files in. Plain files out.

Bring in an existing page and ColdCode splits it into HTML, CSS and JavaScript. Take your work with you as one HTML file, a ZIP, or a file at a time. There’s no proprietary format and nothing to migrate.

Import a whole page, separate .html, .css and .js files, or one file into one editor
Unzip an export and its files import straight back in

Import and split

weather.htmlHTMLCSSJavaScript

Export

project.html

One self-contained file

project.zip

index.html, style.css and app.js

One at a time

Each editor downloads its own file

For when a whole project is overkill.

Most front-end questions are small. Open a tab, try the thing, see what happens.

Learning the web

Change one value and watch what it does. When something breaks, the console says what and where.

Teaching a class

Nothing to install on classroom machines and no student accounts. Open a tab, put it on the projector, start.

Reproducing a bug

Cut a problem down to the smallest HTML, CSS and JavaScript that shows it, then attach it to the issue as one file.

Checking AI-written code

Paste what an assistant wrote and run it here first, before it goes into your own project.

Fair questions.

Looking for a detail? The spec sheet lists everything ColdCode does.

Where is my code saved?

In your browser’s local storage, every time you make a change. Nothing is uploaded. Clearing your browser’s data for the site deletes it, so download anything you want to keep.

Is ColdCode free?

Yes. The editor is free to use, and you don’t need an account.

Can I use libraries like React or Tailwind?

Yes, if they load from a CDN: add a <script> or <link> tag to your HTML, as on any web page. There’s no bundler or build step, so your code has to run in the browser as written.

What happens if my code freezes the page?

In Chrome the preview runs in its own process, so the editor stays responsive. Firefox and Safari share one thread, so the tab can freeze until the browser stops the script. Either way, ColdCode won’t run that code again on the next start, and Auto-run stays paused until you press Run.

Can I share what I make?

Download your project as one self-contained HTML file or a ZIP, and send that. Share links are planned.

Does it work on phones and tablets?

Yes. On small screens the panes stack into one column, and the editors handle touch and on-screen keyboards.

What’s coming next?

Share links and forks, version history, checks before you share, and an optional AI tutor that’s off by default. Plans can change; the changelog lists everything that has shipped.

Open a tab. Start typing.

Nothing to install, nothing to configure.

Open the editor