javascript sandbox console – a playground for your users to mess around in (Backbone.js)

While working on an upcoming JavaScript library and open source API service, I accidentally created a mini javascript playground, with the goal of allowing users to easily try out the library’s functionality, without having to open their console.

javascript sandbox console

It seemed like a cool enough concept to warrant taking a break from that project and indulging in an all-night coding marathon to get it finished. Work the next day was painful, but I’m pretty pleased with how version 0.1 came out.

Introducing the javascript sandbox console

The 0.1 release features a pretty design, up/down command history (with localStorage saving), basic syntax highlighting for output and some other cool features.

javascript sandbox console demogithub repository

It’s seriously easy to style with CSS (I’ll add some extra skins soon) and to install on your library/plugin’s homepage. Do it! Your users will thank you.

What’s more, it’s entirely programmable through the global sandbox object, so you can manually feed it commands for the user to try (as on the demo.)

Oh, and it’s not tested in IE, as of publishing, because I don’t have my windows laptop with me.

Enjoy!

The js sandbox console is a javascript playground designed to enhance demos and homepages for javascript libraries, plugins and scripts, giving visitors an easy and chilled-out way to test-drive the functionality – without whacking open their Firebug / Dev Tools console.

The idea is inspired by jsconsole.com and was built with Backbone.js and jQuery, in a strange and terrible all-night code-off. Then tidied up a bit the next day.

PS:

Make sure to hit ‘watch’ on the repository, as it will be getting a bunch of fixes and improvements in the next few months. Please make issues if you find any bugs or have suggestions, and feel free to contribute code.

2 thoughts on “javascript sandbox console – a playground for your users to mess around in (Backbone.js)

  1. Pingback: Elegant D » javascript sandbox console – a playground for your users to mess …

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>