20 JavaScript Playgrounds to use in 2019
Tags: tools, javascript, es6
Published: 2019-11-12 14:12:21

---
title: 20 JavaScript Playgrounds to use in 2019
published: true
description: 20 tools for execute js code
tags: Tools, JavaScript, ES6
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9x3vk5ig73pgphhn652k.png
---

In the daily development of the front end, we use our favorite IDE to debug JavaScript code. For example, I like two code editors, **Sublime Text 3** and **VS Code**. I also used **Atom** in previous years. 

Occasionally, we find ourselves needing to quickly share and or collaborate with a friend or colleague in our local projects, the importance of the online JavaScript runtime environment is reflected.

In order to slove such problems，many excellent online editors have emerged in the industry. For example `JS Bin`、`JS Fiddle`、`Code Pen`、`Code Sandbox`, etc. I also found some good other options in the past few years, and then look at the browser favorites, there are more than 20 kinds.

Now we use 20 tools to execute a factorial function that has been optimized by TCO.

![banner](http://xlbd.me/content/images/2019/11/201911_runjs-carbonize-1.png)

## 1、iTerm2

Installing the node environment in the terminal tool and using the node runtime environment to execute the JS code is a must for us to learn the node.

![201911_runjs-iTer](http://xlbd.me/content/images/2019/11/201911_runjs-iTerm2-1.jpg)

## 2、Sublime Text 3

In Sublime Text 3，we can use `build system` create build command，use build command run js code quickly

Shortcuts：<kbd>CMD</kbd> + <kbd>B</kbd>

### config file

fisrt install the dep `babel-cli`

```bash
npm i -g babel-cli
```

new `build system`

```json
{
    "path": "/usr/local/bin",
    "working_dir": "${project_path:${folder}}",
    "selector": "source.js",
    "encoding": "utf-8",
    "shell": true,
    "windows": {
        "cmd": ["taskkill /f /im node.exe >nul 2>nul & node $file"]
    },
    "osx": {
        "cmd": ["killall node >/dev/null 2>&1; node $file"]
    },
    "linux": {
        "cmd": ["killall node >/dev/null 2>&1; node $file"]
    }
}
```

### Preview

![201911_runjs-sublime](http://xlbd.me/content/images/2019/11/201911_runjs-sublime-1.jpg)


## 3、VSCode

In VSCode，we can run JS with `task`，actually we run js by `node` use the termnal

Shortcuts：<kbd>CMD</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>

### Config File

> /.vscode/tasks.json

```json
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run ES6",
      "type": "shell",
      "command": "node ${file}",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}
```

### Preview

![201911_runjs-vscode](http://xlbd.me/content/images/2019/11/201911_runjs-vscode-1.jpg)

## 4、use browser console

we use browse console feature debug js code offen, like Chrome's devtools、Firefox's web console, we are famlier with this tools

![201911-runjs-browser-console](http://xlbd.me/content/images/2019/11/201911-runjs-browser-console-1.jpg)


## 5、Firefox Scratchpad

In the `Firefox` browser, there is a particularly useful feature called **Scratchpad**, where you can enter some JS code to see the result.

shortcut：In the `Firefox` browser <kbd>Shift</kbd> + <kbd>F4</kbd>

![201911_runjs-firefox](http://xlbd.me/content/images/2019/11/201911_runjs-firefox-1.jpg)

## 6、Chrome Sources Panel

Chrome provides powerful DevTools, where the `Sources` panel allows you to create some `Snippets` for easy execute JS code.

shortcuts：<kbd>CMD</kbd> + <kbd>Enter</kbd> run code

![201911_runjs-chrome-devtools](http://xlbd.me/content/images/2019/11/201911_runjs-chrome-devtools-1.jpg)


## 7、JS Bin

[JS Bin](https://jsbin.com) is a live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

![201911_runjs-jsbin](http://xlbd.me/content/images/2019/11/201911_runjs-jsbin-1.jpg)

## 8、JS Fiddle

[JS Fiddle](https://jsfiddle.net/) is a good place for front-end coder to write demo examples. Here you can use some third-party libraries in CDN mode, which is very convenient to build a page demo.

Because the JS Fiddle tool itself does not provide a console panel, you can use the browser developer tools to print out JS code results.

![201911-runjs-jsfiddle](http://xlbd.me/content/images/2019/11/201911-runjs-jsfiddle-1.jpg)


## 9、CodePen

[CodePen](https://codepen.io/) It's a great online code editor that can write almost any front-end web application. 

![201911-runjs-codepen](http://xlbd.me/content/images/2019/11/201911-runjs-codepen-1.jpg)


## 10、“JavaScript Demo” in MDN

If you has been used MDN, maybe you remember that there will be a `JavaScript Demo` area in some JavaScript documentation, such as [JavaScript Standard built-in objects Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function), here you can execute some JS code

![201911-runjs-js-demo](http://xlbd.me/content/images/2019/11/201911-runjs-js-demo-1.jpg)

## 11、PLAYCODE

[PLAYCODE](https://playcode.io/) is a Quickly and Easily make Frontend Experiments

![201911_runjs-playcode](http://xlbd.me/content/images/2019/11/201911_runjs-playcode-1.jpg)

## 12、Flems

[Flems](https://flems.io/) is a playground for web development. It's ideal for prototyping ideas & sharing working front-end code examples

![201911_runjs-flems](http://xlbd.me/content/images/2019/11/201911_runjs-flems-1.jpg)


## 13、JSitor

[JSitor](https://jsitor.com/) Alternative of JSFiddle, Codepen & JSbin


![201911_runjs-jsito](http://xlbd.me/content/images/2019/11/201911_runjs-jsitor-1.jpg)

## 14、Code Sandbox

[Code Sandbox](https://codesandbox.io/) is an online editor that helps you create web applications, from prototype to deployment.

I use codesandbox to build some `vue` demo, it's really very nice tool

![201911_runjs-codesandbox](http://xlbd.me/content/images/2019/11/201911_runjs-codesandbox-1.jpg)

## 15、Web Maker

[Web Maker](https://webmaker.app/) is a blazing fast & offline web playground in your browser

Web Maker also provide Chrome Extension, you can use it offline

![201911_runjs-webmake](http://xlbd.me/content/images/2019/11/201911_runjs-webmaker-1.jpg)


## 16、LeetCode Playground

[LeetCode](https://leetcode.com/) Provides excellent Playground tools, supports switching in various languages, and also supports JavaScript

![201911_runjs-leetcode](http://xlbd.me/content/images/2019/11/201911_runjs-leetcode-1.jpg)


## 17、Repl.it Stop wasting time setting up a development environment. Repl.it gives you an instant IDE to learn, build, collaborate, and host all in one place.

[Repl.it](https://repl.it)

![201911_runjs_replit](http://xlbd.me/content/images/2019/11/201911_runjs-repl-it-1.jpg)

## 18、RunKit + npm

[RunKit + npm](https://npm.runkit.com) Try any Node.js package right in your browser

![201911_runjs-runkit-np](http://xlbd.me/content/images/2019/11/201911_runjs-runkit-npm-1.jpg)


## 19、StackBlitz

[StackBlitz](https://stackblitz.com/) Code the Future. In Your Browser（The online code editor for web apps）

![201911_runjs-stackblitz](http://xlbd.me/content/images/2019/11/201911_runjs-stackblitz-1.jpg)

## 20、Plunker Next

[Plunker Next](http://next.plnkr.co/) Plunker is the best tool to prototype, experiment, share and debug your ideas on the web platform. From idea to implementation, Plunker helps you build something quickly and frictionlessly.

![201911_runjs-plunke](http://xlbd.me/content/images/2019/11/201911_runjs-plunker-1.jpg)


## Others

The tools that are easy to use are endless. In fact, there are other tools or solutions that can be chosen. For example, the following four different types, I have selected a representative tool.

### Online programming

* [scrimba](https://scrimba.com) - The interactive screencasting platform

### Local Application

* [RunJS](https://runjs.dev/) - A scratchpad for your thoughts, a playground for your creativity...

### Editor plugin

* [Quokka.js](https://quokkajs.com) - Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

### Cloud-powered dev environments

* [Visual Studio Online](https://visualstudio.microsoft.com/zh-hans/services/visual-studio-online/) - Cloud-powered dev environments accessible from anywhere

## 👀 Compare

| Tool | Star Rate | Console Panel | offline |
|--------|----------|------------|--------|
| JS Bin | ⭐️⭐️⭐️⭐️ | has          | no |
| JS Fiddle | ⭐️⭐️⭐️⭐️⭐️ | **no**          | no |
| CodePen | ⭐️⭐️⭐️⭐️⭐️ | has          | no |
| PLAYCODE | ⭐️⭐️⭐️ | has          | no |
| Flems | ⭐️⭐️⭐️ | has          | no |
| JSitor | ⭐️⭐️⭐️ | has          | no |
| Code Sandbox | ⭐️⭐️⭐️⭐️⭐️ | has          | no |
| Web Marker | ⭐️⭐️⭐️⭐️ | has          | **yes** |
| LeetCode | ⭐️⭐️⭐️⭐️⭐️ | has          | no |
| Repl.it | ⭐️⭐️⭐️ | has          | no |
| RunKit + npm | ⭐️⭐️⭐️⭐️ | has          | no |
| StackBlitz | ⭐️⭐️⭐️ | has          | no |
| Plunker Next | ⭐️⭐️⭐️ | has          | no |

## Conslusion

Actually for myself

* If I want to run a code snippets to get test results, the fastest way is to use the browser console, because the browser is the best tool.
* If I want to write a demo on my blog, I will choose `jsfiddle`, `codepen`, `codesandbox`, which provides everything you need to write a demo.
* If I want to share beautiful code snippets, I will use [Carbonize](https://www.dangercove.com/carbonize/Z) to generate an image, just like the one at the beginning of the blog post

The meaning of using an online editor is that it is fast, easy to share and collaborate, and my favorite is still VSCode.

Maybe you are writing your playground, or you have better tools, I hope to leave a message and share with everyone.