@picsart/react-photo-editor

React component that loads the official Picsart Create SDK from sdk.picsart.io (script tag) 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-editor

Peer dependencies: React 17+ and react-dom.

Usage

Callers must set the same core fields as the Picsart quick start: apiKey, customerId, propertyId. The component renders the editor container and passes a matching containerId to the SDK (you can set containerId yourself, or omit it to get a stable auto-generated id). title defaults to Photo Print Designer if omitted.

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

export function Page() {
  return (
    <PicsartEditor
      apiKey={process.env.NEXT_PUBLIC_PICSART_API_KEY!}
      customerId={process.env.NEXT_PUBLIC_PICSART_CUSTOMER_ID!}
      propertyId={process.env.NEXT_PUBLIC_PICSART_PROPERTY_ID!}
      containerId="my-editor-root"
      title="Photo Print Designer"
    />
  );
}

SDK script URL

By default the component loads https://sdk.picsart.io/cdn.min.js. If that URL does not match your SDK version, pass sdkScriptUrl (see Picsart docs for the correct cdn?... URL).

Ref (imperative API)

const ref = useRef<PicsartEditorRef>(null);
<PicsartEditor ref={ref} ... />
ref.current?.export();
ref.current?.getInstance();

Publish to npm (@picsart org)

npm whoami
npm login
npm run publish:npm

• Your npm user must be a member of the @picsart organization with permission to publish scoped packages.
• This repo’s .npmrc and publishConfig.registry target https://registry.npmjs.org/ (not GitLab).

If npm publish returns 404 on PUT …/@picsart%2freact-photo-editor, npm is almost always telling you the current login cannot publish that scope (or you are not logged in). Fix org membership / use npm login, then retry.

To ship a new version after changes, bump version in package.json, then run npm run publish:npm again.

Local example

npm run dev:example

Configure example/.env from example/.env.example.