What are the best web development playgrounds?

Options
Considered

User
Recs.

Sep 16, 2023

Last
Updated

CodeSandbox vs repl.it vs CodePen

vs JSFiddle vs StackBlitz vs Glitch vs JSbin vs Codeply vs Plunker vs JS Full Stack Playground vs CssDeck vs WebpackBin vs Dabblet vs Katacoda vs Duomly vs JS Page vs Gunzip Engine

Specs

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Paid

Languages

Features

Free (Community)

Technologies

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Paid

Languages

Features

Free (Community)

Technologies

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Free

Languages

HTML, CSS, JavaScript, TypeScript

Features

Code Backend Node.js & Frontend, Live reload, preview in real time, sharing options, Less-code development

Free (Community)

Free

Technologies

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Languages

C#, F#, Java, Kotlin, Python, Node.js, GO, Docker, Kubernetes etc.

Features

Free (Community)

Technologies

Private Coding

Languages

Features

Dark mode, interactive courses, building projects, coming soon, blog

Free (Community)

Technologies

Javascript, HTML, CSS, React.js, Python, Sass, Machine Learning, Blockchain, Angular

Private Coding

Languages

Features

Free (Community)

Technologies

Private Coding

Languages

Features

Free (Community)

Technologies

Pros + Cons

Pro
Easy to use

Just pick a language and you are ready to start.

Comment

Pro
Live pair programming

Work together on the same project or concept.

Comment

Pro
Many languages supported

More than 30 languages supported.

Comment

Pro
Classrooms

Share code with teacher collaboration, track student progress.

Comment

Con
Projects are public

Only the paid version offers private projects.

Comment

Pro
Free custom domains

Replit provides you free custom domains for each and every repository.

Comment

Pro
Lots of hotkeys

Keyboard shortcuts to do anything you need to in your code editor.

Comment

Con
No private pens with free account

There is an option on Codepen for private pens, however it requires upgrading to a Pro account ($9/month).

Comment

Pro
Great display/profile page

The codepen profile page allows you to display all of your public pens, and control which order you want them to be viewed in. This is great for showing off your work to possible employers, other devs etc..

Comment

Pro
Live updating

[add description]

Comment

Con
Reload loop didn't fix

[add description]

Comment

Pro
Lots of support for frameworks and preprocessors

CodePen has an impressive amount of support for preprocessors (such as Jade, Haml, Slim, Sass, Less, Stylus, Coffeescript and PostCSS). There is also plenty of frameworks and libraries to pick from (Foundation, Bootstrap, Angular, D3, Backbone, Ember etc.).

Comment

Pro
Search other pens

You can search through other pens, either by keyword or popular, picked or recent.

Comment

Pro
Easily fork pens

To fork a pen only requires clicking one button, and you'll be able to modify the pen on your own account.

Comment

Con
Can't find useful pens

[add description]

Comment

Pro
Easily export your pen

CodePen makes it really easy to export code as a zip or Github Gist.

Comment

Pro
Great community pens

You can search through other pens, either by keyword or popular, picked or recent.

Comment

Pro
Real time output

[add description]

Comment

Pro
Supports a wide variety of frameworks and extensions

JSFiddle can switch to selection of frameworks and extensions including jQuery, AngularJS, ReactiveJS, D3 simply from a dropdown.

Comment

Pro
Easily collaboration

JSFiddle has a collaboration feature that makes it easy pair program.

Comment

Pro
Easy to test responsive designs

Allows you to resize the preview panel. It is especially nice when testing responsive design.

Comment

Con
No auto-updating

JSFiddle requires you to save and run your code any time you want to see changes.

Comment

Con
Codesandbox is better

There is now codesandbox which is better.

Comment

Pro
TypeScript autocompletion

Which is a feature not available in Plunker.

Comment

Pro
Very similar environment as Visual Code editor

[add description]

Comment

Pro
Fast

It feels much faster than Plunker for Angular 4 code.

Comment

Pro
adding dependencies

[add description]

Comment

Con
Nice UI

Looks great and makes it more enjoyable to work with.

Comment

Pro
Embed support

You can embed Glitch apps anywhere on the web. Embed works easily with most blogging tools like Medium and Wordpress.

Comment

Pro
Git support

Each project has its own git repo hosted by Glitch. And you can export/import to Github.

Comment

Pro
Easily fork projects with remix

Click "remix" to create a new copy of a project and edit instantly

Comment

Pro
Run any node.js or simple web project easily from the browser

[add description]

Comment

Pro
Great community pens

Lots of excellent featured projects, click to "remix" to edit them yourself.

Comment

Pro
Get help easily

The friendly "raise your hand" feature allows you to get help with your code from the community.

Comment

Pro
Shows results of console.log in the browser

[add description]

Comment

Pro
Library support

Supports a lot of libraries, e.g. Angular, JQuery, Bootstrap, Knockout, Vue ect.

Comment

Pro
Responsive frameworks included

Bootstrap, Foundation, Materialize, Pure CSS, Skeleton, Semantic can all be referenced simply.

Comment

Pro
Responsive preview

Test different screen widths and standard viewports.

Comment

Pro
Snippets in editor

Grab code snippets right from the editor UI.

Comment

Pro
Free

[add description]

Comment

Con
Private and upgrades not available

One time donation unlocks Private Ply's.

Comment

Con
Outdated and confusing UI

[add description]

Comment

Pro
Test actual HTML files

You can sandbox your actual html files with a head section, script tags, etc.

Comment

Pro
Fill size preview

Can open in a fill-sized web page like preview.

Comment

Pro
Multiple files and file structure

You can simulate actual website structure allowing you to sandbox multiple file situations such as Angular rather than just a single concept such as "how do I make this div work better."

Comment

Pro
Codecasts: record your process for others to review later on

[add description]

Comment

Pro
You can set your code to private or public all in the settings of each project

[add description]

Comment

Pro
Offers HTML, CSS, and JavaScript preprocessors

[add description]

Comment

Pro
It feels design oriented

Nice features like a visual representation of a dimension when you hover your mouse over the number, or a preview of the color and other parameters when you hover over the line of code.

Comment