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.

banner

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

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

Preview

201911_runjs-sublime

3、VSCode

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

Shortcuts:CMD + Shift + B

Config File

/.vscode/tasks.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

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

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

201911_runjs-firefox

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

201911_runjs-chrome-devtools

7、JS Bin

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

201911_runjs-jsbin

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.

201911-runjs-jsfiddle

9、CodePen

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

201911-runjs-codepen

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

201911-runjs-js-demo

11、PLAYCODE

PLAYCODE is a Quickly and Easily make Frontend Experiments

201911_runjs-playcode

12、Flems

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

201911_runjs-flems

13、JSitor

JSitor Alternative of JSFiddle, Codepen & JSbin

201911_runjs-jsito

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

201911_runjs-codesandbox

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

201911_runjs-webmake

16、LeetCode Playground

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

201911_runjs-leetcode

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

201911_runjs_replit

18、RunKit + npm

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

201911_runjs-runkit-np

19、StackBlitz

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

201911_runjs-stackblitz

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.

201911_runjs-plunke

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

Discussion (3)

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

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