Online playgrounds for every technology
Tags: webdev, appdev, tooling
Published: 2022-02-28 17:24:31

One of the biggest [mistakes](https://dev.to/itsrakesh/avoid-these-mistakes-when-you-are-learning-a-new-technology-1l8j) 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._)

## Let's get started

Jump straight into,
- <a href="#web">Web development</a>
- <a href="#mobile">Mobile development</a>
- <a href="#all">All rounders</a>
- <a href="#languages">Just for languages</a>
- <a href="#mobiles">For mobiles</a>

<div id="web"></div>
## Web development

### Web Maker [#](https://webmaker.app)

![web maker](https://cdn.hashnode.com/res/hashnode/image/upload/v1645950677865/Atv7tdg3w.png)

_**Free**_ 💖

**Web maker** is an offline and browser-based codepen alternative. Just open it once and bookmark it. That's it.

**Features** ✨
- Offline 😲
- Preprocessor support
- Add libraries
- Multiple layouts along with reopening the last saved layout and fullscreen preview
- Capture a screenshot of your art
- Open in codepen to share your work online
- JS console, integrated prettier support, command palette

### Code sandbox [#](https://codesandbox.io)

![codesandbox](https://cdn.hashnode.com/res/hashnode/image/upload/v1646024406176/1Y41WeqZ3.png)

_**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 **[play.js](https://codesandbox.io/post/introducing-play-js-live)**, you can do all the stuff from mobile 🤯. What a powerful tool, right?

**Features** ✨
- Optimized for frameworks
- GitHub integration
- npm - just import any npm package, CodeSandBox will automatically download those packages
- Multiplayer
- Live updates
- URL to share your art online

### StackBlitz [#](https://stackblitz.com)

![stackblitz](https://cdn.hashnode.com/res/hashnode/image/upload/v1646043763362/u8KbDP-Qa.png)

_**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** ✨
- Intellisense
- Hot reloading as you type
- npm support
- Offline mode 💫
- Hosted app URL

### CodePen [#](https://codepen.io)

![codepen](https://cdn.hashnode.com/res/hashnode/image/upload/v1646026438720/indtreLSo.png)

_**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** ✨
- Heavily customizable editor
- Private pens
- Embed pens
- Asset hosting
- Preprocessor support
- Live previews
- Website deployment
- Real-time collaboration
- Also some frameworks and libraries support

_Secret: You can learn most of the frontend things with codepen community :)_

Other front-end online playgrounds:
- [jsfiddle](https://jsfiddle.net)
- [Glitch](https://glitch.com)
- [Codeply](https://www.codeply.com)

### RunKit [#](https://runkit.com)

![runkit](https://cdn.hashnode.com/res/hashnode/image/upload/v1646029044704/SGh9olPW0.png)

_**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** ✨
- npm connected
- Visualize your data
- Time Traveling Debugging - Go back to previous work
- Async Friendly
- Download notebooks as node modules
- Share a URL with the internet
- Embed notebooks

Other NodeJs online playgrounds:
- [jdoodle](https://www.jdoodle.com/execute-nodejs-online)

### Playcode [#](https://playcode.io)

![playcode](https://cdn.hashnode.com/res/hashnode/image/upload/v1646031434645/o-F0f_YQw.png)

_**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** ✨
- Had support for frameworks and libraries
- Live preview
- Shows an immediate and exact description of the bug as you type code. Super easy to debug.
- Multiple layouts
- Switch language in one click

<div id="mobile"></div>
## Mobile development

### DartPad [#](https://dartpad.dev)

![dartpad](https://cdn.hashnode.com/res/hashnode/image/upload/v1646033691262/9zc5bAYEd.png)

_**Free**_ 💖

**DartPad**, as the name says, is a playground for dart language.

**Features** ✨
- Library support for all the dart core libraries.
- [Dart formatter](https://dart.dev/tools/dart-format) support
- Embed dart pads

### Kotlin playground [#](https://play.kotlinlang.org)

![kotlinplayground](https://cdn.hashnode.com/res/hashnode/image/upload/v1646036186950/T2857_WqS.png)

_**Free**_ 💖

Amazing online playground for Kotlin. Write, edit, run and share Kotlin code.

**Features** ✨
- Share your code with the internet
- Easily switch between different Kotlin versions

### Online Swift Playground [#](http://online.swiftplayground.run)

![swiftplayground](https://cdn.hashnode.com/res/hashnode/image/upload/v1646035499979/bUbaH9uhL.png)

_**Free**_ 💖

Again, as the name says, **Online Swift Playground** is an online playground for swift language. Don't have a MacBook? No problem.

**Features** ✨
- Online
- Support for 3rd party packages
- Swift on Server

### FlutLab [#](https://flutlab.io)

![flutlab](https://cdn.hashnode.com/res/hashnode/image/upload/v1646034585253/Qh2QC261z.png)

_**Free plan available**_  💖 + _**Free Education plans**_ 💖💖

Setting up a mobile dev environment is 10x harder than web dev. Here's **FlutLab** for you.

**Features** ✨
- Figma to Flutter Converter
- GitHub integration
- Cross-platform builders
- Real-time collaboration
- Debug system
- Autocompletion
- Intelligent search
- Integrated documentation

### FlutterFlow [#](https://flutterflow.io)

![flutterflow](https://cdn.hashnode.com/res/hashnode/image/upload/v1646061339648/cLAdTAj0k.png)

_**Free plan available**_  💖

**FlutterFlow** helps you design your apps online super fast. Just drag and drop things.

**Features** ✨
- Drag and drop builder
- Connect with Firebase & APIs
- Integrate & Deploy
- 50+ template screens
- Convert designs into code in minutes
- GitHub integration
- Build custom functions and widgets
- Collaboration
- Several integrations

<div id="all"></div>
## All-rounders
There are some online IDEs and playgrounds which supports a bit of everything.

### Replit [#](https://replit.com)

![replit](https://cdn.hashnode.com/res/hashnode/image/upload/v1646037160181/CryxSwFPN.png)

_**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 Replit to quick start their journey in that tech.

**Features** ✨
- Real-time collaboration
- GitHub integration
- 50+ languages support
- Host and deploy instantly
- Learning resources
- API and plugins

### Gitpod [#](https://www.gitpod.io)

![gitpod.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646044508474/CPL_DULNw.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** ✨
- Prebuilds
- Share running workspaces
- Production level dev tools
- Multiple workspaces

### Codeanywhere [#](https://codeanywhere.com)

![codeanywhere](https://cdn.hashnode.com/res/hashnode/image/upload/v1646046856318/LISN18aIx.png)

_**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** ✨
- Supports various languages
- Work on your own servers - no need to store your code on the Codeanywhere server.
- Containers support
- Web-based terminal
- Preview with private URLs
- Live collaboration
- Autocomplete
- Linter, code formatting, integrated debugger, advanced refactoring and advanced navigation.

### CodeTasty [#](https://codetasty.com)

![codetasty](https://cdn.hashnode.com/res/hashnode/image/upload/v1646059132616/MHfA92lRh.png)

_**Free plan available**_  💖

This one is another powerful cloud IDE with lots of features. No need setup required, just start building stuff.

**Features** ✨
- Desktop-like speed
- Extensions support
- Support for 40+ languages
- Collaboration
- Terminal

### AWS Cloud9 [#](https://aws.amazon.com/cloud9)
If you use AWS then cloud9 will be a big help because directly connect to AWS.

<div id="languages"></div>
## For just languages
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. 

- [OnlineGDB](https://www.onlinegdb.com) - GDB online is an online compiler and debugger tool for C, C++, Python, PHP, Ruby, C#, VB, Perl, Swift, Prolog, Javascript, Pascal, HTML, CSS, JS.
- [Programiz](https://www.programiz.com) has online compilers along with nice text editors for 6 languages - [Python](https://www.programiz.com/python-programming/online-compiler), [C](https://www.programiz.com/c-programming/online-compiler), [C++](https://www.programiz.com/cpp-programming/online-compiler), [Java](https://www.programiz.com/java-programming/online-compiler), [C#](https://www.programiz.com/csharp-programming/online-compiler), [JavaScript](https://www.programiz.com/javascript/online-compiler)
- [CodeChef](https://www.codechef.com/ide) online compiler.
- [ideone](https://ideone.com)
- Tutorialspoint's [codingground](https://www.tutorialspoint.com/codingground.htm)
- [OneCompiler](https://onecompiler.com)
- [myCompiler](https://www.mycompiler.io)

<div id="mobiles"></div>
## For smartphones
All the above 😂.(Some may not support for mobile browsers)

---

Some of these are very powerful, so don't think like local dev environment is faster than the cloud environment.

---

I personally like to use codesandbox and replit. What about you? Do share in the comments 👇, also add to this list if you know any other online playgrounds.

---

Hope you find this useful. If so, follow for more weekly awesomeness ✍️🤗.