{"id":44791042,"url":"https://github.com/lucasthevenet/pixly","last_synced_at":"2026-02-16T11:16:19.954Z","repository":{"id":295182557,"uuid":"989404914","full_name":"lucasthevenet/pixly","owner":"lucasthevenet","description":"A modern, composable image processing library for JavaScript and TypeScript that provides a type-safe builder API for image transformations.","archived":false,"fork":false,"pushed_at":"2025-05-26T04:16:09.000Z","size":8181,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-24T20:37:47.445Z","etag":null,"topics":["avif","image","image-codec","image-codecs","image-decoder","image-encoder","image-processing","jpegxl","png","wasm","web-assembly","webassembly"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucasthevenet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-24T03:16:04.000Z","updated_at":"2025-07-22T08:48:00.000Z","dependencies_parsed_at":"2025-05-24T04:37:38.745Z","dependency_job_id":null,"html_url":"https://github.com/lucasthevenet/pixly","commit_stats":null,"previous_names":["lucasthevenet/pixly"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lucasthevenet/pixly","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasthevenet%2Fpixly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasthevenet%2Fpixly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasthevenet%2Fpixly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasthevenet%2Fpixly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucasthevenet","download_url":"https://codeload.github.com/lucasthevenet/pixly/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasthevenet%2Fpixly/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29506676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avif","image","image-codec","image-codecs","image-decoder","image-encoder","image-processing","jpegxl","png","wasm","web-assembly","webassembly"],"created_at":"2026-02-16T11:16:18.039Z","updated_at":"2026-02-16T11:16:19.949Z","avatar_url":"https://github.com/lucasthevenet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pixly\n\nA modern, composable image processing library for JavaScript and TypeScript that provides a type-safe builder API for image transformations.\n\n## Installation\n\n```bash\nnpm install pixly\n# or\nyarn add pixly\n# or\nbun add pixly\n```\n\n## Quick Start\n\n```typescript\nimport { px } from 'pixly';\n\n// Process an image with auto-detection\nconst result = await px.decoder(px.auto())\n  .encoder(px.webp.encode({ quality: 80 }))\n  .apply(px.resize({ width: 800 }))\n  .process('path/to/image.jpg');\n\n// Get the result as different formats\nconst buffer = result.toBuffer();\nconst blob = result.toBlob();\nconst dataUrl = result.toDataURL();\n```\n\n## Core Concepts\n\n### Builder Pattern\n\nPixly uses a fluent builder pattern that guides you through the image processing pipeline:\n\n1. Set a decoder (to read the input format)\n2. Set an encoder (to write the output format)\n3. Apply transformations\n4. Process the input\n\n```typescript\nconst result = await px.decoder(px.jpeg.decode())     // 1. Decode JPEG\n  .encoder(px.png.encode())                           // 2. Encode to PNG\n  .apply(px.resize({ width: 500 }))                   // 3. Add operations\n  .apply(px.rotate(90))                                // 3. Chain more operations\n  .process(imageInput);                                // 4. Process\n```\n\n### Type Safety\n\nThe API uses TypeScript to ensure correct usage:\n- `decoder()` and `encoder()` must be called before `process()`\n- Each can only be called once\n- Operations are type-checked\n\n## Input Types\n\nPixly accepts various input types:\n\n```typescript\n// From URL\nconst result = await px.decoder(px.auto())\n  .encoder(px.webp.encode())\n  .process('https://example.com/image.jpg');\n\n// From File (browser)\nconst result = await px.decoder(px.auto())\n  .encoder(px.webp.encode())\n  .process(fileInput.files[0]);\n\n// From Buffer/ArrayBuffer\nconst result = await px.decoder(px.auto())\n  .encoder(px.webp.encode())\n  .process(arrayBuffer);\n\n// From Blob\nconst result = await px.decoder(px.auto())\n  .encoder(px.webp.encode())\n  .process(blob);\n```\n\n## Codecs\n\n### Available Codecs\n\nEach codec provides both `decode()` and `encode()` methods:\n\n- **PNG**: `px.png`\n- **JPEG**: `px.jpeg`\n- **WebP**: `px.webp`\n- **AVIF**: `px.avif`\n- **JPEG XL**: `px.jxl`\n- **QOI**: `px.qoi`\n- **Auto**: `px.auto` (decode only - auto-detects format)\n\n### Format Conversion\n\n```typescript\n// Convert PNG to JPEG\nconst result = await px.decoder(px.png.decode())\n  .encoder(px.jpeg.encode({ quality: 90 }))\n  .process(pngImage);\n\n// Convert any format to WebP\nconst result = await px.decoder(px.auto())\n  .encoder(px.webp.encode({ quality: 85, lossless: false }))\n  .process(inputImage);\n```\n\n### Encoder Options\n\nDifferent codecs support different encoding options:\n\n```typescript\n// JPEG options\npx.jpeg.encode({ quality: 90 });\n\n// WebP options\npx.webp.encode({ quality: 85, lossless: false });\n\n// PNG options\npx.png.encode({ compressionLevel: 6 });\n```\n\n## Operations\n\nAll operations are applied using the `apply()` method:\n\n### Resize\n\n```typescript\nconst result = await px.decoder(px.auto())\n  .encoder(px.webp.encode())\n  .apply(px.resize({\n    width: 800,\n    height: 600,\n    fit: 'cover',        // 'cover' | 'contain' | 'fill' | 'inside' | 'outside'\n    position: 'center',  // Position when cropping\n    background: [255, 255, 255, 0] // RGBA background color\n  }))\n  .process(input);\n```\n\n### Rotate\n\n```typescript\nconst result = await px.decoder(px.auto())\n  .encoder(px.jpeg.encode())\n  .apply(px.rotate(90))  // Rotate 90 degrees clockwise\n  .process(input);\n```\n\n### Flip\n\n```typescript\nconst result = await px.decoder(px.auto())\n  .encoder(px.png.encode())\n  .apply(px.flip('horizontal'))  // 'horizontal' or 'vertical'\n  .process(input);\n```\n\n### Crop\n\n```typescript\nconst result = await px.decoder(px.auto())\n  .encoder(px.webp.encode())\n  .apply(px.crop({\n    x: 100,\n    y: 100,\n    width: 400,\n    height: 300\n  }))\n  .process(input);\n```\n\n### Blur\n\n```typescript\nconst result = await px.decoder(px.auto())\n  .encoder(px.jpeg.encode())\n  .apply(px.blur(5))  // Blur radius\n  .process(input);\n```\n\n### Sharpen\n\n```typescript\nconst result = await px.decoder(px.auto())\n  .encoder(px.jpeg.encode())\n  .apply(px.sharpen(1.5))  // Sharpen amount\n  .process(input);\n```\n\n### Brightness\n\n```typescript\nconst result = await px.decoder(px.auto())\n  .encoder(px.jpeg.encode())\n  .apply(px.brightness(1.2))  // 1.0 = no change, \u003e1 = brighter, \u003c1 = darker\n  .process(input);\n```\n\n## Chaining Operations\n\nOperations can be chained to create complex transformations:\n\n```typescript\nconst result = await px.decoder(px.auto())\n  .encoder(px.webp.encode({ quality: 80 }))\n  .apply(px.resize({ width: 1200, height: 800, fit: 'cover' }))\n  .apply(px.rotate(45))\n  .apply(px.brightness(1.1))\n  .apply(px.sharpen(1.2))\n  .apply(px.blur(0.5))\n  .process(input);\n```\n\n## Presets\n\nCreate reusable operation chains:\n\n```typescript\n// Create a preset (without encoder/decoder)\nconst thumbnailPreset = px\n  .apply(px.resize({ width: 150, height: 150, fit: 'cover' }))\n  .apply(px.sharpen(1.2))\n  .preset();\n\nconst instagramPreset = px\n  .apply(px.resize({ width: 1080, height: 1080, fit: 'cover' }))\n  .apply(px.brightness(1.05))\n  .apply(px.sharpen(1.1))\n  .preset();\n\n// Use presets in different contexts\nconst thumbnail = await px.decoder(px.auto())\n  .encoder(px.webp.encode({ quality: 80 }))\n  .apply(thumbnailPreset)\n  .process(input);\n\nconst instagramPost = await px.decoder(px.auto())\n  .encoder(px.jpeg.encode({ quality: 90 }))\n  .apply(instagramPreset)\n  .process(input);\n```\n\n## Output Formats\n\nThe processing result provides multiple output methods:\n\n```typescript\nconst result = await px.decoder(px.auto())\n  .encoder(px.webp.encode())\n  .apply(px.resize({ width: 800 }))\n  .process(input);\n\n// Get as Uint8Array buffer\nconst buffer = result.toBuffer();\n\n// Get as Blob (useful in browsers)\nconst blob = result.toBlob();\n\n// Get as data URL (base64 encoded)\nconst dataUrl = result.toDataURL();\n```\n\n## Error Handling\n\nPixly provides clear error messages for common issues:\n\n```typescript\ntry {\n  // This will throw - decoder and encoder required\n  const result = await px\n    .apply(px.resize({ width: 100 }))\n    .process(input);\n} catch (error) {\n  console.error('Processing failed:', error.message);\n}\n```\n\n## TypeScript Support\n\nPixly is written in TypeScript and provides full type safety:\n\n```typescript\nimport type {\n  ImageEditor,\n  ProcessingResult,\n  ResizeOptions,\n  ImageInput\n} from 'pixly';\n```\n\n## Examples\n\n### Creating Multiple Sizes\n\n```typescript\nconst sizes = [\n  { width: 150, name: 'thumbnail' },\n  { width: 800, name: 'medium' },\n  { width: 1920, name: 'large' }\n];\n\nconst results = await Promise.all(\n  sizes.map(async ({ width, name }) =\u003e {\n    const result = await px.decoder(px.auto())\n      .encoder(px.webp.encode({ quality: 85 }))\n      .apply(px.resize({ width }))\n      .process(originalImage);\n\n    return {\n      name,\n      blob: result.toBlob()\n    };\n  })\n);\n```\n\n### Batch Processing with Preset\n\n```typescript\n// Create a web optimization preset\nconst webOptimized = px\n  .apply(px.resize({ width: 1920, height: 1080, fit: 'inside' }))\n  .apply(px.sharpen(1.1))\n  .preset();\n\n// Apply to multiple images\nconst processedImages = await Promise.all(\n  imageFiles.map(file =\u003e\n    px.decoder(px.auto())\n      .encoder(px.webp.encode({ quality: 85 }))\n      .apply(webOptimized)\n      .process(file)\n  )\n);\n```\n\n### Format Conversion Pipeline\n\n```typescript\n// Convert all images to modern formats\nasync function modernizeImage(input: ImageInput) {\n  // Try AVIF first (best compression)\n  try {\n    return await px.decoder(px.auto())\n      .encoder(px.avif.encode({ quality: 80 }))\n      .process(input);\n  } catch {\n    // Fall back to WebP\n    return await px.decoder(px.auto())\n      .encoder(px.webp.encode({ quality: 85 }))\n      .process(input);\n  }\n}\n```\n\n### Profile Picture Generator\n\n```typescript\nconst profilePicturePreset = px\n  .apply(px.resize({ width: 400, height: 400, fit: 'cover' }))\n  .apply(px.sharpen(1.2))\n  .preset();\n\nasync function generateProfilePicture(file: File) {\n  const result = await px.decoder(px.auto())\n    .encoder(px.jpeg.encode({ quality: 90 }))\n    .apply(profilePicturePreset)\n    .process(file);\n\n  return result.toBlob();\n}\n```\n\n## Browser and Node.js Support\n\nPixly works in both browser and Node.js environments, automatically handling environment-specific features.\n\n## Performance Tips\n\n1. **Reuse Presets**: Create presets once and reuse them for consistent transformations\n2. **Choose Appropriate Formats**: Use WebP or AVIF for smaller file sizes, JPEG for photos, PNG for images with transparency\n3. **Optimize Quality Settings**: Balance quality and file size based on your use case\n4. **Process in Parallel**: Use `Promise.all()` for batch processing\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucasthevenet%2Fpixly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucasthevenet%2Fpixly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucasthevenet%2Fpixly/lists"}