Display fiddle from a Github repository

Search…

This allows you to skip the part of hosting code on JSFiddle and load it directly into the editor from a Github repository.

Demo directory structure
Demo Directory/
  demo.js
  demo.html
  demo.css
  demo.details
demo.[ js | html | css ] contains fiddle code for the specific panel
demo.details is a description of the demo written in YAML
---
 name: Name of the Demo
 description: Some description, please keep it in one line
 authors:
   - John Doe
   - Jan Wisniewski
 resources:
   - http://some.url.com/some/file.js
   - http://other.url.com/other_filename.css
 normalize_css: no
 load_type: d
 ...
 
All fields are optional
Running demo in JSFiddle
URL segments in examples:
framework – the desired framework to load along the code from repo
version – substring of the framework version - the last passing will be used. If 1.3 will be given, JSFiddle will use the latest search result. it will favorize 1.3.2 over 1.3.1 and 1.3
dependency_list – comma separated list of dependency substrings. It would mark any dependency containing the substring
github_tree – the path to the directory used to display it on github page (without http://github.com/)
Demo + no JS framework
For no framework and version use library/pure:
https://jsfiddle.net/gh/get/library/pure/{github_tree}/
Example: https://jsfiddle.net/gh/get/library/pure/{github_tree}/​
Demo + JS framework with a version
Demo with a preset framework (for example jQuery 3.0):
https://jsfiddle.net/gh/get/{framework}/{version}/{github_tree}/
Example: https://jsfiddle.net/gh/get/jquery/3.0/{github_tree}​
This demo is fetched from the following repo:
​http://github.com/zalun/jsFiddleGithubDemo/tree/master/Demo/​
Demo + JS framework with version + dependencies
Demo with a framework and external resources/dependencies
https://jsfiddle.net/gh/get/{framework}/{version}/dependencies/{dependency_list}/{github_tree}/
Example: #TODO
​

Github Integration

Display fiddle from Gist

Last modified 4yr ago

Copy link

On this page

Demo directory structure

Running demo in JSFiddle

Demo + no JS framework

Demo + JS framework with a version

Demo + JS framework with version + dependencies