Skip to main content

PSDViewer

Dependencies​

npm install @mui/material @emotion/react @emotion/styled @webtoon/psd

Usage​

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

Nothing downloads until the user clicks Load PSD File. Then the flattened image is shown, with a layer panel to turn layers on and off. Changing layers redraws the image from its layers. How close the redraw looks depends on the file, because many layer blend modes are not supported yet.

PSDViewer fills its parent, so give the parent a size and position: relative.

Demo assets were obtained from null.

Loading a PSD file​

▶ Show code (click to view and edit)
Live Editor
<div>
  <p>Expected Render:</p>
  <img src="/demo-assets/null.png" />
  <div style={{ height: "700px", position: "relative" }}>
    <PSDViewer src="/demo-assets/30003358_juice_text_style_effect.psd" />
  </div>
</div>
Result
Loading...

API​

See the PSDViewer API reference for every prop, method and type.