14

Screenshot

http://www.bolsterweb.com/wp-content/uploads/2011/02/doc-21.png

About

Stack Fiddle is a Google Chrome extension that updates the code blocks on Stack Exchange sites. Each code block gets a header with links that allow you to set its type. Click the code type (HTML / JavaScript / CSS) of the blocks you want to include and then press the 'Send to jsFiddle' link. All the code blocks you selected get sent to jsFiddle and you're ready to go!

This is for people, like myself, who answer JavaScript questions on Stack Overflow. Most of the time, users will post their HTML, CSS and JavaScript in separate code blocks but you still have to copy/paste them individually into jsFiddle and choose your favourite framework. This extension makes it a little bit quicker and easier.

Not every code block will be given the header. This is only applied if the question has a tag that's in the specified tag list (customisable in the options but by default it has a few JavaScript related tags). You can also set your default framework so that it's already set for you in each new fiddle.

License

The code is hosted on a github project page under the Creative Commons Attribution-ShareAlike 2.5 license.

Download

It's available for free download at the Google Chrome Extensions gallery.

Platform

Google Chrome

Contact

The developer of this extension is me, Jonathon Bolster. You can get in touch with me about the project via any of the following:

Code

Plain old JavaScript, HTML and CSS were used - along with the very awesome jQuery library. Another plugin used is jquery-tags-input, which gives a nice way to change the active tags. Options are saved using localStorage. Everything is then posted off to the jsFiddle API.

The code can be downloaded on the github project. Issues can be raised there (or by contacting me at the links above) and I'm open to any suggestions if anyone has any ideas :)

In case I've missed anything off from above, these are the blog posts I used to describe Stack Fiddle in the first place:

Improve this question
4
  • Works just fine. Just a suggestion, but a lot of questions have the JS and HTML in separate blocks. Is there some way the script could let you pick two blocks for a Fiddle?
    – Nathan Osman
    Commented Feb 25, 2011 at 1:11
  • Thanks :) I have a few updates to push out. Hmm - maybe I wasn't clear in the little 'how to's I've written. You can individually select HTML / JS / CSS on the page (so up to 3 blocks in total). So click JS on one block and HTML on the other. When you press the 'Send to jsFiddle' link, it will send all the 'active' blocks on the page (click again on the block type to deactivate). Is this what you mean?
    – Jonathon Bolster
    Commented Feb 25, 2011 at 1:40
  • @JonathonBolster , can you update the picture in your question. It is currently broken for me.
    – Eric
    Commented Sep 17, 2015 at 23:03
  • Huh, I was looking for more-or-less the exact opposite, to import from jsFiddle to Stack Snippets
    – SamB
    Commented Apr 24, 2019 at 19:14

1 Answer 1

Reset to default
2

Now doesn't work. Apparently jsFiddle have changed their API.

Improve this answer
1
  • Thanks for the heads up. It looks like I'm not keeping up as quickly as jsFiddle are changing the available frameworks. Until I sort this properly, if you go to the extension options and choose an edge framework (for example, jquery edge), then it will work. Looks like 1.5 and less have been removed from their list.
    – Jonathon Bolster
    Commented Oct 3, 2012 at 8:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .