Add content

Add Templates

Templates are a powerful tool in the Picsart Photo and Video Editor SDK that can be provided in two ways: using the Picsart Inventory (see usePicsartInventory flag) or by providing a list of templates. To specify the list of templates, you can use the following example code:

PicsartInstance.onOpen(() => {
  PicsartInstance.provideTemplates({
    data: [
      {
        id:             '',
        previewUrl:     '',
        url:            '',
        data:           {},
        previewWidth:  '',
        previewHeight: '',
      },
    ],
    //dataURL: '',
  });
});

PicsartInstance.open({...});

When providing templates from external sources, you need to set the usePicsartInventory flag to false.

The list of external source templates should be defined after the editor is opened.

The configuration method accepts an object with a data property, which is an array of objects representing each template. Alternatively, you can use the dataURL property to provide a link to a JSON file containing the template information.

The complete list of parameters that can be used to configure the template object includes:

Templates Parameters

Note that templates added with this method will apply only when usePicsartInventory=false.

Please note that templates added with this method will apply only when usePicsartInventory is set to false.

Add Text Presets

Text presets allow you to provide users with quick access to frequently used texts. These presets appear as a list when the user enters the text tool. Here is an example of how to add text presets:

PicsartInstance.provideTexts({
  data: [
    {
      id:          '',
      previewText: '',
      text:        '',
      fontSize:    '',
      fontFamily:  '',
    },
  ],
  //dataURL: '',
});


PicsartInstance.open({...});

Similar to templates, the list of text presets should be defined after the editor is opened. You can use the data property of the configuration object to provide an array of text preset objects, or you can use the dataURL property to provide a link to a JSON file containing the text preset information.

The complete list of parameters that can be used to configure the text preset object includes:

Text Presets Parameters

Add Photos

The default version of photo chooser allows users to upload their own files or provide an image URL. Except for that it is also possible to add a list of photos available for use.

To add custom photos to the Picsart Photo and Video Editor SDK, you can use the providePhotos method. Here is an example of how to add photos:

PicsartInstance.providePhotos({
  data: [
    {
      id:         '',
      previewURL: '',
      imageURL: '',
      width: '',
      height: '',
    },
  ],
  //dataURL: '',
});

PicsartInstance.open({...});

The data property should contain an array of photo objects, each representing a custom photo. You can also use the dataURL property to provide a link to a JSON file containing the photo information.

The complete list of parameters that can be used to configure the photo object includes:

Photos Parameters

Add Shapes

Many photo edits include some sort of a simple shape. The shapes may differ from the use case and industry. To tailor to specific use cases, one can define the list of shapes after the editor is opened.

Shapes can be added to the Picsart Photo and Video Editor SDK using the provideShapes method. Here is an example:

PicsartInstance.provideShapes({
  data: [
    {
      id:         '',
      previewURL: '',
      width:      '',
      height:     '',
      shapeURL:   '',
      shapeData:  {},
    },
  ],
  //dataURL: '',
});

PicsartInstance.open({...});

The data property should contain an array of shape objects, each representing a custom shape. You can also use the dataURL property to provide a link to a JSON file containing the shape information.

The complete list of parameters that can be used to configure the shape object includes:

Shapes Parameters

Add Fonts

Fonts can be added to the Picsart Photo and Video Editor SDK using the provideFonts method. Here is an example:

PicsartInstance.provideFonts([
  {
    fontFamily: 'Proxima nova',
    previewURL: 'https://...',
    url: 'https://...',
    licenseInfo: ''
  }
]);

PicsartInstance.open({...});

The data property should contain an array of font objects, each representing a custom font. You can also use the dataURL property to provide a link to a JSON file containing the font information.

The complete list of parameters that can be used to configure the font object includes:

Fonts Parameters

Note that fonts added with this method will apply only when usePicsartInventory=false.

Add Colours

The color picker has a default list of colors that come out of the box. The list can also be extended, or modified. It is possible to change the colors in the default 'Presets' color palette, also it is possible to add a branded color Palette with the given name.

To add custom colors to the Picsart Photo and Video Editor SDK, you can use the provideColors method. Here is an example:

PicsartInstance.provideColors({
  palette: {
    title: ‘Brand colors’    
    colors: [‘#123efd34’, ‘#ef1265’],
  },  
  presets: {
    title: ‘Custom presets title’,
    colors: [‘#000000’, ‘#123efd34’],
  }
});

PicsartInstance.open({...});

The data property should contain an array of color objects, each representing a custom color. You can also use the dataURL property to provide a link to a JSON file containing the color information.

The complete list of parameters that can be used to configure the color object includes:

Colour Parameters