Drop a PSD, get a structured JSON object in the Polotno design schema — typed elements with explicit position, font, color, and embedded image data, ready to feed to a canvas editor or to an LLM with spatial context. Not a raw PSD layer dumper; if you need access to the original Photoshop bytes, use ag-psd directly.
The output shape
The JSON has a top-level width / height / dpi / unit describing the document, an array of fonts used, and a pages array. Each page contains a children array of typed elements:
type: "text"— text content, fontFamily, fontSize, fontWeight, fill, x/y/width/height, rotation, alignment.type: "image"— base64 src, crop region, position, opacity. Used for raster layers and for vector layers whose effects had to be baked.type: "svg"— vector shapes re-emitted as inline SVG, with position and size.type: "line"— stroke segments with color, dash, position.
Use cases
- Template generation— load a designer's PSD as a template, swap text/images/colors programmatically, re-export hundreds of variations.
- LLM ingestion— give the model not just the rendered preview but the layer tree as structured context for tasks like "rewrite this banner copy and re-export."
- Editor handoff— load the JSON into a Polotno editor in your app and let the user customize the design. That's the live demo on this page.
- Schema-driven storage — store designs as JSON rows in your database instead of opaque PSD blobs. Diffable, searchable, version-controllable.
The same conversion in code
import { psdToJson } from "@polotno/psd-import";
const buffer = await file.arrayBuffer();
const json = await psdToJson({ psd: buffer });
// json is a Polotno design — load into a store, edit, re-export
import { createStore } from "polotno/model/store";
const store = createStore({ key: "YOUR_KEY" });
store.loadJSON(json);Full API reference: PSD Import docs.
