Photo Editing with Picsart Create Editor

An example showing how the SDK can be configured to be used as photo or images editor.

<!DOCTYPE html>
<html lang="en">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Photo Example</title>

    body {
      padding: 100px;
      font-family: Helvetica, Arial, sans-serif;

    .container {
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 20px;
      pointer-events: none;

    iframe {
      border: none;
      border-radius: 4px;
      box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.4);
      border-radius: 4px;
  <div id="containerId" class="container"></div>
  <script src=""></script>

    const downloadFile = (blob, fileName) => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob); = fileName;
		const customFonts = [
        fontStyle: 'normal',
        fontWeight: 400,
        fontDisplay: 'swap',
        src: 'url("") format("woff2")',
        unicodeRange: 'U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB',
        fontStyle: 'normal',
        fontWeight: 400,
        fontDisplay: 'swap',
        src: 'url("") format("woff2")',
        unicodeRange: 'U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF',
        fontStyle: 'normal',
        fontWeight: 400,
        fontDisplay: 'swap',
        src: 'url("") format("woff2")',
        unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',

    const PicsartInstance = new Picsart({
      propertyId: '',
      containerId: 'containerId',
      apiKey: 'Your_API_KEY',
      logo: '',
      usePicsartInventory: true,
      exportFormats: ['image/png', 'replay'],
      exportType: 'blob',
      branding: {
          accents: '#eec443',
          hover: '#eed792',
          main: '#1f3b5e',
          texts: '#ffffff',
          background: '#0a1e37',
      quality: 90, // for images only
      mode: 'image',
      theme: 'light', // turns the color mode of the UI into lighter colors,
      features: {
        undoRedoControls: true,
        zoomControls: true,
        tools: [
      categories: {
        templates: {},
        photos: {
          thumbnailHeader: false,
        text: {
          title: false,
        uploads: {
          title: false,
        elements: {
          smallTitle: true,
        background: {
          header: false,
          tabs: ['Color']

    PicsartInstance.provideShapes({ dataURL: '' });
      nextButton: 'Export',
    PicsartInstance.onExport((output) => {
      if ( downloadFile(, 'image.png');
      if ( {
        const blob = new Blob([], { type: 'application/zip' });
        downloadFile(blob, 'replayFile.replay');
      selectedTool: 'templates',
      measurement: 'pixel',
      title: ''