Whether you’re a beginner programmer or an expert developer, code playgrounds are useful when sharing and learning with others.
A code playground is an online service where you can write, compile (or run), and share code with others. They also give you the ability to fork and play around with other’s codes.
If you’re learning web development and practicing your HTML or CSS skills, using a code playground would be useful to create simple web pages online. Also, you could take advantage of trend projects in those platforms and take them as learning resources.
On the other hand, if you’re a professional web developer and want to show off your work, code playgrounds are the perfect place to do it.
The best part is that most code playgrounds have a free tier, and you can embed code results into your website.
Let’s review some of them!
You can create a free account, save all of your fiddles, and also fork other people’s snippets.
Another impressive thing about JSFiddle is the collaboration sessions. You can create an audio-chat session while coding in the fiddle.
If you’re a blogger who wants to embed the result of code snippets and also their source code, JSFiddle would be an excellent option to go with.
Of course, at writing time, this code playground doesn’t support other popular programming languages like Python, Go, or PHP, so you can’t expect to build a full-stack app on it.
Free to use platform
Support for HTML, CSS, and JS
Fork any public fiddle snippet on the platform
Collaborate with other people using audio chat directly on the site
As with most of these platforms, there’s an “extra” plan that helps to maintain them up and running. If you’re relying on them, you should consider backing them up.
Codepen isn’t just a code playground but a community of developers that want to improve their skills and sharing the best work they can.
With over 6 million users, it is one of the most used online code editors for frontend development. If you’re starting to learn front-end, finding ideas and motivation to continue your learning journey is ideal.
What about the development experience?
To be honest, it’s not a full-featured IDE as the other online editors we’ve seen through the article, but it offers a distraction-free environment in which you can write and run code.
This should be more than enough if you’re just starting with programming.
Another neat thing about Sololearn is the great community and the support for several programming languages — which is quite good if you want to play around with other technologies.
Free to use with your Sololearn account
Simple online code editor
Big community to share your code
Support for multiple languages
A great ecosystem with the Sololearn courses
To sum up, Sololearn’s code playground isn’t battery-included, but it works in what it’s meant to be, and if you’re already part of the millions of sololearners, you should give it a try.
The best thing about Codeply is the support for multiple frameworks and libraries out of the box and the responsive design-oriented code editor.
If you’re just starting out with a new framework like React, Vue, or Angular, Codeply is a great place to start due to a complete set of starting templates and a great community of over 40k developers.
Test your web muck up in different screen resolutions
Replit is possibly the most suitable online IDE for every developer out there. It includes literally everything you would need to build, from a simple home page to a complex web app using any modern JS library.
With Replit, you can code in over 50 languages, write apps synchronously with your peers, test your programs, integrate with GitHub, and get access to one of the biggest developer communities out there.
I could literally run out of paper mentioning all the features of Replit, so let’s jump into the main ones.
Run button: Run the project with customizable actions
If you can’t live without VS code, StackBlitz is the right option for you. Just as CodeSandbox, it’s based on the Monaco editor, which powers this popular code editor.
Just sign in with your GitHub account, and voila! You get access to a familiar environment.
Aside from the code editor experience, it’s a pretty solid playground. You can use ready-to-use templates for frontend frameworks and libraries like React, Vue, Angular, Svelte, and Ionic.
But the main peculiarity of this tool is the ability to play around with backend frameworks like Node.js, Next.js, and GraphQL.
Free “Cadet” plan
VS code experience inside your browser. That includes Intellisense, Project search, and more.
Fluid (really fluid) coding experience
Offline code editor (Hey! could be useful if you disconnect for a day or two)
Hosted app URL: easy live sharing
Last but not least, Glitch is a collaborative programming environment that makes creating a web app easier.
It has one of the most enjoyable interfaces to code in! Just take a look:
In case you’re wondering, yes, it has a dark mode.
Steps aside from the beautiful interface, Glitch is being used by millions because of its usability, live pair programming, and friendly community.
You can create any kind of full-stack apps using not only HTML, CSS, and JS, but Node.js (Backend), React, or Eleventy (which I didn’t know existed before heading into Glitches page).
Free plan with an option to upgrade
Develop full-stack apps in your browser
Live pair programming
Remix (or fork) other’s public apps
Nowadays, you could entirely build any web app using a code playground like the ones we’ve seen above. No more need to download heavy IDEs on your computer, while you can build, debug, test, and deploy without exiting your web browser.
If you’re not quite sure about transitioning to the usage of these tools, why not check out the 10 best code editors (those you need to install on your machine).
Self taught Python/Django developer, always learning and building awesome things. Technical writer, and creator of Developer Road.
Python is a very versatile language, and Python developers often have to work with a variety of files and get information stored in them for processing. One popular file format you’re bound to encounter as a Python developer is the Portable Document Format popularly known as PDF