Add content

Elevate your Picsart Create Editor by adding custom content like templates, text presets, photos, shapes, fonts, and colors, for a unique and tailored editing experience.

Add Templates

Templates are a powerful tool in the Picsart Create Editor 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

NameTypeDescriptionOptional
idStringUnique identifier of the template.false
previewURLString/URLThe preview image URL of the template.
The value must be a valid URL of a JPG, PNG, or WEBP format photo.
false
urlStringThe template file URL. Either this URL or the data property should be provided.
The file should be in JSON format.
true
dataObjectThe template data as an object. Either this data or the url property should be provided.true
previewWidthNumberThe width necessary to display previews correctly in the sidebar.true
previewHeightNumberThe height necessary to display previews correctly in the sidebar.true

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

NameTypeDescriptionDefaultOptional
idStringUnique identifier of the text preset.false
previewTextStringThe text preset preview has a limited space and this text preview can be used to provide a human-readable short+preview version of the complete text.
When skipped the text value will be applied.
true
textStringThe actual text of the preset that will be inserted when the user selects it.false
fontSizeNumberThe font size to be applied when the user selects the text preset.16true
fontFamilyStringThe font family to be applied when the user selects the text preset.sanstrue

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 Create Editor, 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

NameTypeDescriptionOptional
idStringUnique identifier of the photo.true
previewURLString/URLThe preview image URL of the photo.
The value must be a valid URL of a JPG, PNG, or WEBP format photo.
true
imageURLString/URLThe image URL of the photo.false
widthNumberImage widthtrue
heightNumberImage heighttrue

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 Create Editor 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

NameTypeDescriptionDefaultOptional
idStringUnique identifier of the Shape.true
previewURLString/URLThe preview image URL of the shape.

The value must be a valid URL of a JPG, PNG or WEBP format photo.
true
widthNumberThe designated width of the shape.false
heightNumberThe designated height of the shape.false
shapeURLString/URLThe shape file URL. Either this URL or the data defined below should be provided.

The file should be of SVG format.
templatestrue
shapeDataObjectThe shape data as an Object. Either this data or the URL defined above should be provided.true

Add Fonts

Fonts can be added to the Picsart Create Editor 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

NameTypeDescriptionOptional
fontFamilyStringThe font family name.false
previewURLString/URLA small image showing an example of writing a font.false
urlString/URLThe font file URL. The file format must be .ttffalse
licenseInfoStringThe font’s license info.true

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 Create Editor, 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

NameTypeDescriptionDefaultOptional
palette.titleStringThe branded color palette title.Popular colorstrue
palette.titleArrayk:parameDefines the list of colors in the branded color palette.

The list of colors is a Hex color strings array. You can also use 8-digit hexs to use the alpha channel. Use this to change the default color presets. The maximum number of colors in the palette is 21.
emptyfalse
presets.titleStringDefault color palette title.Presetsfalse
presets.colorsArrayk:parameDefines the list of colors in the default color palette ‘Presets’.

The list of colors is a Hex color strings array. You can also use 8-digit hexs to use the alpha channel. Use this to change the default color presets. The maximum number of colors in the palette is 21.
block:parameters]
{
"data": {
"h-0": "Name",
"h-1": "Type",
"h-2": "Description",
"h-3": "Default",
"h-4": "Optional",
"0-0": "palette.title",
"0-1": "String",
"0-2": "The branded color palette title.",
"0-3": "Popular colors",
"0-4": "true",
"1-0": "palette.title",
"1-1": "Array[String]",
"1-2": "Defines the list of colors in the branded color palette. \n \nThe list of colors is a Hex color strings array. You can also use 8-digit hexs to use the alpha channel. Use this to change the default color presets. The maximum number of colors in the palette is 21.",
"1-3": "empty",
"1-4": "false",
"2-0"
false