Quick Start

💡
It is important to have a web app where you can embed the editor.

💡
This guide is valid for SDK versions 1.13.0 and above. For lower versions, reach out to our tech support for additional information.

Getting access

To use the editor you will need to sign up for Picsart Enterprise and activate the free trial for the Photo and Video Editor SDK. To do so, pick one of the packages on our pricing page and go through the signup process.

As there are 4 packages listed, for simplicity's sake we recommend picking the Photo Print Editor.

As you sign up, you will get your SDK setup done automatically:

You will get a demo/test app set up
You will get your API Key provisioned
All required access will be granted
You get an email with necessary integration examples and details

Below we will do the integration step by step, assuming that you have already signed up and you get access to your API Key, Customer ID.

Embedding

To begin, let's first include our SDK Library to your web page:

<html lang="en">
  <head>
    <script src="https://sdk.picsart.io/cdn?v=1.13.2&key=sdk"></script>
  </head>
</html>

To make sure the SDK knows where to embed the editor, you will need to provide a container element:

<html lang="en">
  <head>
    <script src="https://sdk.picsart.io/cdn?v=1.13.2&key=sdk"></script>
  </head>
  <body>
    <div id="containerId" style="width:100%; height:100%;"></div>
  </body>
</html>

And finally, let's make sure the setup process is triggered:

<html lang="en">
  <head>
    <script src="https://sdk.picsart.io/cdn?v=1.13.2&key=sdk"></script>
  </head>
  <body>
    <div id="containerId" style="width:100%; height:100%;"></div>
    <script>
      (async () => {
        const PicsartInstance = new Picsart({
          apiKey: 'YOUR_API_KEY_GOES_HERE', // provided during the signup process
          customerId: 'CUSTOMER_ID_GOES_HERE', // provided during the signup process
          propertyId: 'YOUR_PROPERTY_ID_GOES_HERE', // provided during the signup process
          containerId: 'containerId', // should match the identifier of the container element
          title: 'Photo Print Designer'
        });
      })();
    </script>
  </body>
</html>

Open and Save the result

As we have the editor set up, we can now get it opened, and make sure the design is saved at the end.

<html lang="en">
  <head>
    <script src="https://sdk.picsart.io/cdn?v=1.13.2&key=sdk"></script>
  </head>
  <body>
    <div id="containerId" style="width:100%; height:100%;"></div>
    <script>
      (async () => {
        const PicsartInstance = new Picsart({
          apiKey: 'YOUR_API_KEY_GOES_HERE', // provided during the signup process
          customerId: 'CUSTOMER_ID_GOES_HERE', // provided during the signup process
          propertyId: 'YOUR_PROPERTY_ID_GOES_HERE', // provided during the signup process
          containerId: 'containerId', // should match the identifier of the container element
          title: 'Photo Print Designer'
        });
   
        // adding new lines here to open and save
        const imageUrl = "https://cdn-cms-uploads.picsart.com/cms-uploads/05b3d2e9-1fd6-43f3-b342-b232638c5614.png";
        PicsartInstance.open({
          imageUrl
        });
        
        PicsartInstance.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();
          }
        });
      })();
    </script>
  </body>
</html>

And we are done. As you open this page, you should be able to see the photo opened, you can make different edits and then export. In this example you will also see that the image provided is of low resolution and editor will suggest to automatically upscale the image for high quality (DPI) print.

The result saved is in PNG format, but in following examples and guides we will show how you can setup this SDK to export Print-Ready PDFs, preview PDFs, images of different formats, videos, as well as the design (project) file called a .replay.