JS Bin Tips and Bits

In the FAQ you mention that you can insert JavaScript in a specific position in a JS Bin's html document with %code%. Can you do the same with css with something like %style%?

Wed, 30 Jan 2013 15:59:06 +0000

Yes, but you need to use %css%.

Is there a way to delete "bins"?

Wed, 30 Jan 2013 15:58:46 +0000

There’s no way to delete a bin, but you can archive bins so they’re hidden from your homepage. If you’ve accidentally created a bin that’s gone public and should remain private - you can file an issue here and we can manually remove the bin for you.

When i embed jsbin using the "share" link, the editor always has only the "Output" tab enabled. Can I have the default view (HTML and Output view) enabled? Thank you for your time.

Mon, 14 Jan 2013 17:06:56 +0000

Absolutely, you need to simply add the panel you want open (there’s some early design work to add this to the UI, but for now you have to do it manually).

To include the HTML panel and output, just comma separate the additional panel so the embed href goes from:

http://jsbin.com/oxuyop/102/embed?live

To:

http://jsbin.com/oxuyop/102/embed?live,html

Valid values for the panels are: html, javascript, css, console and live.

Do you have any documentation on how to host jsbin on my own site?

Mon, 14 Jan 2013 16:59:13 +0000

There’s some documentation in the github repo.

The 2 minute guide *note: takes less than 2 minutes.
Detailed version with config info

How to customise the editor panels Since JS Bin simply uses...

Thu, 23 Aug 2012 09:47:23 +0100

How to customise the editor panels

Since JS Bin simply uses CodeMirror as the editor, naturally we expose that configuration to allow you to customise it yourself. Say if you don’t like line wrapping, or prefer 8 character width tabs - you can change all this yourself.

Techniques used in this video:

Browser console to change jsbin.settings.editor
Enable debug mode using jsbin.settings.debug = true

Remote rendering JS Bin not only includes live rendering in the...

Tue, 24 Jul 2012 23:52:09 +0100

Remote rendering

JS Bin not only includes live rendering in the main window, but also allows you to remotely render on any other device or browser.

Saving your history (beta) One of the beta features I’ve...

Mon, 22 Aug 2011 16:34:39 +0100

Saving your history (beta)

One of the beta features I’ve been quietly working on is the ability to retrieve a history of saved urls. Currently this is tucked away inside of the beta features - so you need to open a console, but it needs your feedback and testing to understand if it’s viable and works. Please contribute to the feedback on github here.

Testing Ajax Requests One of JS Bin’s original drivers...

Mon, 22 Aug 2011 10:37:00 +0100

Testing Ajax Requests

One of JS Bin’s original drivers for being created was I needed a way to create simple tests for checking Ajax requests and responses. This screencast has been re-created with the updated version of JS Bin to show you how to create those dummy Ajax response handles using JS Bin.

First, thanks so much for the incredibly awesome tool.
I'm using jsbin to teach some basic hacking skills -- well, a hacking attitude more than anything -- to primary school kids. I've given them a template to work with, which they then fork to make their own pages. So, e.g., jsbin ibepo3 (sorry, not allowed to include a link in a tumblr question).

The kids are supposed to email me the URLs of their work, but some percentage of them inevitably screw that up. Is there a way to access the revision history tree of a jsbin entity? That would be a huge help to me and my kids. Thanks so much!
Matt

Mon, 22 Aug 2011 10:22:00 +0100

Hi Matt,

I’m working on a new features that should help you there. The first is a full save history, i.e. you’ll be able to see that ibepo3/20/ was a saved version of ibepo3/17/, and so on.

Secondly I’m considering changing the cloning in a way that you share a url with /clone on the end, and it will automatically create a new copy - therefore your students will have their own revision history and own url - rather than everything sitting on the same namespace.

I suggest you follow issue #84 which is very similar to what you’re asking.

Custom templates for starting points I re-enabled the save as...

Fri, 01 Jul 2011 16:03:00 +0100

Custom templates for starting points

I re-enabled the save as template feature, so that you can create your own custom starting point with JS Bin. The aim is in the future to be able to provide multiple templates - but one will do for now. Enjoy.

Using clones instead of saves Example of how you could use the...

Fri, 24 Jun 2011 12:24:00 +0100

Using clones instead of saves

Example of how you could use the new clone functionality in JS Bin and it’s keyboard shortcuts.

JS Bin 2.8 Introducing JS Bin 2.8.0 - with live previews,...

Tue, 21 Jun 2011 12:52:00 +0100

JS Bin 2.8

Introducing JS Bin 2.8.0 - with live previews, resizable panels, autocomplete and more.

Gist integration How to pull a gist from github.com directly in...

Mon, 13 Jun 2011 18:31:00 +0100

Gist integration

How to pull a gist from github.com directly in to JS Bin without any copy and paste mucking around.

Adding custom libraries Example of how you can permanently add...

Wed, 11 May 2011 11:13:00 +0100

Adding custom libraries

Example of how you can permanently add your own custom libraries to JS Bin’s library drop down.

Drag file support A demo of the simple drag and drop...

Thu, 14 Apr 2011 13:32:00 +0100

Drag file support

A demo of the simple drag and drop functionality tucked away inside of JS Bin. Note that this is only supported in browsers with both the drag and drop API and the File API (such as Chrome).

How to enable beta features A screencast on how to enable beta...

Wed, 06 Apr 2011 16:22:00 +0100

How to enable beta features

A screencast on how to enable beta features and how the live and download features work.

Getting the lastest bin

Wed, 06 Apr 2011 16:16:49 +0100

Did you know you can jump to the very latest saved jsbin by using the word ‘latest’ instead of the revision number, i.e.:

http://jsbin.com/canvas/latest/edit

Will redirect you to the latest saved version of the code under the ‘canvas’ id.