HTML Playground
Write HTML, CSS and JavaScript on the left and watch the result appear on the right, instantly. Nothing to install, nothing to sign up for.
More free code examples on GitHubTab indents · Ctrl/Cmd + Enter runs · your code is saved in this browser
What you can build here
This is a full HTML document, not a snippet box. Write the <style> and <script> tags yourself and all three languages run together, exactly as they would in a real page you deployed.
That makes it useful for the things beginners get stuck on: seeing why a flexbox row will not centre, watching a CSS transition actually fire, or working out why a click handler never runs. Change one line, look at the right-hand side, and you have your answer.
The examples along the top are there to be broken. Load the counter, change the step from 1 to 5, and see what happens. That is the loop we teach in class, and it is faster than reading three articles about it.
Worth knowing
- ·Tab indents instead of jumping out of the editor.
- ·Ctrl / Cmd + Enter runs the code, useful with auto-run switched off.
- ·Your work is kept in this browser, so closing the tab does not lose it.
- ·Download saves a real .html file you can open anywhere.
Common questions
What is an HTML playground?
A page where you write HTML, CSS and JavaScript on one side and see the result on the other, with nothing installed and nothing to set up. You are not building a project — you are trying one thing and looking at what it does. This one keeps your work in the browser between visits, so a half-finished experiment is still here tomorrow.
How is this different from CodePen or JSFiddle?
Honestly, for professional work it is not better, and if you already use those, keep using them. This one exists because a beginner opening CodePen meets an account prompt, three separate panes and a lot of settings before writing a tag. Here it is one document, one preview, no sign-up — which is the state our students learn fastest in.
Is this HTML editor really free?
Yes. There is no account, no trial and no limit on how much you use it. It is a teaching tool we built for our own students and left open for everyone.
Does my code get uploaded anywhere?
No. Everything runs inside your own browser. Your work is saved in your browser's local storage so it is still there when you come back, and it never reaches our servers.
Can I use CSS and JavaScript here too?
Yes. Write a complete HTML document with <style> and <script> tags and all three run together, exactly as they would in a real page.
Can I save what I build?
Use the Download button to save your work as an .html file. Open that file in any browser and it runs on its own.
Want to go past experimenting?
A playground shows you what happens. It does not teach you why. That part we do in person in Amritsar, or online, on the Front End Development course.
Front End Development courseMore free tools
All of them run in your browser. Nothing is uploaded, nothing needs an account.