DEV Community

Cover image for 20 JavaScript Playgrounds to use in 2019
Yunwei Xiao
Yunwei Xiao

Posted on • Updated on

20 JavaScript Playgrounds to use in 2019

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 BinJS FiddleCode PenCode 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.



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.


2、Sublime Text 3

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

Shortcuts:CMD + B

config file

fisrt install the dep babel-cli

npm i -g babel-cli

new build system

    "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"]




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

Shortcuts:CMD + Shift + B

Config File


  // See
  // 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



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


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 Shift + F4


6、Chrome Sources Panel

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

shortcuts:CMD + Enter run code


7、JS Bin

JS Bin is a live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...


8、JS Fiddle

JS Fiddle 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.



CodePen It's a great online code editor that can write almost any front-end web application.


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, here you can execute some JS code



PLAYCODE is a Quickly and Easily make Frontend Experiments



Flems is a playground for web development. It's ideal for prototyping ideas & sharing working front-end code examples



JSitor Alternative of JSFiddle, Codepen & JSbin


14、Code Sandbox

Code Sandbox 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


15、Web Maker

Web Maker is a blazing fast & offline web playground in your browser

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


16、LeetCode Playground

LeetCode Provides excellent Playground tools, supports switching in various languages, and also supports JavaScript


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


18、RunKit + npm

RunKit + npm Try any Node.js package right in your browser



StackBlitz Code the Future. In Your Browser(The online code editor for web apps)


20、Plunker Next

Plunker Next 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.



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 - The interactive screencasting platform

Local Application

  • RunJS - A scratchpad for your thoughts, a playground for your creativity...

Editor plugin

  • Quokka.js - 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

👀 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 ⭐️⭐️⭐️ has no
RunKit + npm ⭐️⭐️⭐️⭐️ has no
StackBlitz ⭐️⭐️⭐️ has no
Plunker Next ⭐️⭐️⭐️ has no


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 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.

Top comments (3)

bennypowers profile image
Benny Powers 🇮🇱🇨🇦
davidnussio profile image
David Nussio
ashvin777 profile image
Ashvin Kumar Suthar

Wow, this seems a very unfair comparison to me. JSitor is given just 2 stars (⭐️⭐️) 😔