This guide provides a step-by-step tutorial on setting up the Template Studio of the Photo. Template Studio offers two modes of configuration:

1. Editable Templates Mode: Users can view and edit a list of templates.
2. View-Only Templates Mode: Users can view a list of templates without editing capabilities.

Follow along to learn how to configure each mode to suit your application's needs.

Understanding the Two Modes

Editable Templates Mode

In this mode, users can:

• View a list of templates.
• Edit the templates using the full suite of editing tools provided by the SDK.

View-Only Templates Mode

In this mode, users can:

• View a list of templates.
• Cannot edit the templates; the editing tools are disabled or hidden.

Prerequisites

Before proceeding, ensure you have:

• An API key for the Photo and Video Editor SDK.
• A propertyId, which is your production domain address (e.g., yourdomain.com).
• The SDK script included in your project.

Editable Templates Mode

Step 1: Load the SDK

First, include the SDK script in your HTML file:

<script src="https://sdk.picsart.io/cdn?v=1.8&key=sdk"></script>

Ensure you have a container element where the editor will be rendered:

<div id="containerId" class="container"></div>

Step 2: Initialize the Editor

Initialize the editor with the appropriate configuration:

const PicsartInstance = new Picsart({
  propertyId: 'yourdomain.com',
  containerId: 'containerId',
  apiKey: 'Your API Key here',
  exportFormats: [],
  exportType: 'blob',
  usePicsartInventory: true,
  theme: 'light',
  features: {
    multiCanvasSupport: false,
    shapeToCollage: true,
    tools: [
      'effects',
      'eraser',
      'adjust',
      'edit',
      'color',
      'gradient',
      'font',
      'border',
      'outline',
      'shadow',
      'replace',
      'remove',
      'crop',
      'flip_rotate',
      'position',
      'trim',
      'tool_removeBG',
    ],
  },
  categories: {
    templates_management_layouts: {},       // Enable layouts category
    templates_management_templates: {},     // Enable templates management
    uploads: {},
    photos: {},
    stickers: {},
    text: {
      singleAddText: false,
    },
    elements: {},
    background: {},
  },
  miniapps: {
    t2i: true,
    editorSdkTemplates: true,  // Enable template editing
  },
  sidebar: ['TEMPLATES'],
});

Important Notes:

• In the categories object:

  • Include templates_management_layouts and templates_management_templates to enable editing capabilities.
  • Do not include templates: {}; this is reserved for the view-only mode.

• In the miniapps object:

  • Set editorSdkTemplates: true to enable template editing features.

View-Only Templates Mode

Initialize the Editor

Initialize the editor with the view-only configuration:

const PicsartInstance = new Picsart({
  propertyId: 'yourdomain.com',
  containerId: 'containerId',
  apiKey: 'Your API Key here',
  exportFormats: [],
  exportType: 'blob',
  usePicsartInventory: true,
  theme: 'light',
  features: {
    multiCanvasSupport: false,
    shapeToCollage: true,
    tools: [
      'effects',
      'eraser',
      'adjust',
      'edit',
      'color',
      'gradient',
      'font',
      'border',
      'outline',
      'shadow',
      'replace',
      'remove',
      'crop',
      'flip_rotate',
      'position',
      'trim',
      'tool_removeBG',
    ],
  },
  categories: {
    layout: {},       // Enable layout category
    templates: {},    // Enable templates viewing
    uploads: {},
    photos: {},
    stickers: {},
    text: {},
    elements: {},
    background: {},
  },
  miniapps: {
    t2i: true,
    editorSdkTemplates: false,  // Disable template editing
  },
  sidebar: ['TEMPLATES'],
});

Important Notes:

• In the categories object:

  • Include templates: {} to enable viewing templates.
  • Do not include templates_management_layouts and templates_management_templates; these are for editing capabilities.

• In the miniapps object:

  • Set editorSdkTemplates: false to disable template editing features.

Summary

• Editable Templates Mode: Include templates_management_layouts and templates_management_templates in the categories object and set editorSdkTemplates: true in the miniapps object.
• View-Only Templates Mode: Include templates: {} in the categories object and set editorSdkTemplates: false in the miniapps object.

By carefully configuring the categories and miniapps objects, you can control the level of access users have to templates within the Template Studio.