Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers.


After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done:

<link rel="stylesheet" href="css/stitches-1.3.5.min.css">

<script data-main="js/stitches.js" src="js/stitches-1.3.5.min.js"></script>

The sprite sheet generator is automatically created in elements that have the stitches class:

<div class="stitches"></div>

If you choose, any images that are a part of the initial markup will be loaded onto the canvas:

<div class="stitches">
    <img src="img/test/github.png" data-name="github"/>
    <img src="img/test/gmail.png" data-name="gmail"/>
    <img src="img/test/linkedin.png" data-name="linkedin"/>
    <img src="img/test/stackoverflow.png" data-name="stackoverflow"/>
    <img src="img/test/tumblr.png" data-name="tumblr"/>
    <img src="img/test/twitter.png" data-name="twitter"/>


Documentation is available here.


jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 New

<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap-responsive.min.css">

<script src="libs/jquery/jquery-1.7.1.min.js"></script>
<script src="libs/modernizr/modernizr-2.0.6.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>





The latest release, 1.3.5, is available here.

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/draeton/stitches