Posted on  by  admin

Note that I chose to define the JS code as a string for illustration purposes, but in reality I would prefer to place the code in a separate file and use the script argument instead of text. JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. RunJS The JavaScript playground for your desktop. History of Lorem Ipsum Lorem ipsum was conceived as filler text, formatted in a certain way to enable the presentation of graphic elements in documents, without the need for formal copy.

Code playgrounds can be a great solution either you want to test your JavaScript skills or make your application run safely. Check out some options you should have on your bookmarks.

When it comes to JavaScript testing and learning, code playgrounds can be a wise choice. These front-end platforms offer advanced options allowing users to edit, preview and test their codes online without the need of creating new files, setting local servers or firing up an IDE.

Aside from providing testing features, playgrounds can also come in handy for teams players to work in a code in real-time and even for teaching purposes since some of them have sharing options and built-in chat systems.

So, either you're learning more about JavaScript or want to make sure all of your code works perfectly, take a look on what some playground options are capable of:

1. Liveweave

Source: [Liveweave](

Liveweave offers a real time and resizable editor panel for JavaScript, HTML and CSS developers. One great option it features is the 'Team Up' option, allowing the user to connect with other team players to work collaboratively chatting with messages or audios.
The playground also has a library section with option to add libraries and frameworks such as jQuery, Angular and Backbone. The code generated in the editor can be downloaded as a zip file.

2. JS Bin

Source: [JS Bin](

With a simple interface, developers can debug check for errors within HTML, CSS and JavaScript codes.
It is possible to choose between frameworks and libraries, from Angular to jQuery, Vue, etc. and even JavaScript based languages such as ES6, TypeScript, and CoffeeScript.
Despite the good amount of options to explore with the console, the sharing options can be limited for team players. It is possible to send a link with the code output, but users can't collaborate with the project in real time.

3. CodePen

Source: [CodePen](

If you were struggling to find a place to teach JavaScript tricks to someone or to help your project team, CodePen will definitely solve your problems. With the Professor Mode feature, it's possible to set up an online classroom and allow people to watch you code in real time.
Front-end developers can also take advantage of this tool. It's possible to host demos as 'Pens' and embed them to other pages. In a very intuitive interface, you can play with JavaScript's libraries and frameworks and get your code analyzed by JS Hint.
As for the sharing options, you can send demos through Twitter, Facebook, Google + and SMS or join the Collab Mode, available for Pro Account subscribers.

4. JS Hint

Source: [JS Hint](

JSHint is a community-driven platform that promises to track errors and potential problems in JavaScript codes even in the most complex programs.
One good thing is that the open source tool adjusts itself in any environment and guidelines you use in your code. Check out this page to see how to install different environments on the platform.

5. JSFiddle

Source: [JSFiddle](

JSFiddle features four resizable panels so you can start coding in HTML, CSS, and JavaScript and preview them on the results section. The tool allows users to add complementary extensions or frameworks like jQuery, Mootools, Knockout, Vue, etc. and offers advanced functionalities such as the Ajax simulation.
If you need help, just hit the Collaborate button on the top menu and invite friends to see and edit your code and chat via text or audio. Else if you just want to share your work, you can generate a link or even embed your code inside of a page.
One thing that can be annoying, though, is that JSFiddle doesn't update its preview screen automatically, so you need to hit the 'Run' button each time you change your code. Another downside is that the playground doesn't bring a console, so perhaps this is not the ideal tool to scan code errors.


Source: [](

If you're looking for a simple place to test if your JavaScript functions are running well, can be a fit. The codes you create can be saved and shared as links in your account. It is not possible to download or upload files in the editor.
However, despite the clean interface, this tool brings interesting features to explore, such as frameworks you can add to the editor or even code samples.

7. JSLint

Source: [JSLint](

With JSLint, you can make sure your code runs accordingly with the rules. This simple tool analyses the source code and allows the user to select what to tolerate or which standard to follow while scanning the code lines. Just paste the source you want to analyze, check the boxes with your criteria and hit 'JSLint' button to obtain your results.

8. Jscrambler's Playground App

Source: [Jscrambler](

There is no point in checking syntax or standards and scanning for errors if you are not willing to properly protect your JavaScript code. For that reason, Jscrambler offers a playground in which you can implement and test the API's security features for your project.
You can start your test using a clock application sample or upload your own file. On the right sidebar, you'll find the Code Transformations settings, that presents options to obfuscate, optimize and lock your JavaScript code. To learn more about how to use Jscrambler's playground and make your application run safely, take a look at this tutorial.

What are your favorite code playgrounds?

There are tons of code playgrounds on the web. Each one presents unique interfaces, features, and advantages, with the convenience of being a 'page-loading' away from you.

Thus, in case you didn't have any of those tools in your bookmarks yet, it's time to check which ones are more convenient to you and keep some of these links easy for your access.

Lastly, if you want to secure your JavaScript source code against theft and reverse-engineering, you can try Jscrambler for free.

In order to use any shinyjs function in a Shiny app, you must first call useShinyjs() anywhere in the app’s UI.

show / hide / toggleDisplay or hide an element (optionally with an animation).
hiddenInitialize a Shiny tag as invisible (can be shown later with a call to show).
enable / disable / toggleStateEnable or disable an input element, such as a button or a text input.
disabledInitialize a Shiny input as disabled.
resetReset a Shiny input widget back to its original value.
refreshRefresh the page.
delayExecute R code (including any shinyjs functions) after a specified amount of time.
alertShow a message to the user.
clickSimulate a click on a button.
htmlChange the text/HTML of an element.
onclickRun R code when a specific element is clicked. Was originally developed with the sole purpose of running a shinyjs function when an element is clicked, though any R code can be used.
oneventSimilar to onclick, but can be used with many other events instead of click (for example, listen for a key press, mouse hover, etc).
addClass / removeClass / toggleClassadd or remove a CSS class from an element.
runjsRun arbitrary JavaScript code.
extendShinyjsAllows you to write your own JavaScript functions and use shinyjs to call them as if they were regular R code. More information is available in the section “Calling your own JavaScript functions from R” below.

Runjs Typescript


Runjs Shiny

runcodeUI + runcodeServerAdds a text input to your app that lets you run arbitrary R code live.
showLogPrint any JavaScript console.log() messages in the R console, to make it easier and quicker to debug apps without having to open the JS console.
logjsPrint a message to the JavaScript console (mainly used for debugging purposes).
inlineCSSEasily add inline CSS to a Shiny app.

You can test out some shinyjs functions below. Choose some R code from the dropdown list, and click Run.

Coments are closed

Recent News

  • Cisco VPN Client
  • Time Tracking Pro
  • Cisdem DVD Burner

Scroll to top