Online code editor: HTML, CSS and JavaScript in your browser

An online code editor lets you write and run code in your browser, with nothing to install. Our online code editor, the Code Editor, is for the three languages of the web: HTML for a page's content, CSS for how it looks, and JavaScript for what it does. Write each in its own tab and the page appears in a live preview as you type, with a console beside it for your messages and errors. It also sets coding problems and checks your answers.

Try it

Code Editor

Write and run code right in your browser

Open the editorGo to its page

What the code editor does

• Three tabs: HTML, CSS and JS, using Monaco, the code editor from VS Code, with syntax colouring (coloring in the US) and line numbers.
• A live preview: your page, refreshed shortly after you stop typing. Turn off Auto-run to refresh it only when you press Run (Ctrl+Enter).
• A console: anything your JavaScript logs with console.log, and any errors.
• Problems: 16 coding problems, 11 JavaScript functions and 5 CSS layouts, from beginner to advanced, with hints and a step-by-step solution.
• Saving and sharing: save your work to your history, share a link that opens your code, or download the three tabs as a single HTML file that runs anywhere.

How to use the online code editor

1. Open the Code Editor. The HTML, CSS and JS tabs sit above the editor, with the preview and console beside it. On a phone, switch between the code, the preview and the console.
2. Write your page structure in HTML, your styles in CSS and your script in JS. The three are joined into one page in the preview, so you don't need <link> or <script> tags to connect them.
3. Watch the preview update, or press Run. Check the console for logs and errors.
4. Press Random problem under Practice to get a challenge, or Problem to see the one you are on. Write your answer and the editor tests it.
5. Use Save, New and History to keep and reopen your work. Signed in, it saves to your account; otherwise this browser keeps your last 20.

A first example

Put a button and a paragraph in the HTML tab:

<button id="tap">Tap me</button>
<p id="count">0 taps</p>

Style it in the CSS tab:

button { font-size: 1.2rem; padding: 8px 16px; }
p { font-family: sans-serif; }

And make it count in the JS tab:

let taps = 0;
document.getElementById("tap").addEventListener("click", () => {
  taps = taps + 1;
  document.getElementById("count").textContent = taps + " taps";
  console.log("Tapped", taps);
});

Click the button in the preview: the paragraph counts up, and the console logs each tap. Mistype getElementById and the console shows the error, which is often the fastest way to find a bug.

The coding problems

JavaScript problems ask you to finish a function, such as reversing a string, counting vowels, checking for a palindrome or flattening an array. The editor runs your function on test cases, some visible and some hidden, so an answer that only works for the examples won't pass. CSS problems give you some HTML and ask you to style it, for example to centre a box, lay out three columns or build a card, and compare your result with the target.

Each problem has hints and a step-by-step solution if you get stuck. Here is the kind of answer a function problem wants, for one that returns whether a number is even:

function isEven(n) {
  return n % 2 === 0;
}

What the code editor doesn't do

• Other languages. It runs HTML, CSS and JavaScript only: no Python, Java or C++. The Algorithm Visualiser shows sorting code in Python and C to read.
• Several files or packages. There is one HTML, one CSS and one JavaScript file, and no npm packages or build step.
• A server. Code runs in a sandboxed frame in your browser, so there is no back end, database or file system.

Common mistakes

• Running script before the element exists. In this editor the JS runs with your HTML already on the page, but in a real file put <script> at the end of the body or use defer.
• A missing semicolon or bracket. Check the console: it names the line.
• CSS that doesn't apply. Check the selector matches: #tap for an id, .card for a class.
• Returning nothing. A problem's function must return its answer, not just log it.

Read next

Computer Science · Web and APIsWhat is JavaScript used for? Uses and examplesWhat JavaScript is used for: interactive websites, web apps, servers, mobile and desktop apps and games, with a working example and how it fits with HTML.