All tools

JavaScript playground

Run JavaScript with a real console, errors pointed at their line, on your device. Free, with no account or uploads.

Run JavaScript

Write JavaScript and it runs as you type, in a page of its own. The console shows what it logs and where errors come from, and runs what you type. Open an HTML file, its stylesheets and scripts, or a zip of them, by choosing them or dropping them here.

Start with
Start with a to-do listTo-do listA web pageReady to changeA blank pageNothing in itA React appJSX and React

Your code runs on this device and is never uploaded. The project is kept in this browser only if you turn that on.

How it works and help

A little help along the way

Follow these steps. Every option is explained underneath, and nothing you write leaves your device.

  1. Open the playgroundChoose what to start with: A web page, a small page that shows each part at work; A blank page, to start from nothing; or A React app or a Tailwind design. Then press Start coding. Every other starter (a grid, a form, a canvas and more) is under More options. The playground opens in its own window, as large as the screen.
  2. WriteThe HTML goes in the page's body, the CSS styles it and the JavaScript runs after both. The editors suggest tags, properties and names as you type, close brackets and tags, fold blocks and find and replace (Ctrl or ⌘ + F). Write a whole document, with <html> and <head>, in the HTML editor and it is kept as it is.
  3. Watch the pageThe result runs again a moment after you stop typing. Press Run (Ctrl or ⌘ + Enter) to run it at any time, for example after turning off Run as I type. Show it as wide as a phone, a tablet or a laptop, or open it in a window of its own.
  4. Read the consoleWhat the page writes with console.log, console.table and the rest shows under the result, with errors and the line they came from: press script.js:12 to go to that line. Objects and arrays open to show what they hold. Filter by errors, warnings or logs.
  5. Try things in the consoleType JavaScript into the line at the bottom of the console and press Enter: it runs in the page, and its answer is shown. Up and down bring back what you typed before.
  6. Arrange the windowDrag the lines between the parts, or focus one and use the arrow keys. In Settings, put the editors on the left, on top or on the right; fold an editor away with its minus button. On a phone, each part has a tab.
  7. Choose a languageEach editor's title is a menu: write Markdown instead of HTML, SCSS instead of CSS, or TypeScript, JSX or TSX instead of JavaScript. They are turned into HTML, CSS and JavaScript on your device before the page runs, and a line that cannot be is marked and named in the console.
  8. Use packages and TailwindImport a package by its name, such as import confetti from "canvas-confetti", and the page fetches it from esm.sh; JSX brings React the same way. Turn on Tailwind CSS in Settings to style with its classes and @apply.
  9. Tidy and type lessThe wand in an editor's title tidies its code with Prettier; Shift + Alt + F tidies all three, and Ctrl or ⌘ + Z puts it back. In HTML and CSS, type an Emmet abbreviation such as ul>li*3 and press Tab.
  10. Open your own filesPress Open files (under More options on the start), or drop them on the start or the window: an HTML page with its stylesheets and scripts, a few code files, or a zip of them. The page's own <style> and <script> go into the CSS and JavaScript editors, and links to the files you opened with it are taken out.
  11. Add libraries and fontsIn the menu, Head and outside files takes the address of a stylesheet or script on another site, such as a CDN, and writes it into the page before your code. Anything else for the page's <head>, such as a font's link or an import map, goes in the head editor below.
  12. Save it or share itSave writes one HTML file with your CSS and JavaScript inside, to open in any browser; the menu also saves a zip of index.html, style.css and script.js. Share as a link puts the whole project in the link itself. Turn on Keep this project on this device in Settings to find it again in the list when you come back.

Questions people ask

What does the console show?
What the page writes with console.log, info, warn, error, table, group, count and time, values that open to show what they hold, and errors with the line they came from, which you can press to go there.
What happens with an endless loop?
Every loop is given a check that stops it once the script has run for two seconds without a pause, and the console says which loop it was, so the tab does not freeze. You can turn the check off.
Can I use npm packages?
Yes. Import one by its name, such as import confetti from "canvas-confetti", and the page fetches it from esm.sh when it runs. The console says which packages it fetched.

This page is the Code playground, opened for this one job; every other tool it has is one press away. Each of its settings is explained on the Code playground's own page.

Read the step-by-step guide

Guides

Same tool, other jobs

Tools nearby