DevSwitch.net
Sign in
Back to Tools
</>

HTML/CSS/JS Playground

Write and preview HTML, CSS, and JavaScript code in real-time

Web Dev Tools

Tip: Write your code in the editors and see live preview instantly. Your code is auto-saved to browser storage.

Runs in your browser

Live Preview

Edit HTML online and see it live

Write HTML in the first tab and the preview shows the page about a second after you stop typing. The JavaScript tab runs in the same page, and whatever it logs appears in the console under the preview, so you can edit HTML online and test a script without setting up files.

Your code is saved in this browser after every change, so a reload or a closed tab doesn't lose it. Upload Files loads an .html, .css or .js file into its tab, and Download saves all three as one ZIP.

What each tab does in the preview and the download

TabIn the live previewIn the ZIP download
HTML Placed inside <body> and rendered index.html, inside a full page with a title and links to the other two files
CSS Added to the page head as a <style> block, so the rules apply as you type style.css, linked from index.html
JavaScript Runs after the HTML, with console output shown under the preview script.js, loaded at the end of the body

A library works the same way as on any page: add its <script> or <link> tag with a CDN address to the HTML tab. An empty tab gets a short sample in the ZIP, so the download always opens as a working page.

Debug with the console

What it shows

  • console.log, info, warn and error from your script
  • Objects and arrays as formatted JSON
  • Uncaught errors with a line number

Worth knowing

  • The line number counts the whole preview document, so it is higher than the line in your JavaScript tab
  • Messages add up across runs; Clear empties the list
  • The terminal icon above the preview opens and closes the console

Before the code goes live

  • Make it smaller

    The HTML minifier strips comments and whitespace from the finished page. Whether that helps rankings is answered in does minifying HTML improve SEO.

  • Run code you trust

    The preview is not sandboxed: a script in it can reach this page and its browser storage. Paste code from strangers only after reading it.

  • Keep the files

    Browser storage is per device and is cleared with the site's data. Download the ZIP for anything you want to keep.

Pasted HTML on one line?

The HTML beautifier puts every element on its own indented line, so it is easier to edit here.

HTML playground questions

Yes, in this browser's local storage, about a second after you stop typing. It isn't available in other browsers or on other devices.

Select all the text in each tab and delete it. Reset Tool reloads the page and keeps the saved code.

index.html with your HTML inside a full page, style.css and script.js, linked from index.html. Open index.html in a browser to run the page with style.css applied.

Yes. On small screens the editor and the preview are stacked; switch tabs above the editor and scroll down to the preview.

No. The preview is built in your browser and the code is stored only in your browser's storage.