JS Bin Tips and Bits

  • Archive
  • RSS
  • Ask me anything

Q:I accidentally use the key command to delete a bin and now I have lost it. I looked in open and it's not there. I checked archive but there is nothing in it. Is there any way to get it back?

mcshaman-blog

File an issue on jsbin.com/issues with the url (if you remember it) or your username so we can see if we can restore it.

  • 6 years ago
  • Permalink
  • Share
    Tweet

Q:how do i get a fresh new bin? everytime i press new it takes me to my resume that I layed out for practce?

snoelle26-deactivated20161215

You need to reset your “template”.

Create a new bin with your empty view (this might be simple HTML boilerplate code), then select “bins” then “Save as template”.

  • 7 years ago
  • Permalink
  • Share
    Tweet

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%?

front-end-guy-blog-blog

Yes, but you need to use %css%.

  • 7 years ago
  • Permalink
  • Share
    Tweet

Q:Is there a way to delete "bins"?

cgrs

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.

  • 7 years ago
  • Permalink
  • Share
    Tweet

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.

sydneyram-blog

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.

  • 7 years ago
  • Permalink
  • Share
    Tweet

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

sydneyram-blog

There’s some documentation in the github repo.

  1. The 2 minute guide *note: takes less than 2 minutes.
  2. Detailed version with config info
  • 7 years ago
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 id=\x22youtube_iframe\x22 src=\x22https://www.youtube.com/embed/pzFqaRJwNQ8?feature=oembed\x26amp;enablejsapi=1\x26amp;origin=https://safe.txmblr.com\x26amp;wmode=opaque\x22 frameborder=\x220\x22 allow=\x22accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\x22 allowfullscreen\x3e\x3c/iframe\x3e'

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
  • 8 years ago
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 id=\x22youtube_iframe\x22 src=\x22https://www.youtube.com/embed/eDFGrqjjyLk?feature=oembed\x26amp;enablejsapi=1\x26amp;origin=https://safe.txmblr.com\x26amp;wmode=opaque\x22 frameborder=\x220\x22 allow=\x22accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\x22 allowfullscreen\x3e\x3c/iframe\x3e'

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.

  • 8 years ago
  • 5
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 id=\x22youtube_iframe\x22 src=\x22https://www.youtube.com/embed/KMoFSfBx_QA?feature=oembed\x26amp;enablejsapi=1\x26amp;origin=https://safe.txmblr.com\x26amp;wmode=opaque\x22 frameborder=\x220\x22 allow=\x22accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\x22 allowfullscreen\x3e\x3c/iframe\x3e'

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.

  • 9 years ago
  • 10
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 id=\x22youtube_iframe\x22 src=\x22https://www.youtube.com/embed/rXGUesjAi9g?feature=oembed\x26amp;enablejsapi=1\x26amp;origin=https://safe.txmblr.com\x26amp;wmode=opaque\x22 frameborder=\x220\x22 allow=\x22accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\x22 allowfullscreen\x3e\x3c/iframe\x3e'

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.

    • #testing
    • #ajax
  • 9 years ago
  • 44
  • Permalink
  • Share
    Tweet

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

mattpriceuoft-blog

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.

  • 9 years ago
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 id=\x22youtube_iframe\x22 src=\x22https://www.youtube.com/embed/0127x8F9N5s?feature=oembed\x26amp;enablejsapi=1\x26amp;origin=https://safe.txmblr.com\x26amp;wmode=opaque\x22 frameborder=\x220\x22 allow=\x22accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\x22 allowfullscreen\x3e\x3c/iframe\x3e'

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.

    • #templates
  • 9 years ago
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 id=\x22youtube_iframe\x22 src=\x22https://www.youtube.com/embed/hK68YvK-Mew?feature=oembed\x26amp;enablejsapi=1\x26amp;origin=https://safe.txmblr.com\x26amp;wmode=opaque\x22 frameborder=\x220\x22 allow=\x22accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\x22 allowfullscreen\x3e\x3c/iframe\x3e'

Using clones instead of saves

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

    • #clone
  • 9 years ago
  • 2
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 id=\x22youtube_iframe\x22 src=\x22https://www.youtube.com/embed/L3_pAuGCPBI?feature=oembed\x26amp;enablejsapi=1\x26amp;origin=https://safe.txmblr.com\x26amp;wmode=opaque\x22 frameborder=\x220\x22 allow=\x22accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\x22 allowfullscreen\x3e\x3c/iframe\x3e'

JS Bin 2.8

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

  • 9 years ago
  • 4
  • Permalink
  • Share
    Tweet
'\x3ciframe width=\x22500\x22 height=\x22281\x22 id=\x22youtube_iframe\x22 src=\x22https://www.youtube.com/embed/_GtjaW4Ma3c?feature=oembed\x26amp;enablejsapi=1\x26amp;origin=https://safe.txmblr.com\x26amp;wmode=opaque\x22 frameborder=\x220\x22 allow=\x22accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\x22 allowfullscreen\x3e\x3c/iframe\x3e'

Gist integration

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

    • #gist
    • #github
  • 9 years ago
  • 25
  • Permalink
  • Share
    Tweet
← Newer • Older →
Page 1 of 2
Dave, the JS Bin Bot

About

I'm Dave, the JS Bin bot. This place will include tips and videos to help you make more use of JS Bin.

If I'm useful to use, please send a hug to @js_bin on twitter :)

Pages

  • Log a bug or feature request
  • Fork on Github
  • About
  • FAQ
  • Adding custom libraries
  • Custom jsbin urls

JS Bin elsewhere:

  • @js_bin on Twitter
  • JS Bin on Youtube
  • remy on github
  • RSS
  • Random
  • Archive
  • Ask me anything
  • Mobile

Effector Theme by Carlo Franco.

Powered by Tumblr