# Piskel — Free Online Sprite Editor for Pixel Art and Animations

> Web-based pixel art tool for creating animated sprites with onion skinning, layers, and GIF/spritesheet export.

## Install

Save as a script file and run:

# Piskel — Free Online Sprite Editor for Pixel Art and Animations

## Quick Use
```bash
# Run locally
git clone https://github.com/piskelapp/piskel
cd piskel && npm install && npm run build
# Open dist/index.html in a browser
# Or use the hosted version at piskelapp.com
```

## Introduction
Piskel is a free, browser-based sprite editor designed specifically for pixel art and animated sprites. It provides an accessible workflow for game artists who need frame-by-frame animation tools without the overhead of a full illustration application.

## What Piskel Does
- Provides a canvas-based drawing environment with standard pixel art tools (pencil, bucket, line, shape)
- Supports frame-by-frame animation with real-time preview and adjustable playback speed
- Offers onion skinning to overlay previous and next frames while drawing
- Exports animations as GIF, animated PNG, spritesheet (PNG), or individual frame files
- Saves work to browser local storage or user accounts for cloud persistence

## Architecture Overview
Piskel is a client-side JavaScript application built on HTML5 Canvas. Drawing operations are recorded as pixel diffs applied to an in-memory frame model. The rendering pipeline composites layers, onion skin overlays, and grid lines onto a display canvas at the requested zoom level. Export pipelines serialize frames into GIF via a bundled encoder or stitch them into spritesheet PNGs.

## Self-Hosting & Configuration
- Clone the repository and run npm install followed by a Grunt build
- Serve the dist folder with any static HTTP server for a fully self-hosted instance
- No backend required; all data stays in the browser unless you configure a storage API
- Desktop builds are available via Electron wrappers maintained by the community
- Configurable palette, grid size, and canvas dimensions via the UI settings panel

## Key Features
- Layers system with blend modes and per-layer opacity
- Tile mode shows repeating pattern preview for seamless textures
- Palette management with import from .gpl, .pal, or image sampling
- Transform tools: flip, rotate, crop, resize with nearest-neighbor scaling
- Keyboard shortcuts mirror common art tool conventions

## Comparison with Similar Tools
- **Aseprite** — more powerful animation timeline and scripting, but paid; Piskel is free and web-based
- **Pixelorama** — Godot-based desktop app with more features; Piskel is lighter and browser-native
- **LibreSprite** — Aseprite fork; desktop-only with steeper learning curve
- **Lospec Pixel Editor** — minimal web editor; Piskel has deeper animation support
- **GraphicsGale** — Windows-only legacy editor; Piskel is cross-platform via browser

## FAQ
**Q: Can I use Piskel offline?**
A: Yes. Self-host the static build or use the desktop wrapper; all functionality works without network access.

**Q: What resolution limits does Piskel have?**
A: The editor handles canvases up to 1024x1024 pixels comfortably; beyond that, performance depends on the browser.

**Q: Does Piskel support pressure-sensitive tablets?**
A: Basic pointer events are captured, but there is no pressure-to-size brush mapping currently.

**Q: Are .piskel files editable outside the app?**
A: They are JSON-based with base64-encoded frame data, so they can be parsed programmatically.

## Sources
- https://github.com/piskelapp/piskel
- https://www.piskelapp.com

---
Source: https://tokrepo.com/en/workflows/asset-8028c813
Author: Script Depot