JavaScript Tools
Inar JavaScript Playground
Inar JavaScript Playground is a free online JavaScript editor and testing tool that lets you write, run, and experiment with JavaScript code directly in your browser. Perfect for beginners, students, and developers learning or testing JavaScript.
Inar JavaScript Playground
Write, run and preview JavaScript right in your browser
A fast, zero-setup JavaScript playground with a live DOM preview, a capture console, syntax
highlighting, line numbers and instant error reporting. Load one of the 30+ smart examples,
tweak it, and press Run — the preview updates, the console captures every
console.log, and the value of your final expression is shown in green.
Everything runs locally on your device; nothing is uploaded and no sign-up is required.
Editor
0 linesConsole
ready 0.0 msPreview
idleQuick reference
cheatsheetSession
0 runsWhat Is a JavaScript Playground?
A scratchpad for ideas that runs where you already are.
A JavaScript playground is a sandboxed editor that executes your code and shows you what it does — without creating a file, opening a terminal or installing anything. It is the fastest way to answer a question like "what does this array method actually return?" or "why is this loop producing that value?"
This playground pairs a code editor with two outputs. The live preview is
an isolated iframe where your code can create and style DOM elements, draw to a canvas, or
wire up event handlers — anything a real web page could do. The capture console
intercepts every console.log, console.warn, console.error
and console.info call and renders it with type-aware formatting, so objects,
arrays, numbers, strings and booleans each look the way they should. If your final statement
is an expression, its value is shown too — exactly like a browser console.
The entire tool runs in your browser tab. Your code executes inside a sandboxed iframe with no access to the parent page, and no server round-trip is involved. No account is needed.
Nothing you type or run is transmitted anywhere. The editor, preview and console all live inside this page, and code is executed by your own browser in a sandboxed iframe.
How to Use the Playground
Four steps from a blank editor to working code.
-
Write or load some code
Type directly into the editor, or open the Examples tab and click a card to load a ready-made snippet. Filter by difficulty or category, and search by keyword.
-
Press Run — or ⌘↵
Click the Run button or press Ctrl/⌘ + Enter. Your code executes inside a fresh sandboxed iframe, and the preview pane updates immediately.
-
Watch the preview and read the console
The preview shows any DOM your code created — elements, canvas drawings, styled text. The console fills with output, colour-coded by type: grey for
log, blue forinfo, amber forwarn, red forerror, and green for the value of your final expression. -
Iterate with auto-run
Flip the Auto-run switch and the playground re-executes about half a second after you stop typing. Useful for live-tweaking a value and watching the preview change.
Features
Everything you need for quick experiments, nothing you don't.
Live DOM preview
Your code runs in an isolated iframe, so any elements, styles, canvas drawings and event handlers you create appear instantly in the preview pane.
Syntax highlighting
A lightweight tokenizer colours keywords, strings, template literals, numbers, functions, properties and comments as you type.
Capture console
log, info, warn and error are all intercepted and rendered with the right colours and formatting.
Final-expression value
If your last statement is an expression, its value is printed — just like typing into a browser console.
Error reporting
Syntax and runtime errors are caught and shown with the error type, message and line number.
Smart example library
30+ searchable snippets across 12 categories, each tagged with a difficulty level and a one-line preview.
Auto-run mode
Toggle automatic re-execution with a short debounce while you edit — great for live number tweaking.
Run history
Every execution is recorded locally so you can reload an earlier snippet with one click.
Type-aware output
Numbers, strings, booleans, null, undefined, arrays, objects, Maps, Sets and DOM nodes each get their own formatting.
Copy & download
Copy the editor contents or the console transcript, or download your code as a .js file.
Keyboard shortcuts
⌘↵ to run, ⌘L to clear the console, Tab to indent, and more.
Privacy first
100% client-side. Code runs in a sandboxed iframe and never leaves the browser.
What Runs, and What Doesn't
Knowing the limits saves you debugging the wrong thing.
Works out of the box
All standard JavaScript: variables, functions, classes, arrays, objects, Map, Set, regular expressions, JSON, Math, Date, promises, async/await, generators — plus the full DOM, canvas, event listeners and fetch to CORS-enabled APIs.
Needs a moment
Asynchronous work — setTimeout, fetch, promises — keeps running after the Run button returns. The console stays open and appends output as it arrives, so you can watch a delayed log appear.
Not included
The iframe is sandboxed with allow-scripts only, so localStorage, cookies and same-origin storage throw a SecurityError. There is no Node.js runtime, no file system, no npm packages and no import statements.
Frequently Asked Questions
Answers to the most common questions about the playground.
Is my code sent to a server?
No. Everything runs inside your browser tab. The editor stores your current code in localStorage on your own device so it survives a refresh, but nothing is transmitted anywhere. Your code itself runs inside a sandboxed iframe that has no same-origin access to this page.
How do I run my code?
Click the Run button in the toolbar, or press Ctrl/⌘ + Enter from anywhere in the editor.
What does the preview pane show?
Anything your code creates in the DOM. If you call document.createElement, set inline styles, append elements, draw on a canvas or attach event handlers, the result appears in the preview. Code that only logs to the console leaves the preview empty, which is normal.
What does the green console line mean?
That is the value of your final expression. If the last statement in your code is an expression rather than a declaration or a control structure, its value is printed — exactly like typing a line into a browser console.
Can I use async/await and fetch?
Yes. Promises and async/await work normally, and fetch can reach public APIs that send permissive CORS headers. Because the preview iframe has a unique origin, requests to servers without Access-Control-Allow-Origin: * will be blocked by the browser.
Why does localStorage throw an error?
The preview iframe is sandboxed without allow-same-origin, which is what makes it safe to run arbitrary code. That sandbox means localStorage, sessionStorage, indexedDB and cookies all throw a SecurityError. Use in-memory variables instead — they persist for the duration of a run.
Why did my infinite loop freeze the page?
JavaScript runs on the same thread as the page, so a loop that never ends will block the browser tab. If that happens, close or reload the tab. Always make sure a while loop has a condition that eventually becomes false.
Can I import npm packages?
No. This playground runs plain JavaScript in a browser environment. There is no module resolution, no bundler and no Node.js runtime, so import statements and require() calls will fail.
What is auto-run?
A toggle that re-executes your code roughly half a second after you stop typing. It is handy when you are tweaking a number and watching the result change, but it can be noisy for code with side effects, so it is off by default.
Is there a size limit on the code?
There is no hard limit, but the editor is designed for snippets rather than whole applications. Anything beyond a few hundred lines is better off in a real editor with a proper debugger.
Is the playground free?
Yes. It is completely free to use, with no account, no sign-up and no usage limits.
More Inar Developer Tools
More free, privacy-friendly tools from Inar Learn — built for developers and learners.
Inar Learn