Built with Backbone, jQuery, localStorage and ♥
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.
Inspired by jsconsole.com and built with Backbone.js and jQuery.
Maintained by Open Exchange Rates (see it in action on the money.js library homepage).
Features
- Up/down command history (like terminal), with localStorage saving/persistence
- Option to evaluate all commands inside a hidden
<iframe>(blocking access to global window scope) with a script loader to inject your libraries of choice - Basic syntax highlighting for errors and variable types
- Special commands (like
:help,:clearand:load) - Fits into any container and fully embeddable
- Easy to set up, intuitive to use
Download / Fork
You can check out the latest code from the js sandbox console github repository.
Installation
Add a <div> element, link up the stylesheet, include the templates and dependencies and add the kickoff script and you're good to go:
In your <head>:
<link href="sandbox.css" rel="stylesheet" />
Wherever you want the console to appear:
<div id="sandbox">sandbox loading...</div>
Anywhere between the <div> and the <script>s:
<!-- The sandbox template -->
<script type="text/template" id="tplSandbox">
<pre class="output"></pre>
<div class="input">
<textarea rows="1" placeholder="<%= placeholder %>"></textarea>
</div>
</script>
<!-- The command/result template (NB whitespace/line breaks matter inside <pre> tag): -->
<script type="text/template" id="tplCommand"><% if (! _hidden) { %><span class="command"><%= command %></span>
<span class="prefix"><%= this.resultPrefix %></span><span class="<%= _class %>"><%= result %></span>
<% } %></script>
Near the closing </body> tag, after the templates:
<script src="js/libs/underscore.min.js"></script>
<script src="js/libs/backbone.min.js"></script>
<script src="js/libs/backbone-localstorage.min.js"></script><!-- opt -->
<script src="js/libs/jquery.min.js"></script>
<script src="js/sandbox-console.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Create the sandbox:
window.sandbox = new Sandbox.View({
el : $('#sandbox'),
model : new Sandbox.Model()
});
});
</script>
Extra Options
You can pass extra options in to the Sandbox Backbone Model and View to control elements of the console. They are self-explanatory - for example:
// Create the sandbox:
window.sandbox = new Sandbox.View({
// these two are required:
model : new Sandbox.Model(), // see below for more
el : $('#sandbox'), // or etc.
// these are optional (defaults are given here):
resultPrefix : " => ",
helpText : "type javascript commands into the console, hit enter to evaluate. \n[up/down] to scroll through history, ':clear' to reset it. \n[alt + return/up/down] for returns and multi-line editing.",
tabCharacter : "\t",
placeholder : "// type some javascript and hit enter (:help for info)"
});
Sandboxed iFrame Mode
By default, the sandbox evaluates commands in the global (top-level/window) scope. To prevent users from playing with the active document (or to create a totally clean execution context to play in) you can switch on the iframe mode on the Sandbox.Model. This creates an invisible <iframe> element and evaluates all commands inside its context.
This means that visitors won't have access to globals from the page you're running (including any libraries or scripts you've included). Use sandbox.model.load() to inject js files into the <iframe> window, making them available in the sandbox.
This is the recommended way to integrate the sandbox.
// Create the sandbox, with `iframe` mode on:
window.sandbox = new Sandbox.View({
model : new Sandbox.Model({ iframe : true }),
el : $('#sandbox')
});
// Pre-load your libraries for the iframe:
sandbox.model.load('http://code.jquery.com/jquery-1.6.4.js');
sandbox.model.load('my/cool/library.js');
// You can also evaluate code inside the iframe after it loads:
sandbox.model.iframeEval("var globalJoss = 'im global, bro'"); // globalJoss is now available in the iframe
Roadmap / To-Do
- Verify IE support
- Add maximum history length option
- Create extra CSS styles/skins and add to demo
- Write CSS for disabled X/Y scrolling and wrapped output
- Improve up/down action in multi-line input
Links
the javascript sandbox console is open source and maintained by Open Exchange Rates - the lightweight currency data API for developers, startups and Fortune 500s.
Feedback, support or questions? Contact Open Exchange Rates for guidance.
Bugs, issues, suggestions or contributions? Please post them here.