1) HTML Context

The HTML consists of a single img tag.

<img src="http://placekitten.com/200/200" />

We give you a generic {placekitten} with this confused kitten to look at every time you want to GIF. You can replace the HTML contents with any valid HTML.

The canvas is preset to 200x200 pixels to match the dimensions of the generated image from {placekitten}. You can freely adjust the canvas dimensions manually or through code.

2) JS Context

$.when(
  $.getScript("//unpkg.com/react@17/umd/react.development.js"),
  $.getScript("//unpkg.com/react-dom@17/umd/react-dom.development.js"),
  $.Deferred(function(deferred){
      $(deferred.resolve);
  })
).done(function(){

    // code here

});

Also included is a library loader with React JS and React Dom hot-loaded using the Universal Module Definition (UMD) versions of the libraries.

You can now code in React but remember JSX is not supported! You'll want to read https://reactjs.org/docs/react-without-jsx.html to know how to code in raw React without JSX.

Open template