Skip to main content
DevStackKit
All tools

JavaScript Playground

Run JavaScript in your browser and see console output, results and errors, with several files, a time limit and a zip download.

import { average, wait } from './utils.js';

const scores = [72, 85, 90, 64];
console.log('Average score:', average(scores));
console.table(scores.map((score, i) => ({ student: 'S' + (i + 1), score })));

await wait(300);
console.log('Done after a short pause');

Output

Press Run to see the output here.

Shortcuts: Ctrl+Enter run · / search (use ⌘ on Mac)

Free Online JavaScript Playground and Console

Run JavaScript and see the output. Write code on the left, press Run, and the console on the right shows what your code prints, the value of its last line and any error with its file and line. It runs in your browser, so nothing you write is uploaded. Use it to check a snippet, try a new array method or test a small function without opening an editor or a terminal.

How to use the JavaScript playground

  1. Type or paste code in main.js, or press Load the sample in the ⋯ menu to start from an example.
  2. Press Run (or Ctrl+Enter). Messages from console.log, console.table and friends appear on the right.
  3. For more than one file, press +, name it utils.js, and use import and export to share code between files.
  4. Choose a time limit under the editor. If a run gets stuck, press Stop.
  5. Open the ⋯ menu and choose Download all files (.zip) to keep your project in one folder.

What runs and what does not

The code runs in a background worker, so it has no page to draw on: there is no document or window. To build a web page, use the HTML/CSS/JS Playground. Standard JavaScript, promises, timers, JSON and top-level await all work. Network calls are blocked unless you switch on the internet option. To tidy or shrink finished code, try the JavaScript Beautifier and the JavaScript Minifier.

Worked example

The sample project has two files. main.js imports a helper from utils.js, prints an average and a table, waits a moment, then finishes:

import { average, wait } from './utils.js';

const scores = [72, 85, 90, 64];
console.log('Average score:', average(scores));
console.table(scores.map((score, i) => ({ student: 'S' + (i + 1), score })));

await wait(300);
console.log('Done after a short pause');

Result in the console: Average score: 77.75, a small table of four students, then Done after a short pause.

Common mistakes

  • Looking for document or window: this playground has no page. Use the HTML/CSS/JS Playground for that.
  • Importing a package such as lodash before adding it: press Add packages first.
  • Using await at the top level of a file you import (not the main file): put it inside an async function instead.
  • Leaving a setInterval running: the run stays open until you press Stop or the time limit ends it.

Frequently asked questions

Is my code sent to a server?
No. The code runs in your browser, inside a background worker. Nothing you type is uploaded, and the code cannot read this site or the rest of your browser.
What is the value shown after an arrow (=>)?
When a file is a plain script, the playground shows the value of its last line, like a console would. Turn off "Show the last value" if you only want what console.log prints.
Can I use import, folders and packages?
Yes. Use the file explorer to make folders and files such as src/utils.js and write import { x } from "./src/utils" (./, ../, index files and missing endings all work). Press Add packages, type a name such as lodash or zustand@4, and press Add. The package is downloaded from esm.sh at that moment (your code is not sent, only the package name), pinned to the exact version, listed with its size, and saved with your project and its zip as package.json. Nothing is downloaded before you press Add.
Why did my code stop after a few seconds?
Every run has a time limit (10 seconds unless you change it) so an endless loop cannot freeze the page. Raise the limit under the options, or use the Stop button to end a run yourself.
Can my code call an API with fetch?
Only if you switch on "Let the code use the internet". It is off by default, so a fetch call fails with a clear message and nothing leaves your device by accident.
Does await work at the top of a file?
Yes. In the file that runs (main.js) you can write await at the top level, even next to import lines. The other files you import run normally, so keep await inside functions there.
How is this different from the browser console?
The browser console runs inside a page and can touch it. This playground runs your code in an isolated background worker, keeps your files together as a project, stops endless loops after a time limit, and lets you download everything as one zip.

Related tools

JavaScript BeautifierJavaScript MinifierRegex TesterJSON Parser

More Playground

HTML/CSS/JS PlaygroundWrite a web page and see it liveTypeScript PlaygroundCheck TypeScript and run itReact PlaygroundTry React components liveVue PlaygroundTry Vue components liveSvelte PlaygroundTry Svelte components liveTailwind CSS PlaygroundTry Tailwind classes and see the pageSQLite PlaygroundRun SQL on a small databasePostgres PlaygroundRun PostgreSQL in your browser

View all Playground tools →