PSDViewer

import PSDViewer from "@arclockproject/common/components/PSDViewer";

For examples and live demos, see the PSDViewer guide.

PSDViewer

Component · default export

Shows a Photoshop (.psd) file. Nothing downloads until the user clicks "Load PSD File". Then the flattened image is shown, with a layer panel on the right to toggle layers and redraw.

It fills its parent (position: absolute; inset: 0), so give the parent a size and position: relative. Redrawn layers can look different from Photoshop, since many blend modes are not implemented.

Of the <div> props, only style and the mouse, touch and wheel handlers are used.

Props

src (string) — URL of the .psd file.

Also accepts all props of HTMLAttributes<HTMLDivElement>.

Example

<div style={{ position: "relative", height: 600 }}>
  <PSDViewer src="/art/poster.psd" />
</div>

PSDViewer​

PSDViewer