Online HTML, CSS & JavaScript Editor

What is an online code editor?

An online code editor lets you write HTML, CSS and JavaScript in your browser and see the result straight away, with nothing to install. You type in the editor panes on one side, and the preview on the other side updates as you go. It's the fastest way to try an idea, test a piece of code from a lesson, or build a small page without setting up files and folders.

This playground is built for learners. It has three separate panes, one for each language, so you can see clearly which code does what. The console underneath shows anything you print with console.log, plus any errors with the line they came from, which makes it much easier to find mistakes than in a bare browser tab.

Getting started in under a minute

1. Pick a template from the menu, or start with a blank page. Templates include a hello world page, a profile card, a flexbox navigation bar, a click counter, a mini to-do list and a fetch example.
2. Edit the HTML pane to change the content. The preview updates automatically while auto-run is on.
3. Switch to the CSS pane and change a colour, a font size or some spacing. You'll see the effect instantly.
4. Add JavaScript in the third pane. Use console.log() to print values and check them in the console below the preview.
5. Press Ctrl + Enter at any time to run the code yourself, which is handy if you've turned auto-run off.

Test your page at different screen sizes

The device buttons above the editor resize the preview to phone and tablet widths. That makes the playground a good place to practise responsive design: write a media query, switch to phone width and check that your layout changes the way you expect. Try building a layout with flexbox or CSS grid and watch how it adapts.

Save, share and download your code

Your code is saved in your browser as you work, so it's still there if you close the tab and come back later on the same device. The Share button copies a link that contains your code. Anyone who opens that link sees exactly what you wrote, which is useful for asking a friend or teacher for help. Download gives you a single .html file with your HTML, CSS and JavaScript combined, ready to open on any computer or upload to GitHub Pages.

Ideas to try in the playground

• Copy an example from any HTML, CSS or JavaScript lesson and change it until it breaks, then work out why.
• Rebuild a section of a website you like, such as a navigation bar or a pricing card.
• Practise DOM manipulation by making a button that changes the page.
• Fetch data from a public API with the Fetch API and display it in a list.
• Start one of the projects here if you want more room than the project page gives you.

How the three panes fit together

When the preview runs, the playground builds one web page from your three panes. Your HTML becomes the body of the page, your CSS is added as a stylesheet, and your JavaScript runs after the HTML has loaded. That last detail matters: because the script runs at the end, document.querySelector can find any element you wrote in the HTML pane without waiting for a load event.

This mirrors how a real website is put together, where an HTML file links to a CSS file and a JavaScript file. If you later move your code into separate files on your computer, the adding CSS lesson and the where to put JavaScript lesson show the matching <link> and <script> tags.

Reading errors in the console

When something goes wrong in your JavaScript, the console shows the error message and the line it happened on. Beginners often skip over error messages, but they're the most useful clue you'll get. A message like Cannot read properties of null usually means a selector didn't find anything, so check that the id or class in your JavaScript matches the HTML exactly. is not defined usually means a typo in a variable or function name. Fix the first error first, because one mistake often causes several messages further down. The JavaScript errors lesson explains the most common messages in plain English.

Questions people ask

Do I need to sign in? No. Open the page and start typing. Your work is kept in this browser until you clear its data.

Is my code private? Your code stays in your own browser. It only leaves your device if you copy a share link and send it to someone.

Can I use libraries such as a chart library? Yes. Add a <script> tag that loads the library from a public CDN in the HTML pane, then use it in the JavaScript pane.

Playground or a code editor on your computer?

The playground is ideal for learning, quick experiments and sharing small examples. As your projects grow to several pages and files, you'll want a desktop editor such as VS Code, which the HTML editors lesson helps you set up. Many developers use both: an online editor to test an idea in seconds, and a full editor for the real project. Only HTML, CSS and JavaScript run here, because those are the languages browsers understand. Languages such as Python or Java need to be installed on your computer, and their courses explain how.