piskelapp/piskel

★ 12,465JavaScriptAudience · designerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Pixel art editor
      Sprite animation
      Frame by frame drawing
    Exports
      Animated GIF
      Spritesheet
      ZIP archive
    Tech Stack
      JavaScript
      HTML CSS
      Playwright tests
    Audience
      Indie game devs
      Pixel artists
    Platforms
      Browser
      Desktop offline

mindmap root((repo)) What it does Pixel art editor Sprite animation Frame by frame drawing Exports Animated GIF Spritesheet ZIP archive Tech Stack JavaScript HTML CSS Playwright tests Audience Indie game devs Pixel artists Platforms Browser Desktop offline

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Draw frame-by-frame pixel art animations and export them as animated GIFs for use in indie games.

USE CASE 2

Create a spritesheet from your pixel art characters and import it directly into a game engine.

USE CASE 3

Import an existing GIF to edit its frames in the pixel art style.

USE CASE 4

Build an offline desktop version of the Piskel editor by following the wiki build instructions.

Tech stack

JavaScriptHTMLCSSPlaywright

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Piskel is a browser-based pixel art and sprite editor. Pixel art is a style of digital drawing where images are made up of individually colored squares, and it is commonly used in indie video games. A sprite is a small image or short animation that represents a character, object, or effect inside a game. The editor lets you draw frame by frame and preview animations in real time. It can export your work as an animated GIF, a spritesheet (a single image containing all frames laid out in a grid, which game engines read), or a ZIP file. It can also import existing GIFs. Everything runs in the browser with no installation: the code behind piskelapp.com is the same code in this repository. Piskel is built entirely in JavaScript, HTML, and CSS. It relies on a handful of libraries: one for color picking, one for generating animated GIFs using background threads, one for reading GIFs, and one for creating ZIP archives. End-to-end tests use Playwright, a browser automation tool. The editor is tested and supported on the latest versions of Chrome, Firefox, Edge, and Brave. There is no mobile or tablet support. Offline desktop builds are available and documented in the project's wiki. The project accepts small contributions like typo fixes and minor bug corrections, but notes that large refactors, new features, or changes to the user interface are unlikely to be reviewed due to limited maintainer time.

Copy-paste prompts

Prompt 1

I'm making a pixel art game character in Piskel with 4 walking frames. Help me set up the spritesheet export settings so my game engine can read them correctly.

Prompt 2

Help me write a script that takes a folder of PNG images and assembles them into the spritesheet format that Piskel exports.

Prompt 3

I want to add Piskel to my static website so users can draw pixel art in the browser. Show me how to embed the Piskel editor from this open-source repo.

Prompt 4

Using the Piskel codebase, show me how the GIF export works using background threads so I can build something similar.

Open on GitHub → Explain another repo

← piskelapp on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.