# JavaScript Playground

Run JavaScript in your browser with live console output, interactive input, optional auto-run and a stoppable Web Worker.

## URL

https://ilham.dev/tools/javascript-playground/

## What It Does

A console for trying JavaScript without leaving the page, built on the Monaco editor — the same editor that powers Visual Studio Code — so the code gets syntax highlighting, bracket matching, code folding and a formatter. Write or paste a snippet, press Run, and see everything it logs, the value it returns and how long it took. Monaco is a large bundle, so it is fetched from a CDN only when you press Enable Monaco; until then, and if the fetch fails, the page uses a plain text area with the same run, copy, download and clear actions. Output streams live from a Web Worker. Use await prompt() for interactive input. The tool does not save or upload code, but snippets can make network requests.

## Features

- Live console output
- Interactive async prompt
- Run and Stop
- Optional auto-run
- Coding exercises and pyramid patterns

## Input

text input.

## Output

text output.

## Privacy

Processing happens locally in the browser.

No input data is uploaded to ilham.dev.

- Requires login: false
- Requires API key: false
- Stores user data: false


## Examples

- Why does the Monaco editor not appear straight away?
- Can I use top-level await?
- Is the code sandboxed?
- Why did my console.log output not appear?
- Can I edit other languages?
- Does it remember my code between visits?


## Limitations

- Worker execution is not a security sandbox; snippets can make network requests.
- No DOM or Node.js APIs. Execution outside input waits is limited to 30 seconds and 500 output rows; each answer may wait up to 2 minutes.


## Related Tools

- https://ilham.dev/tools/typescript-playground/
- https://ilham.dev/tools/python-playground/
- https://ilham.dev/tools/ruby-playground/
- https://ilham.dev/tools/c-playground/
- https://ilham.dev/tools/cpp-playground/


## Questions

### Why does the Monaco editor not appear straight away?

Monaco is several megabytes, so loading it on every visit would slow the page down for people who only want a quick text box. It is fetched on demand when you press Enable Monaco. Until then a plain text area is used, and it keeps working if the fetch fails.

### Can I use top-level await?

Yes. The snippet is wrapped in an async function, so await works at the top level and return gives back a value. That also means you do not need to wrap everything in an async IIFE yourself.

### Is the code sandboxed?

Code runs in a disposable Web Worker. document, window and Node.js APIs are unavailable. This is not a security sandbox; code can still make network requests. Only run trusted code.

### Why did my console.log output not appear?

Output streams live, including timers after the snippet returns. Stop, a new run or the 30-second execution limit outside input waits ends the worker. Output is capped at 500 rows.

### Can I edit other languages?

The playground is for JavaScript, so the editor stays in JavaScript mode. The plain text area still holds whatever you paste, but the highlighting and the formatter are the JavaScript ones.

### Does it remember my code between visits?

The editor starts from a small example each time. If you want to keep a snippet, use Copy before you leave, or paste it into your own notes.