The Best Cloud-Based Code Playgrounds of 2021 (Part 1)

A plethora of front-end code playgrounds have appeared over the years. They offer a convenient way to experiment with client-side code and teach/share with others without the hassle of configuring a development environment.

Bryan Guner

Mar 20·6 min read

Typical features of these online playgrounds include:

• color-coded HTML, CSS and JavaScript editors
• a preview window — many update on the fly without a refresh
• HTML pre-processors such as HAML
• LESS, SASS and Stylus CSS pre-processing
• inclusion of popular JavaScript libraries
• developer consoles and code validation tools
• sharing via a short URL
• embedding demonstrations in other pages
• code forking
• zero cost (or payment for premium services only)
• showing off your coding skills to the world!

The following list is in no particular order and which playground you use is a matter of application and personal taste, they each have their own specialities.

1.) REPL.IT

My personal favorite for it’s simplicity, versatility and capabilities.

⚫No downloads, no configs, no setups

In your browser. Repl.it runs fully in your browser, so you can get started coding in seconds. No more ZIPs, PKGs, DMGs and WTFs.

Any OS, any device(I’m looking at you chromebook coders). You can use Repl.it on macOS, Windows, Linux, or any other OS .

⚫Clone, commit and push to any GitHub repo.

Repl from Repo. Get started with any Github repo, right from your browser. Commit and push without touching your terminal.

⚫Markdown Preview

>A new but fundamentally important feature

⚫No-setup Unit Testing

>Unit testing is a powerful way to verify that code works as intended and creates a quick feedback loop for development & learning. However, setting up a reproducible unit-testing environment is a time-consuming and delicate affair. Repl.it now features zero-setup unit testing!

⚫HTTPS by default

In the example below I have 72 solved Javascript Leetcode Problems but REPL.IT can handle almost any language you can think of.

Here’s another one that contains the Repl.it Docs:

JS-Fiddle

jsFiddle is a cloud-based JavaScript code playground that allows web developers to tweak their code and see the results of this tweaking in real time. The editor supports not only JavaScript and its variants but also HTML and CSS code, and it further supports popular JavaScript frameworks, such as jQuery, AngularJS, ReactiveJS and D3. The ad-supported site is also completely free to use.

⚫Entering and running code

JSFiddle has the notion of panels (or tabs if you switch into the tabbed layout), there are 4 panels, 3 where you can enter code, and 1 to see the result.

• HTML — structure code, no need to add body doctype head, that's added automatically
• CSS — styles. You can switch pre-pocessor to SCSS
• JavaScript — behavior. There are many frameworks and code pre-processors you can use

Once you enter code, just hit Run in the top actions bar, and the fourth panel with results will appear.

⚫Saving and Forking code

• Save / Update will do what you think, it’ll save a new fiddle or update an existing one (and add a version number to it)
• Fork will split out an existing fiddle into a new one, starting with version 0

StackBlitz

StackBlitz

• Installs packages ≥5x faster than Yarn & NPM 🔥
• Reduces the size of node_modules up to two orders of magnitude 😮
• Has multiple layers of redundancy for production grade reliability 💪
• Works entirely within your web browser, enabling lightning fast dev environments ⚡️

Dependencies still slip into the install process as dev & sub-dependencies and are downloaded & extracted all the same, resulting in the infamous black hole known as node_modules:

Dank, relevant meme (pictured Left)

This is the crux of what prevents NPM from working natively in-browser. Resolving, downloading, and extracting the hundreds of megabytes (or gigabytes) typical frontend projects contain in their node_modules folder is a challenge browsers just aren’t well suited for. Additionally, this is also why existing server side solutions to this problem have proven to be slow, unreliable

Then just paste the embed code in an iframe and you’re good to go!

On StackBlitz.com, you can create new projects and get the embed code from the ‘Share’ dropdown link in the top navigation like so:

Embed Options

<iframe src=”https://stackblitz.com/edit/angular?embed=1"></iframe>

🡩 Alternatively, you can also use StackBlitz’s Javascript SDK methods for easily embedding StackBlitz projects on the page & avoid all the hassles of creating/configuring iframes.

Here’s a sample project of mine, it’s a medium clone… (So Metta)… feel free to write a post… or don’t …but either way … as you can see… Stack Blitz enables you to write serious web applications in a fraction of the time it would take with a conventional setup.

Glitch

⚫Glitch provides two project templates that you can use to start creating your app:

1. Classic Website
2. Node.js

If you know the type of project that you would like to create, click here to get started! Or keep reading to learn more about the Classic Website and Node.js templates.

⚫Classic Website

The Classic Website template is your starting point for creating a static website that includes an index.html page and static HTML, JavaScript, and CSS. Just start typing and your work will be live on the internet! Static websites enjoy unlimited uptime too! This means that your website stays on 24/7 without using your Project Hours.

An existing project will be identified by Glitch as a static site if it does not contain one of the following files:

• package.json
• requirements.txt
• glitch.json

⚫Node.js

If you are looking to build a full-stack JavaScript application, choose the Node.js template. This template includes both front-end and back-end code using the popular Express Node.js application framework.

⚫Here are some other ways to get started on Glitch…

• Create an app by importing a GitHub repo.
• Build an app that integrates with a popular third-party platform or framework, by remixing one of these starter templates.

Still not sure where to start? Check out these categories of community-built apps for inspiration:

• Games
• Bots
• Music
• Art
• Productivity
• Hardware
• Building Blocks
• Learn to Code

Here’s a (temporarily) broken version of my personal portfolio .. hosted on glitch

Click ‘view app’ below to see how it renders

If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:

bgoonz’s gists

Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…

gist.github.com

bgoonz — Overview

Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…

github.com

Complete IDE

• AWS Cloud9  - Run any language on a full VM complete with a terminal built on Ace Editor .
• CodeEnvy  - Run any language on a full VM complete with Eclipse Che .
• StackBlitz - Run JavaScript with starting templates for Angular, React, or Ionic with full intellisense + instant error checking.
• CodeSandbox - Run JavaScript with starting templates for React, Vue, Angular, Preact and more with full intellisense, lint error checking and live collaborative editing.
• Snack Expo - Run JavaScript with React Native in the browser and on your mobile iOS or Android.
• Codeanywhere - Run many languages in a container with pre-built environment and a terminal.
• WebAssembly Studio - Run C, Rust, Wat, or AssemblyScript code as WebAssembly in the browser.
• Remix - Run Solidity with a compiler, debugger, Static Analyzer for security, and direct access to Ethereum main network and testing networks.
• Nativescript Playground - Run NativeScript with Angular, JavaScript, TypeScript, or Vue.js on your mobile iOS or Android device by scanning a QR code.
• Wide - Run Go with full intellisense code-completion, expression-info, and jump to declaration.
• Glitch - Run full Node.js projects with support for automating hosting, version control, CDN for assets, secure storage of secrets, real-time collaboration, full console access, GitHub import/export, server-side debugger, instant deployments, and more.
• Theia - Run any language on a full VM complete with a terminal built on Monaco Editor .
• Datalore - Run Python notebooks for data analysis and visualization, with real-time collaboration, incremental calculation, and integrated version control.
• MATLAB Online - Run MATLAB code, visualize results, share scripts and collaborate on mathematical computing software.
• Colaboratory - Run Python in a Jupyter notebook with ML libraries and free GPUs for running experiments.
• Coder - Run most languages on a full Linux VM complete with a terminal, go-to-definition, linting, live collaboration, and auto-scaling.
• Gitpod - Run any language on a full Linux VM complete with terminals, GitHub and Git integration, content assist, go-to-definition, linting, live collaboration, custom Docker workspaces, and integrated code review support.
• Browxy - Run Java, C, C++, C#, Python, or PHP with some syntax highlighting, input arguments, and publish to a public URL.
• Superblocks Lab - Run Solidity with a built-in browser Ethereum blockchain VM, Metamask integration (deployments to Testnet/Mainnet), transaction logger and live code your WebApp, powered by Monaco Editor.
• Appitr - Run JavaScript ES6 with React Native in the browser built on Monaco Editor and React Native Web.
• DrRacket - Run Racket with support for macro debugging.
• Google Cloud Shell editor - Run any language on a full VM complete with a terminal and editor based on Theia .
• Adaface PairPro - Run 24+ programming languages on a shared code editor with compiler and video conferencing, designed for interviews.
• Repl.it - Run over 50 different programming languages in a collaborative IDE with a terminal, webview, and repl that automatically hosts your projects and installs dependencies.
• Atheos - Run most languages using a PHP/Browser based IDE with a terminal, git integration, and syntax highlighting.
• HASH - Build and run JavaScript, Python, or Rust multi-agent simulations in the browser. Provides visualization, analysis, and experiment features.
• goormIDE - Run almost every programming languages with real-time collaboration, live pair programming, and built-in messenger.

Snippets

• Glot - Run snippets from over 30 languages as docker containers including C#, Kotlin, Julia, Go, and Ruby.
• Codiva - Run C, C++, Java snippets with background compilation and some intellisense code-completion.
• Try It Online - Run snippets from over 300 languages including esoteric code-golf languages.
• JDoodle - Run snippets from over 100 languages including Haskell, Prolog, MySQL, and MongoDB.
• Judge0 - Run snippets from over 40 languages including Erlang, Elixir, OCaml and Octave.
• Ideone - Run snippets from over 60 languages including AWK, Swift, and SQLite.
• CPP Shell - Run C++ snippets with input flags for warning level and optimization level.
• RunKit - Run Node.js snippets + visualizations and share with a public URL.
• OnlineGDB - Run snippets of C, C++, Java, Python, PHP, HTML with some intellisense code-completion.
• SQLFiddle - Run snippets of MySQL, MSSQL, PostgreSQL, SQLite, and Oracle.
• Go Playground - Run snippets for Go programming language.
• Rust Playground - Run snippets of Rust programming language.
• TypeScript Playground - Run snippets of TypeScript with tsconfig options and full intellisense.
• Python Tutor - Run snippets of Python, JavaScript, TypeScript, Java, Ruby, C, and C++ code and see detailed step-by-step visualizations of run-time state.
• Codeboard.io - Run snippets in C, C++, Eiffel, Haskell, Java, Python, and use tests for automatic grading of code written by students.
• Kotlin-Playgrounds - Run Kotlin snippets with auto-completion, type checking and automatically translate Java to Kotlin code.
• 3v4l PHP Playground - Run PHP snippets on 200+ versions simultaneously with VLD opcodes and performance comparison.
• PasteRack - Run Racket snippets with support for sample and recent snippets.
• myCompiler.io - Run snippets from over 12 languages including C, C++, Java, Python, Ruby, Nodejs and more with auto code-completion, syntax highlighting, collaboration features like forking, commenting and sharing of code snippets.
• .NET Fiddle - Run C#, F# and VB.net snippets with NuGet Packages.
• Coding Rooms - Run snippets of JavaScript, Java, Python, C++ and more in a collaborative environment with intellisense, live chat, audio and video conferencing, and real-time editing.
• Scastie - Run Scala snippets with support of choosing different Scala versions, using any public library, configuring SBT settings, sharing a code snippet, embedding it into your website, etc.

Web Snippets

• CodePen - Run snippets in HTML/CSS/JS, popular with designers.
• JS Bin - Run snippets in HTML/CSS/JS/TS, provides Codecasting.
• JSFiddle - Run snippets in HTML/CSS/JS and collaborate in real-time.
• Flems - Run snippets in HTML/CSS/JS without a connection to the server (after page load).
• Plunker - Run snippets in HTML/CSS/JS/TS and collaborate by forking, commenting, and participating in the forums.
• Popcode - Run snippets in HTML/CSS/JS for use in the classroom, with student-friendly error messages and offline editing.
• Webpaw - Run snippets in HTML/CSS/JS with realtime collaboration, import sources and development utilities.