Web developer, technical writer and OSS contributor. I write about web development, technologies and my learnings.
One of the biggest mistakes beginners do while learning a new technology is local setup. Many people procrastinate a lot at this step. And the reason for this is you don't know how things work. You need to get some basic understanding of that tech. So you can use these online playgrounds that have all things set up for you so that you can start learning right away. In this blog, I am going to share some amazing online playgrounds for various techs and also some production-level online IDEs. (Bookmark or save to refer later.)
web maker
Free ๐
Web maker is an offline and browser-based codepen alternative. Just open it once and bookmark it. That's it.
Features โจ
codesandbox
Free for personal use ๐
CodeSandBox can be used to build an entire full-stack web application. You can say CodeSandBox as an online version of VSCode along with everything set up for you. It supports all different javascript frameworks and libraries like react, vue, angular etc. Not only that CodeSandBox has also a real-time collaboration feature so you can see others editing your project ๐. Wait! CodeSandBox also announced , you can do all the stuff from mobile ๐คฏ. What a powerful tool, right?
Features โจ
stackblitz
Free plan available ๐
StackBlitz is another amazing online IDE for building full-stack applications. It has support for most of the frontend and backend(NextJs, Graphql, NodeJs starter and HTTP server) frameworks and libraries.
Features โจ
codepen
Free ๐(Extra features for PRO)
CodePen is an ultimate online playground for front-end devs and designers. You can create an art called Pen and share it with the internet. CodePen is more of a community than an editor. Get inspiration from creations by devs and designers across the world.
Features โจ
Secret: You can learn most of the frontend things with codepen community :)
Other front-end online playgrounds:
runkit
Free ๐
RunKit is a notebook-style NodeJS playground. It's like the jupyter-notebook but for NodeJS. To use RunKit, all you have to do is insert a script
tag in your code. You can also explore notebooks created by the RunKit community.
Features โจ
Other NodeJs online playgrounds:
playcode
Free ๐
Don't know where to put script
tags in your HTML files? No problem.
Super sleek javascript playground with instant live preview and console. Start code within seconds. No โnpm run startโ or anything.
Features โจ
dartpad
Free ๐
DartPad, as the name says, is a playground for dart language.
Features โจ
kotlinplayground
Free ๐
Amazing online playground for Kotlin. Write, edit, run and share Kotlin code.
Features โจ
swiftplayground
Free ๐
Again, as the name says, Online Swift Playground is an online playground for swift language. Don't have a MacBook? No problem.
Features โจ
flutlab
Free plan available ๐ + Free Education plans ๐๐
Setting up a mobile dev environment is 10x harder than web dev. Here's FlutLab for you.
Features โจ
flutterflow
Free plan available ๐
FlutterFlow helps you design your apps online super fast. Just drag and drop things.
Features โจ
There are some online IDEs and playgrounds which support a bit of everything.
replit
Free plan available ๐ + Free Education plans ๐๐
Replit is an ultimate browser-based IDE with lots of cool features and support to so many languages. Anyone who wants to start learning a new language chooses Replt to quick start their journey in that tech.
Features โจ
gitpod.png
Free plan available ๐
With Gitpod, you can set up development environments in seconds. Gitpod has the browser-based version of VSCode. This is the go-to tool for devs to work with GitHub, bitbucket and GitLab repos.
Features โจ
codeanywhere
Starting from $6/m/p + Education discount
Codeanywhere is a powerful cloud IDE to build production-level applications. It has support for 72+ languages.
Features โจ
codetasty
Free plan available ๐
This one is another powerful cloud IDE with lots of features. No need setup required, just start building stuff.
Features โจ
If you use AWS then cloud9 will be a big help because directly connect to AWS.
To just learn a language all you need is a text editor and a compiler or equivalent tool. There are some great online text editors you can use instead of trying to figure out how to install a compiler.
All the above ๐.(Some may not support for mobile browsers)
Some of these are very powerful, so don't think that your local dev environment is faster than the cloud environment.
Hope you find this useful.
First Published here