The online Javascript playground that will blow your mind
Tags: javascript, react, vue, angular
Published: 2019-09-23 14:31:56

---
title: The online Javascript playground that will blow your mind
published: true
description: Online code playgrounds are a great way to try out code snippets without setting up a project locally and firing up your IDE. You can quickly validate your idea and share it with others. The majority offer a quick and dirty solution for this. However, most of them fall short when dealing with bigger applications.
tags: javascript, react, vue, angular
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ewgxazf5rf0b3nq7sdof.jpg
series: Tips & Tricks
---

Online code playgrounds are a great way to try out code snippets without setting up a project locally and firing up your IDE. You can quickly validate your idea and share it with others. The majority offer a quick and dirty solution for this. However, most of them fall short when dealing with bigger applications.

### The basics

Online code playgrounds offer a variety of basic, we can say must have, functionalities:

- syntax highlighting
- preview window
- file pre-processing (like Typescript, SASS)
- inclusion of external files and JavaScript libraries
- sharing via a short URL
- embedding demonstrations in other pages
- zero cost for basic features

There is a long list of editors that fulfill the above criteria: [JSFiddle](https://jsfiddle.net/), [CodePen](https://codepen.io/), [JSBin](https://jsbin.com/), [Liveweave](https://liveweave.com/), [PlayCode](https://playcode.io/), [Plunker](http://plnkr.co/), [JSitor](https://jsitor.com/).

### The problem

The above playgrounds are completely fine, but I wanted to share complete projects generated by framework CLIs (like [Angular CLI](https://cli.angular.io/), [Vue CLI](https://cli.vuejs.org/), and [CreateReactApp](https://create-react-app.dev/)). Although some playgrounds let you use frontend frameworks, those are usually accessed globally. The way you wouldn't write your next production application.

The features I wanted:

- use the same stack as on a production project
- import from Github
- use any NPM package

### The solution

The project that surprised and me and has the above features is [Codesandbox](https://codesandbox.io/).

![Codesandbox](https://thepracticaldev.s3.amazonaws.com/i/b75z7u3g39yiq1itt5m4.gif)

Codesandbox lets you import your Github projects or start a new React, Angular, Vue application generated by their CLIs. It just works and boots fast. I managed to migrate [my TodoApp implemented in React Hooks](https://codesandbox.io/s/github/blacksonic/todoapp-react-hooks) within seconds.

It has some nice additional features also:

- deployment to Netlify or Zeit
- VSCode integration (like shortcuts)
- live collaboration
- autocompletion
- linting
- devtool functionality
- Github committing
- container sandboxes for backend applications (Node.js)
- it's open-source, you can contribute

## Summary

I was amazed by the simplicity, speed, and feature set of Codesandbox. It feels like THE online playground that we needed. I've tried other playgrounds, but after this, I'm not looking back.

Hope you will feel the same and try out this awesome website.