Different ways to try JavaScript code you may not be aware of: REPL tools for JS
If you are a JavaScript developer, much or less, you will encounter cases when you would like to try some of you code, either for experimentation, self learning or brainstorming/prototyping or other purposes.
REPL stands for read–eval–print loop , also termed an interactive toplevel or language shell, is a simple, interactive computer programming environment that takes single user inputs (i.e., single expressions), evaluates (executes) them, and returns the result to the user; a program written in a REPL environment is executed piecewise.
Below are a few approaches, you may or may not be aware of, which are useful to quickly try your JS code.
1. QUOKKA
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.
Quokka ‘Community’ edition is free for everyone, and it also offers a commercial ‘Pro’ edition that provides a number of additional advanced features, such as the ability to display and explore runtime values without having to modify your code.
Quokka.js ships plugins or extensions for:
- JetBrains IDE
- VS Code
- Atom
- Sublime
Very nice tools!
2. Runkit notebook
RunKit notebooks completely remove the friction of trying new ideas. With one click you’ll have a sandboxed JavaScript environment where you can instantly switch node versions, use every npm module without having to wait to install it, and even visualize your results. No more configuration, just straight to coding.
- Using browser developer tools
- Using node.js in terminal command line mode
- Using Jsfiddler
3. Hopa
Hopa is a zero config JavaScript/TypeScript runner right in your terminal.
Usage:
- Install hopa using npm
- Go to the folder that contains your files and run
hopa
. - Pick a file to run
> npm i hopa -g
> hopa
> hopa -i script.js -o bundle.js -m
Git Repo: https://github.com/krasimir/hopa
4. Ramda REPL
A repl (read-eval-print-loop) for Ramda.js, but supports general Javascript code as well.
- Git Repo: https://github.com/ramda/repl
- Online URL: https://ramdajs.com/repl/
5. JSComplete playground
This is a playground for JavaScript and React. You can use it to test simple code or prototype ideas. It requires a modern browser that understands ES2015 (ES6).
URL: https://jscomplete.com/playground
6. VSCode extensions
Javascript REPL
Javascript REPL is a javascript playground for Visual Studio Code with live feedback(logs or errors) as you type, besides your code, in a log explorer, or in an output channel. It supports Javascript, TypeScript, CoffeeScript and it can be used for development in Node.js projects or with front-end frameworks like React, Vue, Angular, Svelte etc.
URL: https://marketplace.visualstudio.com/items?itemName=achil.vscode-javascript-repl
Another VS code extension: Node.js REPL
Node.js Interactive Window (REPL) for Visual Studio Code using Node.js command line right in your favorite IDE. Simply press CTRL + SHIFT + P and launch “Node.js Interactive window (REPL)”.
This is a preview and I would really love some feedback if something is not working as it should.
URL: https://marketplace.visualstudio.com/items?itemName=lostfields.nodejs-repl
7. WebStorm Interactive Debugger Console
The interactive Console pane in WebStorm shows you stack traces and everything that was logged in your code (for example, using console.*
).
The Console pane is also a read-eval-print loop (REPL) so you can run JavaScript code snippets in it and interact with the page that you are currently debugging.
8. Repl.it
A tool for writing and running JavaScript in your browser.URL: https://repl.it/languages/nodejs
9. Node.js Console — REPL
Node.js comes with REPL environment as a quick and easy way to test JavaScript code.
To launch the REPL (Node shell), open command prompt (in Windows) or terminal (in Mac or UNIX/Linux) and type node as shown below. It will change the prompt to > in Windows and MAC.
Goto this excellent tutorial for more details.
10. CodeSandBox
CodeSandbox Containers executes your code on a server, which allows you to work on any JavaScript project that works locally. Feature rich! As shown in below snapshot.
Watch below tutorial to have a taste of it.
11. Jsfiddle
JSFiddle is an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as ‘fiddles’.
12. JSBin
A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more.
- URL: https://jsbin.com/?html,js,output
- GitHub Repo: https://github.com/jsbin/jsbin
13. Browser Console
Chrome:
FireFox:
What are your favorite JavaScript REPL toolkits? Let me know your thoughts and welcome commenting!