js sandbox console

a mini javascript console to play in

sandbox loading...

 

by joss. best in webkit, not ie-tested yet.

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 - 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.

You'll get to see it in action next week on the demo page of a new js thing I'm working on (that's actually what this was originally built for, if I'm honest).

For now, have a play around, see if you can contribute and please report issues!

Features!

Download / Fork

You can grab the latest code from the js sandbox console github repository. Hit 'watch' to see when new features get added and bugs get squashed!

Oh and if you use this on a site/demo/launch page anywhere, please let me know and I'll add it to the showcase.

How to Install

This is pretty simple. 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. Here they are (more on the way):

// 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) scope. To prevent users from screwing up 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 will create an invisible <iframe> element, and evaluate all the commands inside its window context.

NB: if you do this, the users won't have access to globals from the page you're running (including any libraries or scripts you've included). That might be what you want, or it might not. Either way, there's also a sandbox.model.load() method you can tap, to inject js files into the <iframe> window, which makes them available in the sandbox.

In retrospect, this is probably the best way to run the sandbox - as long as you remember to include the libraries you want to have available!

// 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

What's Next?

If you've read this far, check out josscrowcroft.com, where I write about javascript, wordpress, music, business (sometimes), and things I've built for fun/profit.

There's some fun new open-source stuff coming in a week or two, so follow @josscrowcroft on Twitter if you're into this kinda thing.

And make sure to hit 'watch' on the js sandbox console github repository.

Thanks for reading!