ag-psd-psdtool

📘Documentation: https://34j.github.io/ag-psd-psdtool/

📦️NPM Package: https://www.npmjs.com/package/ag-psd-psdtool

Export PSDTool(kit)-compatible PSD files with options (visible states) changed using ag-psd.

Installation

npm install ag-psd-psdtool
Copy

Usage

The code below works on both Node.js and browser environments thanks to the fetch API.

import { readPsd } from 'ag-psd'
import { getSchema, renderPsd } from 'ag-psd-psdtool'

// Fetch a PSD file
const url = 'https://raw.githubusercontent.com/34j/ag-psd-psdtool/refs/heads/main/test/assets/ccchu.psd'
const request = await fetch(url)
const psd = await request.arrayBuffer()

// 1. Get the schema
const schema = getSchema(psd)
console.log(schema)

// 2 . Change the visible states
const canvas = renderPsd(psd, { mouth: 'normal' }, { flipx: true })
Copy

Generated canvas:

Schema:

{
  "type": "object",
  "properties": {
    "logo": {
      "type": [
        "string",
        "boolean"
      ],
      "enum": [
        "logo",
        false
      ],
      "default": "logo"
    },
    "nose": {
      "type": "boolean",
      "default": false
    },
    "mouth": {
      "type": "string",
      "enum": [
        "normal",
        "dot"
      ],
      "default": "normal"
    },
    "right_eye": {
      "type": "string",
      "enum": [
        "normal",
        "wink",
        "horizontal"
      ],
      "default": "normal"
    }
  }
}
Copy