A PNG decoder written in TypeScript

Usage no npm install needed!

<script type="module">
  import pngTs from '';



NPM Version Prettier Badge

A PNG decoder written in TypeScript

This project is a fork of png.js and was created for use in pdf-lib. The original project is written in CoffeeScript. It contains a file for browser environments ( and a different file for Node environments ( This fork is a rewrite of the original project in TypeScript. All environment specific code has been removed or replaced with environment-independent code.

Example of PNG.decodePixels

// Import the PNG class
import PNG from 'png-ts';

// Create a PNG object
const pngImage = PNG.load(/* Uint8Array containing bytes of PNG image */);

// `pixels` is a 1D array (in rgba order) of decoded pixel data
const pixels = pngImage.decodePixels();


NPM Module

To install the latest stable version:

# With npm
npm install --save png-ts

# With yarn
yarn add png-ts

This assumes you're using npm or yarn as your package manager.

UMD Module

You can also download png-ts as a UMD module from unpkg. The UMD builds have been compiled to ES5, so they should work in any modern browser. UMD builds are useful if you aren't using a package manager or module bundler. For example, you can use them directly in the <script> tag of an HTML page.

The following builds are available:

When using a UMD build, you will have access to a global window.PNG variable. This variable contains the PNG class exported by png-ts. For example:

// NPM module
import PNG from 'pdf-lib';
const pngImage = PNG.load(/* ... */)

// UMD module
var pngImage = window.PNG.load(/* ... */)


  • Document PNG.decode() and PNG.copyImageDataToBuffer() methods.
  • See how much pako inflates the bundle size, replace if necessary
  • Replace the switch statements with if-statements to improve readability
  • Add unit tests

Prior Art