@picsart/react-photo-video-editor

React component that loads the official Picsart Photo and Video Editor SDK and mounts the editor into your page. No bundled copy of the editor runtime is shipped in this package — only a thin React wrapper.

Install

npm install @picsart/react-photo-video-editor

Peer dependencies: React 17+ and react-dom.

Usage

This package mirrors the Picsart quick start.

You need to sign up for the Photo and Video Editor trial (currently 4 packages are available). As you sign up, you get access to the apiKey and customerId. Use propertyId only if your Picsart project needs it.

import { PicsartEditor } from '@picsart/react-photo-video-editor';

export function Page() {
  return (
    <PicsartEditor
      apiKey="YOUR_API_KEY_GOES_HERE"
      customerId="CUSTOMER_ID_GOES_HERE"
      propertyId="YOUR_PROPERTY_ID_GOES_HERE"
      title="Photo Print Designer"
      style={{ width: 1024, height: 1024 }}
      openWith={{}}
      v="1.14.0" // optional, default is 1.14.0
      onExport={(output) => {
        if (output.data.imageData) {
          const blob = output.data.imageData;
          const link = document.createElement('a');
          link.href = typeof blob === 'string' ? blob : URL.createObjectURL(blob);
          link.download = 'picsart-editor-result-image.png';
          document.body.append(link);
          link.click();
          link.remove();
        }
      }}
    />
  );
}