Is there a download function in jsFiddle?

Question

Is there a download function in jsFiddle, so you can download an HTML with the CSS, HTML and JS in one file, so you can run it without jsFiddle for debug purposes?

Answer 1

Still no download functionality supported.. BUT.. you can use the jsfiddle-downloader node script.

Installation:

npm install jsfiddle-downloader -g

To download a single fiddle from its id:

jsfiddle-downloader -i <fiddle-id> [-o <output file>]

To download a single fiddle from its url:

jsfiddle-downloader -l <url> [-o <output file>]
jsfiddle-downloader -l jsfiddle.net/<user>/<fiddle-id>
jsfiddle-downloader -l https://jsfiddle.net/<fiddle-id>
jsfiddle-downloader -l https://jsfiddle.net/<user>/<fiddle-id>/show/ -o myfiddle.html

To download all scripts of a determinated 'user' from jsFiddle.net:

jsfiddle-downloader -u <user> [-o <output file>]

It'll download all backups in the currrent directory, the jsFiddles scripts will be named as:

[<output-folder>/]<id-fiddle>.html

Answer 2

In a recent work I had to download a list of fiddle urls and create separate folder for each fiddles having separate html css js file for each, i have created the following crawler program for this. https://github.com/sguha-work/FiddleCrawler .It will create folder name with counter value and each folder will have a html, a css, a js and a details file. (The details file will holds the links of external resources).

Answer 3

Step 1:
Go to a fiddle page like jsfiddle.net/oskar/v5893p61

Step 2:
Add '/show' at the end of the URL, like jsfiddle.net/oskar/v5893p61/show

Step 3:
Right click on the page and click on the View frame source. You will get the HTML code including CSS in tag and Javascript (js) in tag. [Also source link of all library will be added]. See screenshot

Step 4:
Now you can save the source code in a .html file.

Answer 4

New answer to an old question:

Method 1:

Step 1: You have to put /show after the URL you are working on:

http://jsfiddle.net/<fiddle_id>/show/ 

It shows the output with a result header.

Step 2: Right click the bottom frame and select View Frame Source. That's it. You got the html code with online JS links, CSS.

Just Save it.

For Example: http://jsfiddle.net/YRafQ/20/show/ for the site http://jsfiddle.net/YRafQ/20/

Note: View Frame Source and not View Page Source

Method 2:

You can use this code: view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/

For Example: For my fiddle_id: YRafQ/20

view-source:http://fiddle.jshell.net/YRafQ/20/show/light/

Answer 5

Okay, the easiest way, I found out was just changing the url (jsfiddle[dot]net) to fiddle[dot]jshell[dot]net/ There u have a clear html code, without any kind of iframe... Example: https://jsfiddle[dot]net/mfvmoy64/27/show/light/ -> http://fiddle[dot]jshell[dot]net/mfvmoy64/27/show/light/

(Must change the '.''s to "[dot]" because of stackeroverflow... :c) PS: sry 4 bad english

Answer 6

Ctrl + S, saves the entire fiddle, inside the files folder there is the clean page you are looking for