How to include a jsFiddle into another jsFiddle

jsFiddle is an online editor that allows you to work on “proof of concepts” in HTML + CSS + JavaScript. You can import many different JavaScript libraries, like jQuery, and also any other unsupported ones, if they are reachable on the internet, for example through cdnjs.

One thing jsFiddle lacks is the ability to import stuff from another fiddle. It’s king of frustrating not to be able to do it, moreover when it’s coupled with the inability to upload stuff.

Here is a possible solution that will work at least for your own fiddles. The idea is to somehow mark the pieces of code you want to export. Something like this:

{[ .jsfiddle-export | 1.hilite(=javascript=) ]}

Then, in the fiddle you want to import to, you can use my $.proxyGet jQuery plugin to download your fiddle, extract those pieces, join them again and globally eval them. Something like this:

{[ .jsfiddle-import | 1.hilite(=javascript=) ]}

Which will dutifully show the following message in its console:

Just imported and executed some code.

One Reply to “How to include a jsFiddle into another jsFiddle”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.