What does PSD to JSON give me?

A structured object in the Polotno design schema. Top-level width / height / dpi, a fonts array, and a pages array where each page has a children array of typed elements — text (with font, size, weight, color, position, characters), images (with src and crop region), shapes (paths and lines with stroke/fill), and SVG fragments. This is exactly what store.loadJSON() in the Polotno SDK accepts.

Is this a generic PSD parser?

No. The output uses the Polotno design schema, which is purpose-built for canvas editors. If you need raw layer bytes, the original Photoshop layer tree, or low-level color profile data, this is not the best fit — use ag-psd directly. If you want layout-aware structured data you can render in a canvas editor or feed to an LLM as visually grounded context, this is the intended use.

Why JSON instead of just opening it in Photoshop?

Because you may not have Photoshop, may not want a license, or may need to process PSDs at scale (template generation, bulk personalization, automated brand updates). JSON gives you a programmable representation: a script can read it, mutate any element, and re-emit a final design — without a graphical editor in the loop.

Is this the same as the @polotno/psd-import package?

Yes. This page is a UI on top of the same psdToJson() function from @polotno/psd-import that our SDK customers use server-side and in their own browser apps. If you like the output here, npm install @polotno/psd-import and you can run the same conversion programmatically.

Can I use the JSON to re-render or modify the PSD?

Yes. Pass the JSON to a Polotno store via store.loadJSON(json), then call store.saveAsImage() for raster, store.saveAsPDF() for PDF, store.saveAsSVG() for vector, or mutate any element first. The Edit button after conversion runs that exact flow with a live editor UI.

Does this run in my browser?

Yes — fully client-side. The PSD is parsed via @polotno/psd-import (which uses ag-psd under the hood). Your file never reaches our servers; safe for confidential designs, brand assets under NDA, client work.

What about smart objects, adjustment layers, and effects?

Editable layer effects the schema can represent (gradients, strokes, simple shadows) come through as element properties. Effects without a direct equivalent (gradient maps, hue/saturation, brightness/contrast) are baked into that layer's pixel data — the layer renders correctly, every other layer remains separately editable. Smart objects are flattened to their rendered output at parse time.

PSD to JSON converter — Polotno design schema

Quick answer

Drop a PSD, get a structured JSON describing every text run, image, and shape. Same schema as the Polotno editor.

Formula: PSD → Polotno JSON (browser-only, no Photoshop)

Drop a PSD file here to convert it to JSON

or

Runs entirely in your browser. Your file never leaves your device.

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.