An API for creating JSFiddle dynamically and getting screenshots of the results of js fiddles.
If you are interested in an API to fetch the raw data (such as HTML, JS, CSS) associated with a particualr JS-Fiddle, I suggest you use jsfiddle-api
This has a node-js version as well as a command-line version.
You can install via npm like so:
npm install jsfiddler
Note that this depends on PhantomJS which gets installed automatically. It also requires ImageMagick to get condensed screenshots -- this is not installed automatically as it is only needed if the trim option is used.
There are two basic APIs at this point. There is no support for the signed-in version of JSFiddle yet nor is there any support for updating an existing jsfiddle though it should be possible to extend this easily.
You can create a new JS Fiddle programmatically using this API. It is quite straightforward to use.
var jsfiddler = require('jsfiddler');
options = {
html: '<body>This is an example jsfiddle</body>'
js: 'console.log("Example JS!',
css: 'body { font-family: Helvetica, Arial, sans-serif; }',
link: 'http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css',
script: 'http://code.jquery.com/jquery-1.11.1.min.js',
title: 'JSFiddler Sample',
description: 'Sample page created via JSFiddler api module',
normalize_css: true,
wrap: 'b' /* body */
dtd: 4
};
fiddler.create(options, function (err, fiddlerUrl) {
if (err) return console.error('Failed to create JS Fiddle', err);
console.log('Created JS Fiddle: ', fiddlerUrl);
});-
html -- This is the inline HTML you want to use for the jsfiddle. If this ends with .html or .jade, the code automatically converts this file to HTML. Note that jsfiddle does not require html tag and so you should probably only start with the body tag here.
-
js -- This is the inline JS you want to use for the jsfiddle. If this ends with a .js, then browserify is used to generate the browserified (but not minified) version of the JS. So, you can use requires within to support modules for example.
-
css -- This is the inline CSS to apply. If this ends with a .css, then it is assumed to be a file and the corresponding contents are used as is. If this ends with a .less, it is assumed to be a less file and it is lessified automatically.
-
link -- This should be the URL of any css files you want included in the jsfiddle. If you have multiple of these, then provide them as an array.
-
script -- This should be the URL of any javascript files you want included in the jsfiddle. If you have multiplle of these, then provide them in an array.
-
title -- Title of the page.
-
Description -- Description of the page.
-
normalize_css -- JSFiddle normalize option.
-
wrap -- This controls whether to wrap the JS code automatically to only execute onLoad, onDomready or to insert it into head or body. The expected values are 'l', 'd', 'h', 'b' respectively.
-
dtd -- html version, apparently defaults to 4.
You can take screenshots of the fiddle result pane using the screenshot API.
var jsfiddler = require('jsfiddler');
options = {
url: 'http://jsfiddle.net/cawyacwv/1',
image: '/tmp/screenshot.png',
trim: true
};
fiddler.screenshot(options, function (err) {
if (err) return console.error('Failed to create a screenshot', err);
console.log('Created a screenshot, checkout /tmp/screenshot.png');
});-
url -- This is the URL of the jsfiddle. The URL does not need to have the version since the screenshot uses a timer to make sure the page has loaded and jsfiddle will automatically load the latest version.
-
image -- This should be the file path of the destination for the screenshot. The format of the file is determined from the extension and as such it supports whatever format the installed version of PhantomJS supports (gif, pdf, png and jpeg at this point).
-
quality -- This is the quality of the image. The default is 90%, it is expected to be numeric.
-
trim -- This is a boolean option that determines whether the screenshot should be trimmed down to remove any whitespace. This is useful if the output div does not occupy the full space. Note that this option needs 'convert' (provided by ImageMagick) to be in the path.
Both the create and screenshot APIs are available via command line as well. Note that it is recommended that you install this module globally if you intend to use it via command-line:
npm install -g jsfiddlerThe create version accepts all the options provided in the API. See the following example which shows how to provide the options.
$> cat > /tmp/test.jade <<EOF
body
div Testing jsfiddle yo
EOF
$> echo "console.log(\"Testing..\")" > /tmp/test.js
$> node ./index.js --cmd=create --html=/tmp/test.jade --css='body: { background: rgb(230, 230, 230); }' --js=/tmp/test.js --script=http://code.jquery.com/jquery-1.11.1.min.js --wrap='b' --dtd=4Screenshots work the same way.
$> jsfiddler --cmd=screenshot --url=http://jsfiddle.net/1tepttwq/ --image=/tmp/test.png --trim=true 
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent