HTML · CSS · JAVASCRIPT · LIVE PREVIEW · CONSOLE

Code Playground

Full workspace

Write HTML, CSS and JavaScript in a multi-file project and see it run instantly – a free browser IDE for learning, prototyping and sharing small web pages. Syntax highlighting, smart indentation, a live preview with phone and tablet sizes, a console that shows logs and errors, links between pages, images and JSON files, and ZIP download to host anywhere.

Your code runs in an isolated sandbox and is saved in this browser. Nothing is uploaded.

Auto-run

⬆ Upload

Ln 1, Col 1HTML

Console

›

Using Code Playground

A free online IDE for HTML, CSS and JavaScript with a live preview. Build small websites, practise coding, prototype a component or try a snippet: edit several files with syntax highlighting and smart indentation, watch the page update as you type, read console logs and errors, preview at phone and tablet sizes, add images and JSON data, and download the whole project as a ZIP to host anywhere.

Start from the blank project or pick a template such as Landing page, Canvas game, To-do app or Fetch JSON.
Edit index.html, style.css and script.js; add more files with ＋ File or upload images, fonts, JSON or a ZIP project.
Watch the preview update as you type (or press Ctrl+Enter to run). Switch pages, try phone or tablet widths and read logs and errors in the console.
Type JavaScript in the console box to inspect the running page, for example document.title.
Download the project as a ZIP or save the project file; your work is also kept in this browser.

Example

Open the Canvas game template, change the gravity from 0.3 to 0.1 in game.js and the balls float as soon as you stop typing; console.log shows how many balls are on screen.
Upload a photo, write <img src="photo.jpg"> in index.html and it appears in the preview; the ZIP download contains the photo and the page together.

Questions & answers

Is this a free alternative to CodePen or JSFiddle?

Yes for working on your own: multi-file HTML, CSS and JavaScript projects with a live preview, console, templates and ZIP export are free with no account. There is no public sharing or collaboration; download a ZIP to share your work.

Is it safe to run code here?

Your code runs in a sandboxed frame that is isolated from this website and from your saved data. Code can still load scripts or call web APIs you add yourself, so only paste code you trust.

Can I use multiple pages, images and JSON?

Yes. Links between your .html files work in the preview, images, fonts and other files you upload are found by their names, and fetch('data.json') returns files from the project.

Can I use libraries like React, Vue or Tailwind?

Yes, add their CDN <script> or <link> tag to your HTML. JSX and TypeScript are not compiled; use plain JavaScript or a library's browser build.

Where are my files saved?

In this browser, automatically. Download a ZIP or the project file to keep a copy or move to another computer.

Which keyboard shortcuts work?

Ctrl+Enter runs, Ctrl+/ comments lines, Tab and Shift+Tab indent, Alt+↑/↓ moves a line, Ctrl+D duplicates a line, Ctrl+Z / Ctrl+Y undo and redo, and brackets, quotes and HTML tags close automatically.

Does it work on a tablet?

Yes. The layout stacks the files, editor and preview; a keyboard makes typing code much easier.