As much as I love offline web development editors and IDEs, I hate the inconveniences which come with having to edit code, then open a browser to test changes. Even when a browser tab with the test file is open, you constantly have to jump from editor to browser and refresh the tab before any changes will show in the output. I have the preference of working on sites where the output is shown in real-time.

As soon as the code is written, the test-ready output is delivered within seconds. Conveniently, editable code and testable output are shown side-by-side. Another joy of these online playgrounds is the huge community of web designers and developers publishing code snippets for the world to take a look at.

1. Codepen

CodePen is one of the largest communities for web designers and developers where users can test and showcase user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor and open-source learning environment, where developers can create code snippets, named “pens”, and test them. Codepen’s editors come with some common functionality like normal ones, with respect to code indentation and colorful syntax highlighting. It also supports a huge array of preprocessors for HTML, CSS, and JS, including but not limited to, Pug, Slim, SCSS, TypeScript. The collaboration mode is also very helpful. You never have to lose your work, because it is automatically saved, and you can resume whenever you please. With similarities close to Github, feel free to fork and edit other user’s code as you wish.

2. JSfiddle

JSFiddle is a vibrant online community for testing and showcasing user-created and collaboration HTML, CSS, and JavaScript code snippets, most appropriately known as ‘fiddles’. It allows for simulated AJAX calls. Just like with Codepen, the clean interface puts the code and the result side by side, and results are applied immediately after clicking the run button. It features support for SCSS, as well as JavaScript libraries such as TypeScript, CoffeeScript, Vue and React. It keeps on improving, and recently rolled out a code hinting feature which will suggest some common CSS property and value names, same for JavaScript. Collaboration with other developers supported too.

Read more: 5 Best Online Front-End Web Development Playgrounds