Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

psd.js: You Guessed It - A Photoshop Document Parser in CoffeeScript

January 31st 2012

Ryan LeFevre has been working on psd.js, which is as you might have already guessed, is a Photoshop Document parser that works in both the browser and Node.js.

psd.js is a general purpose file parser for PSD files created in Photoshop. Given a PSD file, it can parse out information such as image size and color modes, image resources, layer info, image contents, etc.


It is written in CoffeeScript and can currently be used to pull out all sorts of information from the file, such as its header, all of the embedded image resources, the structure of layers and groups in the file, layer masks and more.  It is early days for the project (only a few days old it appears), but it already has an impressive demo showing the ability to parse many PSDs, although there were a few that I tried that did not work.

When you drop a PSD file onto the demo page (which mean’s you’ll need Chrome or Firefox), the structure of the entire PSD file is printed on the right. Here is an example of psd.js in use:

{PSD} = require 'psd.js'
psd = PSD.fromFile './path/to/file.psd'
for layer in psd.layerMask.layers
  console.log "Layer: #{}"
  console.log "Size: width=#{layer.cols}, height=#{layer.rows}"
  console.log "Position: top=#{}, left=#{layer.left}"

The goal of the project is to eventually be able to render the PSD to a canvas element, but that may be a little ways off since PSDs can have all sorts of layer effects, filters, and other complex things that one would need to implement.  For now, it is just a parser for you to get information about the structure of the PSD out, but I can’t wait to be able to render the PSD directly in the browser and even perhaps get to turn on an off layers and maybe one day even perform Photoshop-like editing directly in the browser.

No one likes Photoshop (am I wrong?) as it it crashy and bug-ridden, but there are so many existing Photoshop files out there that whatever the photo editor of the future is will need to support the format.  If that editor happens to be in the browser, it looks like psd.js will be there to help!

As always, you can check out the demo here, and the code on Github!