Is there a download function in jsFiddle?
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?
Ok I found out:
You have to put /show
a after the URL you're working on:
http://jsfiddle.net/<your_fiddle_id>/show/
It is the site that shows the results.
And then when you save it as a file. It is all in one HTML-file.
For example:
http://jsfiddle.net/Ua8Cv/show/
for the site http://jsfiddle.net/Ua8Cv
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/
Adding /show does not present a pure source code, it's an embedded working example. To display it without any additional scripts, css and html, use:
http://fiddle.jshell.net/<fiddle id>/show/light/
An example: http://fiddle.jshell.net/Ua8Cv/show/light/
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.
No, JSFiddle doesn't have a download feature. However, it's not very difficult to get around that and save the contents of a fiddle anyway.
Since the time the accepted answer was posted, JSFiddle has made some recent UI and backend changes that affect the way a fiddle should be downloaded. Note the updated procedures below.
Simple Commandline Method
This method only downloads the fiddle's HTML, JavaScript, and CSS as a single file. The fiddle's external resources are not saved.
In the commandline shown below, fiddle_id
refers to the ID number of the fiddle. For a fiddle with the URL "http://jsfiddle.net/<fiddle_user>/<fiddle_id>
" or "http://jsfiddle.net/<fiddle_id>
", only the fiddle_id
is needed. The fiddle_user
is unimportant.
At a shell prompt, enter the single commandline:
fiddleId=fiddle_id; curl "http://fiddle.jshell.net/${fiddleId}/show/" -H "Referer: http://fiddle.jshell.net/${fiddleId}/" --output "${fiddleId}.html"
The fiddle will be saved to a file named "fiddle_id.html
".
Longer Browser Method
This method downloads the fiddle as well as its external resources. The steps given are based on using Google Chrome. Using other web browsers should work as well, but they may use different filenames.
- Select the "
Share/Embed
" menu/link at the top of the JSFiddle edit page. In the dialog box that appears, copy the URL shown in the "Share full screen result
" field. It will be of the form "http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/
" or "http://jsfiddle.net/<fiddle_id>/embedded/result/
". - Open a new browser window and paste in the URL copied in the previous step. Load that page.
- Use your browser's save feature to save the page and all of its resources to your local computer. To save all the resources using Google Chrome, for example, be sure to select "
Webpage, Complete
" in the "Format
" menu. Be sure to specify a name for the page. Let's say it's named "fiddle.html
" for this example. - After the page is saved to your computer, you will have the "
fiddle.html
" file and a directory named "fiddle_files
". The file "fiddle.html
" is the wrapper page that JSFiddle uses to display a header with a "Result" title and other links. It will load your fiddle in an iframe element. For the most part, this file can be ignored or even deleted. Your fiddle's HTML, JavaScript, and CSS content will all be saved in the "fiddle_files
" directory as a single file named "saved_resource.html
". - Copy "
fiddle_files/saved_resource.html
" to wherever you'd like to use it. If your fiddle included items under "External Resources
", those will also appear in the "fiddle_files
" directory. Be sure to copy those files to the same place to which you copied "saved_resource.html
", because the HTML file will refer to those resources using relative URLs.
As mentioned earlier, other browsers may name the files differently when they are saved. For example, Firefox names the combined HTML/JS/CSS file "fiddle_files/a.html
".