Q: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%?
Yes, but you need to use %css%.
Q:Is there a way to delete "bins"?
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.
Q: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.
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.
Q:Do you have any documentation on how to host jsbin on my own site?
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 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 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 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 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.
Q: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
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 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 new clone functionality in JS Bin and it’s keyboard shortcuts.
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 to JS Bin without any copy and paste mucking around.
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 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).
