HTML Tools
Inar HTML Playground
Inar HTML Playground is a free online HTML editor and coding playground by Inar Learn. Write, edit, preview, and test HTML code instantly with a simple, interactive workspace for learning and web development.
Inar HTML Playground
Write HTML, CSS & JavaScript — See It Live, Instantly
A free online HTML playground with a live preview and an integrated console. Edit HTML, CSS
and JavaScript side by side, watch the result render in real time, and debug with
console.log without leaving the page. Thirty-five ready-to-run examples cover
layout, components, dashboards, DOM scripting and canvas. Everything runs locally in your
browser — nothing is uploaded, and no sign-up is required.
Live preview
Console
0What is an HTML Playground?
A browser-based sandbox for writing and running web code with instant feedback.
An HTML playground is an online editor where you write HTML, CSS and JavaScript and immediately see the rendered result — without creating a project, installing anything, or setting up a build step. It is the fastest way to test an idea, reproduce a bug, or learn how a CSS property or DOM API actually behaves.
This playground pairs three code panes with a live preview and an integrated console. The
preview updates as you type (or when you press Run), and anything you
console.log() appears in the console panel below the preview — so you can debug
without opening DevTools. Each run starts from a clean document, so there is no leftover state
between experiments.
Inar HTML Playground runs entirely inside your browser. Your code never leaves your device — there is no upload, no server call and no third-party processing. The preview is rendered in a sandboxed iframe with a separate origin.
The Three Panes
Each pane is injected into the preview at a different point in the document.
HTML
Injected into the <body> of the preview document. Write any markup you like — elements, attributes, forms, <canvas>, <svg>. A full document is generated for you, so you only write what goes inside the body.
CSS
Injected into a <style> block in the <head>, so it applies before the body renders. There is no reset applied — start with * { box-sizing: border-box; } if you want one.
JavaScript
Injected after the HTML, inside a <script> tag. Because it runs last, the DOM is already parsed — you can query elements immediately without a DOMContentLoaded listener.
Features
Everything you need to prototype and debug without leaving the browser.
Live preview
Auto-run re-renders the preview as you type — or switch it off and press Run when ready.
Integrated console
console.log, warnings, errors and uncaught exceptions all appear inline.
Three synced panes
HTML, CSS and JavaScript editors with line numbers, tab support and horizontal scrolling.
35 examples
Dashboards, data tables, command palettes, timelines, charts — a professional starting library.
Fullscreen preview
Blow the result up to a full modal, or open it in a brand-new browser tab.
Export
Copy the code, download a single self-contained .html file, or grab a snippet.
Session persistence
Your code is saved to local storage, so a refresh never loses your work.
Search & filter
Find an example by name or jump straight to a category.
Statistics
Line counts, byte sizes, element counts and a breakdown per pane.
Privacy first
100% client-side, in a sandboxed iframe. Nothing is uploaded anywhere.
How to Use the Playground
Five quick steps from idea to working prototype.
Pick an example or start from scratch
Open the Examples tab and load one of 35 runnable demos, or press Reset for a clean slate.
Write your markup
Use the HTML pane for the body content. A full document is generated around it, so you never write
<html>or<head>unless you want to.Style it
Switch to the CSS pane. With Auto-run on, the preview updates about a third of a second after you stop typing.
Add behaviour and debug
Use the JS pane for interactivity. Anything you log shows up in the console below the preview — along with warnings, errors and uncaught exceptions.
Export
Use Copy for the full document on your clipboard, Download to save a self-contained
.htmlfile, or the Export snippets tab for embeds and per-pane code.
Keyboard Shortcuts
Small things that make the playground feel fast.
Run
Ctrl / Cmd + Enter re-renders the preview immediately, regardless of the Auto-run setting.
Download
Ctrl / Cmd + S saves the current document as a .html file.
Copy
Ctrl / Cmd + Shift + C copies the whole document to the clipboard.
Indent
Press Tab inside any pane to insert two spaces. Shift + Tab removes up to two leading spaces.
Close modal
Esc closes the fullscreen preview.
Console
Log objects and they are serialised with JSON.stringify(obj, null, 2) so nested data stays readable.
Frequently Asked Questions
Answers to the most common questions about the HTML playground.
What is an HTML playground?
An HTML playground is an online editor that runs HTML, CSS and JavaScript in the browser and shows the rendered result immediately. It removes the need to create a project or set up tooling just to test a snippet.
Is my code uploaded to a server?
No. The preview is generated entirely in your browser and rendered inside a sandboxed iframe. Nothing is transmitted anywhere.
Can I use external libraries like React or Tailwind?
Yes. Add a <script src="…"> or <link rel="stylesheet" href="…"> tag inside the HTML pane and it will load in the preview. Note that CDN content requires a network connection.
Why did my <script> tag inside the HTML pane not run?
Scripts inserted as part of a page's initial markup do run, but some constructs (like document.write after load) behave unexpectedly. The cleanest approach is to put your logic in the JS pane, which is injected after the DOM and always executes.
Why does localStorage throw inside the preview?
The preview iframe is sandboxed without allow-same-origin, which gives it an opaque origin. That blocks storage APIs for security. If you need persistence in a demo, keep the state in a variable, or export the file and run it directly.
Is the code saved if I close the tab?
Yes. Your HTML, CSS and JavaScript are written to the browser's local storage on every change, so reopening the page restores your work. Use Reset to clear it deliberately.
Does the preview update while I type?
Yes, when Auto-run is on. The preview is refreshed roughly a third of a second after you stop typing. Turn Auto-run off and press Run (or Ctrl/Cmd + Enter) for manual control.
Can I download the result as a single file?
Yes. Download produces a self-contained .html file with your CSS inlined in a <style> block and your JavaScript in a <script> block, ready to open in any browser.
Is there a limit on how much code I can write?
Practically, no. Very large documents may slow down the auto-run loop; if you notice lag, switch Auto-run off and run manually.
Is the HTML Playground free?
Yes. Inar HTML Playground 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