If you just want to whip up a quick HTML/CSS/JavaScript app and play around with it, the playground you choose will pretty much just be a matter of personal preference. If you want more features, though, like real-time collaborative coding, quick access to JS frameworks like React or Vue, back-end support, or even just an active creative community, you may want to shop around a bit.
CodePen
Probably the most popular front-end code playground out there is CodePen, and for good reason: it’s intuitive and easy to use, has a large and vibrant community, and has become an accepted standard for embedding functioning web code into pages. Its quick auto-updates and flexible viewing windows make it quite popular for things like CSS animation projects. It has CSS/JS preprocessors and can easily connect to external scripts (React, Vue, and anything else available via CDNjs) and even other pens. Overall, CodePen deserves its top spot, especially for front-end projects and portfolios. It’s not built for back-end, though, and some of its features, like collaborative coding, multiple projects (as opposed to individual pens), and live full-page views (live partial-page views are free), require a paid pro subscription.
JSFiddle
On second violin (though chronologically it’s one of the oldest) in the front-end code playground world is JSFiddle. As the name might imply, it’s JavaScript-oriented, so it offers more out-of-the-box JS features and less in the way of HTML/CSS. (Literally, it has default support for Sass but not for Less.) That’s not a huge issue, though, since with a little work you can add whatever HTML/CSS/JS features you need, and since it supports code hinting and auto-reloading, it may even be a bit better than CodePen in terms of overall coding capabilities. A big point in JSFiddle’s favor is that it offers collaboration mode (including voice and text chat!) for free, allowing you to work on code at the same time as other people. It doesn’t really have much of a community aspect and doesn’t showcase interesting projects, though, so it loses to CodePen on that front. Overall, if you have a project with more JS or need to code collaboratively, JSFiddle is a great option. If something about it bugs you, though, there are many very similar-feeling alternatives in the “Other Playgrounds” list below.
Glitch
Okay, so you’re not just looking to play around with front-end stuff: you need something that you can build a full-stack web app on. Many code playgrounds just let you code up HTML/CSS/JS and generate static web pages, but Glitch gives you a bit of storage space, 4000 requests an hour, and makes it pretty easy to run Node.js server-side code. For the absolute bargain price of $0.00, you get a way to build and instantly deploy small-scale projects, regardless of how much experience you have. It also comes with a whole raft of other great features: collaborative coding, version control (called “rewind”), lots of learning resources, good GitHub integration, easy embeds, a friendly community, tons of projects you can remix and play with, and even Visual Studio integration. Its front-end coding interface might not be quite as sleek as some other playgrounds’, but its overall functionality is just as good. If you’re looking for a quick and easy way to get a web app up and running (or you’re trying to learn how!), Glitch is a great first stop.
CodeSandbox
CodeSandbox is in the same category as Glitch but a bit more complex and full-featured. Where Glitch layers a fairly minimalistic interface over its fairly powerful functionality, CodeSandbox puts all that power right out in the open by using the same Monaco Editor that powers VS Code. People who are comfortable with that IDE, therefore, will feel right at home with CodeSandbox. It’s hugely flexible and customizable, open source, lets you deploy full web apps (albeit with a few more steps than Glitch), hosts your files, has a community vibe, and does much of the background legwork for you, freeing you up to just write code and deploy your app. It also has GitHub and VS Code integration, Emmet (an abbreviation expander), and a ton of other features that power users and less-experienced coders alike will appreciate. It’s probably overkill if you’re just messing around, but if your project just doesn’t fit in a CodePen anymore, and you don’t mind a bit of a learning curve, check out CodeSandbox.
Repl.it
This playground/IDE isn’t at the end because it’s my least favorite (it’s certainly not): it’s because Repl.it is in a category all its own. It supports a ton of languages, from Python to LOLCODE (the preferred programming language of Lolcats), has front-end and back-end code support, lets you deploy sites and apps, comes with very tight GitHub integration, hosts a large and very active developer community, and has an intuitive interface that belies how powerful it really is. Repl.it has all the features you’ve come to expect from the other playgrounds on this list, from collaborative coding to embedding, and while it’s still primarily a tool for prototyping and sharing code, it definitely has enough juice for most small- to medium-size projects (as long as you have a steady Internet connection). It may be a bit much if you’re just doing front-end designs or if you’re new to code, but if you program at all regularly, it’s worth exploring.
Other very awesome playgrounds to check out
The playgrounds above are my personal go-tos, but there are plenty more. They’re all very capable of doing the basics, and each one has its own twist to appeal to a different need. JSFiddle clearly inspired many of them, so if you’re looking for an alternative to that app, you may find it here.
Liveweave: a lot like JSFiddle, but more design-oriented. It especially stands out for its built-in CSS, color generator tools and its vector editor.JSItor: a JSFiddle alternative with a very similar feel and, notably, Android/iOS apps.StackBlitz: an excellent browser-based IDE built with the Monaco Editor that powers VS Code. It feels a bit like CodeSandbox but is a bit simpler since it lacks backend support.Flems: barebones, minimalist playground. Perfect if you want something with 0 nonsense and/or distraction-free.JSBin: a more minimalist version of JSFiddle.CSSDeck: a very simple front-end playground. If you want a no-frills way to test out a few ideas in HTML/CSS and basic JS, it’s a fine choice.ICECoder: it’s an online playground with features comparable to many of the others, but its main draw is that it’s also a downloadable program that runs in your browser, essentially making it an offline browser-based IDE.Plunker: a front-end tool that lets you play around with files a bit more than some other playgrounds and has good desktop/GitHub integrations.Scrimba: okay, this one isn’t strictly a code playground – it’s a site with an innovative video/code editor combination that gives you a learning environment and playground at the same time. Worth a look for learners!Web Maker: good front-end playground with offline functionality and even CodePen integration!Dabblet: pretty basic HTML/CSS/JS playground but nice design.PlayCode: a nice, basic HTML/CSS/JS playground. The biggest downside: an annoying message that pops up every 60 seconds telling you to upgrade to a pro plan.
There are too many! Which one do I choose?
Yes, there are a million web code playgrounds, but don’t get lost deciding between them and letting that suck up time you could be spending actually making things! If you have a halfway-decent idea of what you’re looking for in an online coding environment, just narrow it down to two or three apps that have those features, try working with each of them a bit and seeing which one you find yourself gravitating toward. A lot of them have GitHub integration and/or export/import features anyway, so it’s not like you’re locking yourself into a bad decision forever. I personally use CodePen for simple static pages and design experiments and Glitch for bigger projects, though I do appreciate CodeSandbox’s VS Code design and Repl.it’s console. If I missed your favorite playground or neglected to mention an awesome feature, comment below so others can find it!
