psd2json

https://github.com/zprodev/psd2json
Admin
psd2json is a Node.js utility that converts Adobe Photoshop PSD files to JSON format, extracting...
Tokens:2,289
Snippets:19
Trust Score:6.2
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install psd2json with npm

Source: https://github.com/zprodev/psd2json/blob/master/README.md

Install the psd2json module using npm. This is the first step before importing it into your project.

```bash
$ npm install psd2json
```

--------------------------------

### Convert PSD to JSON and Flatten Layers

Source: https://context7.com/zprodev/psd2json/llms.txt

This snippet demonstrates how to use the psd2json library to convert a PSD file into a JSON string, parse it, and then flatten the resulting layer structure into a single array. It requires the 'psd2json' module to be installed.

```javascript
const psd2json = require('psd2json');

// Example output structure from a typical PSD
const jsonData = psd2json('./sample.psd');
const parsed = JSON.parse(jsonData);

// Structure example:
// [
//   {
//     "name": "ui",
//     "group": [
//       {
//         "name": "footer",
//         "group": [
//           { "name": "button1", "x": 22, "y": 366, "width": 133, "height": 133 },
//           { "name": "button2", "x": 190, "y": 366, "width": 133, "height": 133 },
//           { "name": "button3", "x": 359, "y": 366, "width": 133, "height": 133 },
//           { "name": "back", "x": 0, "y": 379, "width": 512, "height": 133 }
//         ]
//       }
//     ]
//   },
//   {
//     "name": "field",
//     "group": [
//       { "name": "player", "x": 191, "y": 179, "width": 163, "height": 142 }
//     ]
//   },
//   {
//     "name": "background",
//     "group": [
//       { "name": "ground", "x": 0, "y": 218, "width": 512, "height": 197 },
//       { "name": "object", "x": 0, "y": 0, "width": 512, "height": 273 },
//       { "name": "sky", "x": 0, "y": 0, "width": 512, "height": 205 }
//     ]
//   }
// ]

// Utility function to flatten all layers
function flattenLayers(groups, prefix = '') {
  const layers = [];
  for (const item of groups) {
    const path = prefix ? `${prefix}/${item.name}` : item.name;
    if (item.group) {
      layers.push(...flattenLayers(item.group, path));
    } else {
      layers.push({ ...item, path });
    }
  }
  return layers;
}

const allLayers = flattenLayers(parsed);
console.log('All layers:', allLayers);
// Output: [{ name: 'button1', x: 22, y: 366, width: 133, height: 133, path: 'ui/footer/button1' }, ...]
```

--------------------------------

### Basic psd2json Usage

Source: https://context7.com/zprodev/psd2json/llms.txt

Use the main psd2json function to parse a PSD file and get JSON data representing the layer structure. The function traverses all visible layers and groups, extracting position and dimension information.

```javascript
const psd2json = require('psd2json');

// Basic usage - returns JSON string only
const jsonData = psd2json('./design.psd');
console.log(jsonData);
// Output: [{"name":"ui","group":[{"name":"button","x":22,"y":366,"width":133,"height":133}]}]

// Parse the returned JSON for programmatic access
const layers = JSON.parse(jsonData);
layers.forEach(group => {
  console.log(`Group: ${group.name}`);
  group.group.forEach(layer => {
    if (layer.x !== undefined) {
      console.log(`  Layer: ${layer.name} at (${layer.x}, ${layer.y}) - ${layer.width}x${layer.height}`);
    }
  });
});
```

--------------------------------

### Output Images Only with Options Object

Source: https://context7.com/zprodev/psd2json/llms.txt

Use the options object with `outImgDir` to export only layer images as PNG files without creating a JSON file. The function still returns the JSON data.

```javascript
const psd2json = require('psd2json');

// Output only PNG images (no JSON file)
const jsonData = psd2json('./sprites.psd', { outImgDir: './images' });

// This creates PNG files preserving the group hierarchy:
// ./images/sprites/characters/player.png
// ./images/sprites/characters/enemy.png
// ./images/sprites/background/sky.png
// ./images/sprites/background/ground.png

// JSON is still returned for programmatic use
const sprites = JSON.parse(jsonData);
sprites.forEach(category => {
  console.log(`Category: ${category.name}`);
  category.group.forEach(sprite => {
    if (sprite.width) {
      console.log(`  ${sprite.name}: ${sprite.width}x${sprite.height} at (${sprite.x}, ${sprite.y})`);
    }
  });
});
```

--------------------------------

### Output JSON and Images to Directory

Source: https://context7.com/zprodev/psd2json/llms.txt

Pass a directory path as the second argument to psd2json to output both the JSON file and extracted layer images as PNG files. Images are organized in subdirectories matching the PSD group hierarchy.

```javascript
const psd2json = require('psd2json');

// Output both JSON and PNG images to a directory
const jsonData = psd2json('./game-assets.psd', './output');

// This creates:
// ./output/game-assets.json
// ./output/game-assets/background/sky.png
// ./output/game-assets/background/ground.png
// ./output/game-assets/ui/footer/button1.png
// ./output/game-assets/ui/footer/button2.png

console.log('Exported assets:', jsonData);
```

--------------------------------

### Convert PSD to JSON with JSON output directory option

Source: https://github.com/zprodev/psd2json/blob/master/README.md

Convert a PSD file to JSON and specify the output directory for the JSON file using an options object.

```javascript
var jsonData = psd2json('./target.psd', {outJsonDir:'./outdir'});   // return JSON and output /outdir/target.json
```

--------------------------------

### Convert PSD to JSON with image output directory option

Source: https://github.com/zprodev/psd2json/blob/master/README.md

Convert a PSD file to JSON and specify the output directory for extracted images using an options object.

```javascript
var jsonData = psd2json('./target.psd', {outImgDir:'./outdir'});    // return JSON and output /outdir/target/*.png
```

--------------------------------

### Convert PSD to JSON and output files

Source: https://github.com/zprodev/psd2json/blob/master/README.md

Convert a PSD file to JSON and also output the JSON to a file and extracted images to a directory. Specify the output directory as the second argument.

```javascript
var jsonData = psd2json('./target.psd', './outdir');                // return JSON and output /outdir/target.json /outdir/target/*.png
```

--------------------------------

### Output JSON Only with Options Object

Source: https://context7.com/zprodev/psd2json/llms.txt

Use the options object with `outJsonDir` to export only the JSON file without extracting layer images. This is useful when only layout metadata is needed.

```javascript
const psd2json = require('psd2json');

// Output only JSON file (no images)
const jsonData = psd2json('./mockup.psd', { outJsonDir: './data' });

// This creates:
// ./data/mockup.json

// The JSON contains the full layer structure
const structure = JSON.parse(jsonData);
console.log('Layer structure:', JSON.stringify(structure, null, 2));
// Output:
// [
//   {
//     "name": "ui",
//     "group": [
//       {
//         "name": "footer",
//         "group": [
//           { "name": "button1", "x": 22, "y": 366, "width": 133, "height": 133 },
//           { "name": "back", "x": 0, "y": 379, "width": 512, "height": 133 }
//         ]
//       }
//     ]
//   }
// ]
```

--------------------------------

### Convert PSD to JSON

Source: https://github.com/zprodev/psd2json/blob/master/README.md

Basic usage of psd2json to convert a PSD file to JSON. The function returns the JSON data.

```javascript
var psd2json = require('psd2json');

var jsonData = psd2json('./target.psd');                            // return JSON
```
Tokens:
Raw