One of the biggest 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. ( ) mistakes Bookmark or save to refer later. Let's get started Web Development Web Maker 💖 Free is an offline and browser-based codepen alternative. Just open it once and bookmark it. That's it. Web maker ✨ 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 💖 Free for personal use 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? CodeSandBox play.js ✨ 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 💖 Free plan available 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. StackBlitz ✨ Features Intellisense Hot reloading as you type npm support Offline mode 💫 Hosted app URL CodePen 💖(Extra features for ) Free PRO is an ultimate online playground for front-end devs and designers. You can create an art called 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. CodePen Pen ✨ 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 Glitch Codeply RunKit 💖 Free 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 tag in your code. You can also explore notebooks created by the RunKit community. RunKit script ✨ 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 Playcode 💖 Free Don't know where to put tags in your HTML files? No problem. script 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 Mobile Development DartPad 💖 Free , as the name says, is a playground for dart language. DartPad ✨ Features Library support for all the dart core libraries. support Dart formatter Embed dart pads Kotlin Playground 💖 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 💖 Free Again, as the name says, is an online playground for swift language. Don't have a MacBook? No problem. Online Swift Playground ✨ Features Online Support for 3rd party packages Swift on Server FlutLab 💖 + 💖💖 Free plan available Free Education plans Setting up a mobile dev environment is 10x harder than web dev. Here's for you. FlutLab ✨ Features Figma to Flutter Converter GitHub integration Cross-platform builders Real-time collaboration Debug system Autocompletion Intelligent search Integrated documentation FlutterFlow 💖 Free plan available helps you design your apps online super fast. Just drag and drop things. FlutterFlow ✨ 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 All-rounders There are some online IDEs and playgrounds which support a bit of everything. Replt 💖 + 💖💖 Free plan available Free Education plans 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. Replit ✨ Features Real-time collaboration GitHub integration 50+ languages support Host and deploy instantly Learning resources API and plugins Gitpod 💖 Free plan available With , 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. Gitpod ✨ Features Prebuilds Share running workspaces Production level dev tools Multiple workspaces Codeanywhere + Starting from $6/m/p Education discount is a powerful cloud IDE to build production-level applications. It has support for 72+ languages. Codeanywhere ✨ 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 💖 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 If you use AWS then cloud9 will be a big help because directly connect to AWS. 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. - 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. OnlineGDB has online compilers along with nice text editors for 6 languages - , , , , , Programiz Python C C++ Java C# JavaScript online compiler. CodeChef ideone Tutorialspoint's codingground OneCompiler myCompiler For Smartphones 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

Maker

Amazon

CodePen

Gitpod

Instantly

Super

A High Level Introduction to Web2.0 and Web3.0

How to Get Your Personal Website to the Next Level 

Website

Hire Me

Nominated for 2022 - HackerNoon Contributor of the Year - Mongodb

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Too Long; Didn't Read

Online Playgrounds to Learn Every Tech Stack on the Web

Online Playgrounds to Learn Every Tech Stack on the Web

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Most Common Ways to Connect your Node and React Applications

12 Animated JavaScript UI Design Components to Inspire Your Next Web Design Project 🎨✨

12 Best Basic HTML Snippets to Use Instead of Complex Libraries

Building a movie app interface with Vue.js

Codepen Embeds Now Supported in 3.0 Editor

CSS3 Animation Step by Step Guide

3 Most Common Ways to Connect your Node and React Applications

12 Animated JavaScript UI Design Components to Inspire Your Next Web Design Project 🎨✨

12 Best Basic HTML Snippets to Use Instead of Complex Libraries

Building a movie app interface with Vue.js

Codepen Embeds Now Supported in 3.0 Editor

CSS3 Animation Step by Step Guide

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps