{"library":"spritesmith","title":"Spritesmith - Spritesheet Generator","type":"library","description":"Spritesmith is a Node.js utility for programmatically generating spritesheets and corresponding coordinate maps from individual image files. It provides a robust solution for optimizing web assets by combining multiple small images into a single larger image, reducing HTTP requests and improving load times. The current stable version is 3.5.1, and while there isn't a fixed release cadence, major versions introduce significant API changes and improvements, as seen with versions 2.0.0 and 3.0.0. A key differentiator is its pluggable engine architecture, allowing users to switch between various image processing backends like `pixelsmith` (default Node.js-based), `gmsmith`, or `canvassmith` to suit performance or format requirements. It also offers flexible output formats for coordinate data, making it adaptable for integration with various CSS preprocessors and build tools such as Grunt and Gulp via dedicated plugins, and even Webpack.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install spritesmith"],"cli":null},"imports":["const Spritesmith = require('spritesmith');","Spritesmith.run({ src: sprites }, function handleResult (err, result) { /* ... */ });","const spritesmithInstance = new Spritesmith();"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/twolfson/spritesmith","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/spritesmith","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"const Spritesmith = require('spritesmith');\nconst path = require('path');\nconst fs = require('fs');\n\n// Create dummy image files for demonstration\nconst dummyImageDir = path.join(__dirname, 'temp-icons');\nif (!fs.existsSync(dummyImageDir)) fs.mkdirSync(dummyImageDir);\nfs.writeFileSync(path.join(dummyImageDir, 'icon1.png'), Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=', 'base64'));\nfs.writeFileSync(path.join(dummyImageDir, 'icon2.png'), Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwAB/2N6HBYAAAAASUVORK5CYII=', 'base64'));\n\nconst sprites = [\n  path.join(dummyImageDir, 'icon1.png'),\n  path.join(dummyImageDir, 'icon2.png')\n];\n\nSpritesmith.run({ src: sprites }, function handleResult (err, result) {\n  if (err) {\n    console.error('Spritesmith error:', err);\n    return;\n  }\n\n  // result.image is a Buffer representation of the generated spritesheet\n  fs.writeFileSync('spritesheet.png', result.image);\n  console.log('Spritesheet saved to spritesheet.png');\n  console.log('Coordinates:', result.coordinates);\n  console.log('Properties:', result.properties);\n\n  // Clean up dummy images\n  fs.unlinkSync(path.join(dummyImageDir, 'icon1.png'));\n  fs.unlinkSync(path.join(dummyImageDir, 'icon2.png'));\n  fs.rmdirSync(dummyImageDir);\n});","lang":"javascript","description":"This quickstart demonstrates how to generate a spritesheet from a list of image paths and save the resulting image and coordinate data to disk. It uses the `Spritesmith.run` helper function for a simplified API call.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}