JavaScript (JS) playgrounds are Integrated Development Environment that you can type in your HTML, CSS and JavaScript to troubleshoot, mess around with some code, or quickly write HTML CSS, and test Javascript online, there’s so many environments available today that can allow us run javascricpt online.
In this article, 10+ best JavaScript IDE that are available for testing codes online, arranged in no particular order are listed below. All of these tester require an Internet connection, and some of the more advanced editors offer pro plans to upgrade your account features. But most of these tools will come in handy when you’re scrambling to debug a block of JavaScript.
1. CODEPEN
CodePen is javascript IDE for the front end side of the web. CodePen supports tons of flavors of HTML, CSS, and JavaScript. For HTML, you can use HAML, Markdown, Slim, or even Jade. For CSS, they support Sass and SCSS, as well as Less and Stylus. CodePen utilize toolkits such as Emmets to help keep projects moving. The CodePen editor allows you to use Vim binding toolkits which are command-line keyboard shortcuts. Both of these tools together can help to create a faster work-flow. This tester has a live-view that is automatically updated when you type and allows for three major layouts. These layouts reload the page when you click them and you can save your code to your account.
- Website: codepen.io
2. jsFiddle
jsFiddle was one of the earliest code playground to run javaScript online, it can be used for any combination of HTML, CSS and JavaScript testing. It’s looking a little basic , but still offers advanced functionality such as Ajax simulation.
Putting jsFiddle to use is as simple as loading the site and entering code in the appropriate areas of the page. The jsFiddle interface provides plenty of features to assist in development.
There are four panels (HTML, CSS, JavaScript and preview) where you can see everything you need at once and resize each area on the fly. The layout system here feels really flexible and is actually sort of fun to play with this tester.
- Website: jsfiddle.net/
3. jsBin
JS Bin is an open source collaborative web development debugging tool.
JS Bin is a tool for experimenting with web languages. In particular HTML, CSS and JavaScript, but JS Bin also supports other languages too (like Markdown, Jade and Sass). JS Bin is ultimately a code sharing site. Along with the code, the complete output of the code is also shared with other developers, colleagues and/or students. As you type into one of the editor “panels”, you and anyone watching your bin will see the output being generated in real-time in the output panel.
- Website: jsbin.com
4. Cssdeck
It’s a fully-fledged HTML, CSS and JavaScript javaScript IDE with social and collaboration features. You can use CSSDeck to make testcases and share with other people on IRC, forums, StackOverflow, etc. who help you solve your coding problems. You can even code with multiple people in realtime in various modes. If you’re creating some cool stuff with of CSS3 and JS you can post it there and it will feature in the gallery helping you get some fame as well as helping others learn about the cutting edge practices and methodologies.
- Website: cssdeck.com
5. Plunker
Plunker is an online community for testing, creating, collaborating on and sharing your web development ideas supporting HTML, CSS and JAVASCRIPT with real-time collaboration, forking and commenting, Plunker seeks to encourage users to work together on their code. Despite its complexity, the Plunker editor is designed to load in under 2 seconds.
- Website: plnkr.co
6. Dabblet
Another early interactive playground, Dabblet started life as an HTML5/CSS3 demonstration system by Lea Verou for trying out snippets of CSS and HTML code. but it’s recently received JavaScript facilities. Among Dabblet’s nice features are automatic vendor prefixing for CSS 3 properties (via Verou’s-prefix-free library). The prefix-free script means you can just write, for example,border-radius instead of-moz-border-radius,-webkit-border-radius and so on. Perhaps the most useful feature though is that Dabblet can save all of your work as GitHub gists making sharing your work with others easier, it also ensure that even if Dabblet doesn’t last forever you’ll still have your data on GitHub.
- Website: dabblet.com
7. repl.it
Is a online tool which can compile your code on the fly for learning and education purpose. Powerful and simple online compiler, IDE, interpreter, and REPL. Code, compile, and run code in JavaScript, Python, Ruby, Java, Node.js, Go, Scheme, C, C# and 30+ more programming languages. It comes with very logical layout that puts the code on the left and a nice big auto-updating preview on the right.
- Website: repl.it
8. Liveweave
Liveweave is a HTML5, CSS3 & JavaScript tester with real-time (live) preview. It is a playground for web designers and developers, and a great tool to test, practice and share your creations. Liveweave also has built-in context-sensitive code-hinting for HTML5, CSS3, JavaScript and jQuery, that makes life a lot easier. You can run javaScript and save your weaves in the cloud, download it as a .zip file, play with color palettes, edit in full-screen and a whole lot more! Oh..there’s even a ruler to help you with your responsive design!
- Website: liveweave.com
9. jsdo.it
This is an online tester where you can try running your codes as you write. You can save your codes online as well as show them to the public as your work.
Here you can share JavaScript, HTML5 and CSS3 code snippets. Here, it requires a much more formal registration process. This requires connecting into any other social network such as Facebook, Twitter, Google, or Github.
But the most interesting thing about their interface is how you can actually upload files you’ve already created and store them into a project. It’s such an easy process to store full webpage mockups online where you can access and edit them from any computer.
- Website: jsdo.it
10. Online Javascript Editor
The main website for https://js.do/ actually redirects to their JavaScript editor. You can choose among JS, JQuery, and basic URL encoding. This application is very safe to use and feels lighter than other alternatives.
11. pastebin.com/
A pastebin or text storage site is a type of online content hosting service where users can store plain text, e.g. to source code snippets for code review via Internet Relay Chat (IRC). The first pastebin was the eponymous pastebin.com. Other sites with the same functionality have appeared, and several open-source pastebin scripts are available.
Pastebins developed in the late 1990s to facilitate IRC chatrooms devoted to computing, where users naturally needed to share large blocks of computer input or output in a line-oriented medium.
The maximum size a paste can be is 512 kilobytes (0.5 megabytes). This is should be enough for almost any script, and it prevents people from jamming our servers. PRO members are allowed to create pastes up to 10 megabytes.
- Website: pastebin.com
What’s interesting is that you’ll see the output results directly underneath the text field, so when you hit “ run code ” it will parse through everything and display the result for you to see.
Here are some bonus useful links to test your JavaScript Code:
https://www.w3schools.com/js/js_whereto.asp
https://www.w3schools.com/tags/att_script_src.asp
In Conclusion, with more computers connected online, it’s getting easier for developers to work together and collaborate in the browser. We’re seeing more and more technologies shift from local applications, and who knows how far this trend will go?