{"id":23899257,"url":"https://github.com/sellersmith/psd-vanilla-js","last_synced_at":"2025-04-15T09:34:12.074Z","repository":{"id":239445401,"uuid":"799553939","full_name":"sellersmith/psd-vanilla-js","owner":"sellersmith","description":"A robust vanilla JavaScript library designed to parse and handle PSD","archived":false,"fork":false,"pushed_at":"2024-06-02T09:31:51.000Z","size":651,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T18:51:50.215Z","etag":null,"topics":["javascript","photoshop","psd","vanilla"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/psd-vanilla-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sellersmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-12T13:47:01.000Z","updated_at":"2024-11-07T04:07:05.000Z","dependencies_parsed_at":"2024-05-15T17:45:49.820Z","dependency_job_id":"2b79629b-2c3d-431d-a822-440f94a48cf3","html_url":"https://github.com/sellersmith/psd-vanilla-js","commit_stats":null,"previous_names":["sellersmith/psd-vanilla-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sellersmith%2Fpsd-vanilla-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sellersmith%2Fpsd-vanilla-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sellersmith%2Fpsd-vanilla-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sellersmith%2Fpsd-vanilla-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sellersmith","download_url":"https://codeload.github.com/sellersmith/psd-vanilla-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249042921,"owners_count":21203376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","photoshop","psd","vanilla"],"created_at":"2025-01-04T18:17:07.241Z","updated_at":"2025-04-15T09:34:12.000Z","avatar_url":"https://github.com/sellersmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# psd-vanilla-js\n\nA robust vanilla JavaScript library based on [psd.js](https://github.com/meltingice/psd.js) designed to parse and handle PSD (Photoshop Document) files directly in the browser or in Node.js environments. This library provides developers with easy-to-use functions to access the internal structure and metadata of PSD files, including layers, masks, colors, and text information. It supports handling of both basic and complex PSD features, enabling the manipulation of these elements for web applications or server-side processing without the need for external dependencies.\n\n## Key feature\n\n- Document structure\n- Document size\n- Layer/folder size + positioning\n- Layer/folder names\n- Layer/folder visibility and opacity\n- Font data (via [psd-enginedata](https://github.com/layervault/psd-enginedata))\n  - Text area contents\n  - Font names, sizes, and colors\n- Color mode and bit-depth\n- Vector mask data\n- Flattened image data\n- Layer comps\n\nRuns in both NodeJS and the browser (using browserify). There are still some pieces missing that are present in PSD.rb, such as layer comp filtering, a built-in renderer, and many layer info blocks. The eventual goal is full feature parity with PSD.rb.\n\n## Installation\n\nSimply add `psd-vanilla-js` to your package.\n\n### NPM\n\n`npm install psd-vanilla-js`\n\n### Yarn\n\n`yarn add psd-vanilla-js`\n\n## Usage\n\nPSD.js works almost exactly the same in the browser and NodeJS.\n\n### NodeJS Example\n\n```js\nimport PSD from \"psd-vanilla-js\";\n\nconst psd = PSD.fromFile(\"path/to/file.psd\");\npsd.parse();\n\nconsole.log(psd.tree().export());\nconsole.log(psd.tree().childrenAtPath(\"A/B/C\")[0].export());\n\n// You can also use promises syntax for opening and parsing\nPSD.open(\"path/to/file.psd\")\n  .then(function (psd) {\n    return psd.image.saveAsPng(\"./output.png\");\n  })\n  .then(function () {\n    console.log(\"Finished!\");\n  });\n```\n\n### Browser Example\n\n```js\nimport PSD from \"psd-vanilla-js\";\n\n// Load from URL\nPSD.fromURL(\"/path/to/file.psd\").then(function (psd) {\n  document.getElementById(\"ImageContainer\").appendChild(psd.image.toPng());\n});\n\n// Load from event, e.g. drag \u0026 drop\nfunction onDrop(evt) {\n  PSD.fromEvent(evt).then(function (psd) {\n    console.log(psd.tree().export());\n  });\n}\n```\n\n### Traversing the Document\n\nTo access the document as a tree structure, use `psd.tree()` to get the root node. From there, work with the tree using any of these methods:\n\n- `root()`: get the root node from anywhere in the tree\n- `isRoot()`: is this the root node?\n- `children()`: get all immediate children of the node\n- `hasChildren()`: does this node have any children?\n- `childless()`: opposite of `hasChildren()`\n- `ancestors()`: get all ancestors in the path of this node (excluding the root)\n- `siblings()`: get all sibling tree nodes including the current one (e.g. all layers in a folder)\n- `nextSibling()`: gets the sibling immediately following the current node\n- `prevSibling()`: gets the sibling immediately before the current node\n- `hasSiblings()`: does this node have any siblings?\n- `onlyChild()`: opposite of `hasSiblings()`\n- `descendants()`: get all descendant nodes not including the current one\n- `subtree()`: same as descendants but starts with the current node\n- `depth()`: calculate the depth of the current node (root node is 0)\n- `path()`: gets the path to the current node\n\nIf you know the path to a group or layer within the tree, you can search by that path. Note that this always returns an Array because layer/group names do not have to be unique. The search is always scoped to the descendants of the current node, as well.\n\n```js\npsd.tree().childrenAtPath(\"Version A/Matte\");\npsd.tree().childrenAtPath([\"Version A\", \"Matte\"]);\n```\n\n### Accessing Layer Data\n\nTo get data such as the name or dimensions of a layer:\n\n```js\nnode = psd.tree().descendants()[0];\nnode.get(\"name\");\nnode.get(\"width\");\n```\n\nPSD files also store various pieces of information in \"layer info\" blocks. See [this file](https://github.com/meltingice/psd.js/blob/master/lib/psd/layer/info.coffee) for all of the possible layer info blocks that PSD.js parses (in `LAYER_INFO`). Which blocks a layer has varies from layer-to-layer, but to access them you can do:\n\n```js\nnode = psd.tree().descendants()[0];\nnode.get(\"typeTool\").export();\nnode.get(\"vectorMask\").export();\n```\n\n### Exporting Data\n\nWhen working with the tree structure, you can recursively export any node to an object. This does not dump _everything_, but it does include the most commonly accessed information.\n\n```js\nconsole.log(psd.tree().export());\n```\n\nWhich produces something like:\n\n```js\n{ children:\n   [ { type: 'group',\n       visible: false,\n       opacity: 1,\n       blendingMode: 'normal',\n       name: 'Version D',\n       left: 0,\n       right: 900,\n       top: 0,\n       bottom: 600,\n       height: 600,\n       width: 900,\n       children:\n        [ { type: 'layer',\n            visible: true,\n            opacity: 1,\n            blendingMode: 'normal',\n            name: 'Make a change and save.',\n            left: 275,\n            right: 636,\n            top: 435,\n            bottom: 466,\n            height: 31,\n            width: 361,\n            mask: {},\n            text:\n             { value: 'Make a change and save.',\n               font:\n                { name: 'HelveticaNeue-Light',\n                  sizes: [ 33 ],\n                  colors: [ [ 85, 96, 110, 255 ] ],\n                  alignment: [ 'center' ] },\n               left: 0,\n               top: 0,\n               right: 0,\n               bottom: 0,\n               transform: { xx: 1, xy: 0, yx: 0, yy: 1, tx: 456, ty: 459 } },\n            image: {} } ] } ],\n    document:\n       { width: 900,\n         height: 600,\n         resources:\n          { layerComps:\n             [ { id: 692243163, name: 'Version A', capturedInfo: 1 },\n               { id: 725235304, name: 'Version B', capturedInfo: 1 },\n               { id: 730932877, name: 'Version C', capturedInfo: 1 } ],\n            guides: [],\n            slices: [] } } }\n```\n\nYou can also export the PSD to a flattened image. Please note that, at this time, not all image modes + depths are supported.\n\n```js\npng = psd.image.toPng(); // get PNG object\npsd.image.saveAsPng(\"path/to/output.png\").then(function () {\n  console.log(\"Exported!\");\n});\n```\n\nThis uses the full rasterized preview provided by Photoshop. If the file was not saved with Compatibility Mode enabled, this will return an empty image.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsellersmith%2Fpsd-vanilla-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsellersmith%2Fpsd-vanilla-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsellersmith%2Fpsd-vanilla-js/lists"}