Skip to main content

Template Library

Coming Soon

The Template Library API is currently in development and will be available in a future release.

Overview​

The Pexelize Template Library provides a collection of professionally designed email templates that you can fetch via REST API endpoints and load into the editor using loadDesign().

Templates are not loaded directly inside the editor UI. Instead, your application fetches templates from the API, lets your users browse and select them in your own UI, and then loads the chosen template's Design JSON into the editor.

Authentication​

All Template Library API requests require your editorKey and a HMAC-SHA256 signature generated with your securityKey.

  • editorKey — Your project's editor key, found in the Pexelize dashboard. This identifies your project.
  • securityKey — Your project's security key, found in the Security tab of the dashboard. Used server-side to generate HMAC signatures. Never expose this key in client-side code.
Keep your Security Key secret

Never expose the Security Key in client-side code. It must only be used on your server.

Generating the signature​

Compute an HMAC-SHA256 hash of your editorKey using your securityKey:

import crypto from "crypto";

const SECURITY_KEY = process.env.PEXELIZE_SECURITY_KEY!;

function generateSignature(editorKey: string): string {
  return crypto.createHmac("sha256", SECURITY_KEY).update(editorKey).digest("hex");
}

Making API requests​

Pass both the editorKey and the generated signature in the request:

GET https://api.pexelize.com/v1/templates?editorKey=px_your_key
Headers:
  X-Pexelize-Signature: <hmac-sha256-signature>

Or as query parameters:

GET https://api.pexelize.com/v1/templates?editorKey=px_your_key&signature=<hmac-sha256-signature>

How it works​

1. Fetch templates from the API​

Use the Template Library API to list and retrieve templates. Include your editorKey and HMAC signature:

GET https://api.pexelize.com/v1/templates?editorKey=px_your_key
X-Pexelize-Signature: <signature>

Example response:

{
  "templates": [
    {
      "id": "tpl_welcome_01",
      "name": "Welcome Email — Minimal",
      "category": "welcome",
      "thumbnail": "https://api.pexelize.com/v1/templates/tpl_welcome_01/thumbnail",
      "tags": ["welcome", "onboarding", "minimal"],
      "createdAt": "2025-12-01T00:00:00Z"
    }
  ],
  "total": 48,
  "page": 1,
  "perPage": 20
}

2. Get a single template's Design JSON​

GET https://api.pexelize.com/v1/templates/tpl_welcome_01?editorKey=px_your_key
X-Pexelize-Signature: <signature>

Example response:

{
  "id": "tpl_welcome_01",
  "name": "Welcome Email — Minimal",
  "category": "welcome",
  "designJson": {
    "body": { ... },
    "schemaVersion": 1
  }
}

3. Load into the editor​

Pass the Design JSON to the editor's loadDesign() method:

// Fetch template from the API (server-side or via your backend proxy)
const res = await fetch(
  "https://api.pexelize.com/v1/templates/tpl_welcome_01?editorKey=px_your_key",
  {
    headers: { "X-Pexelize-Signature": signature },
  }
);
const template = await res.json();

// Load into the editor
editor.loadDesign(template.designJson);
Server-side fetching recommended

Since the securityKey must never be exposed in client-side code, generate the signature on your server. Your frontend calls your backend endpoint, which signs the request and proxies it to the Pexelize API.

API endpoints​

MethodEndpointDescription
GET/v1/templatesList all available templates. Supports filtering by category and tags.
GET/v1/templates/:idGet a single template with its full Design JSON.
GET/v1/templates/:id/thumbnailGet a preview thumbnail image for the template.
GET/v1/templates/categoriesList all available template categories.

Query parameters for listing​

ParameterTypeDescription
editorKeystringRequired. Your project's editor key.
categorystringFilter by category (e.g. welcome, newsletter, promotional)
tagsstringComma-separated tag filter (e.g. minimal,dark)
pagenumberPage number (default: 1)
perPagenumberResults per page (default: 20, max: 100)
searchstringSearch templates by name or description

Required headers​

HeaderDescription
X-Pexelize-SignatureRequired. HMAC-SHA256 signature of the editorKey, generated with your securityKey.

Template categories​

Templates will be organized by use case:

  • Welcome — Onboarding and welcome emails
  • Newsletter — Recurring content and digest layouts
  • Promotional — Sales, discounts, and product launches
  • Transactional — Order confirmations, receipts, shipping updates
  • Product update — Feature announcements and release notes
  • Event — Invitations, reminders, and follow-ups
  • Re-engagement — Win-back and inactive user campaigns

What's included​

All templates in the library are:

  • Tested across all major email clients — Gmail, Outlook (2007–2021), Apple Mail, Yahoo, iOS, Android, Samsung Email
  • Optimized for conversion — Layout patterns based on email marketing best practices
  • Fully customizable — Load the Design JSON and edit every element with the drag-and-drop builder
  • Production-ready — Clean, responsive HTML output ready for any ESP

Integration example​

Since templates are fetched via API with HMAC authentication, generate the signature on your server and proxy the request:

// Your backend endpoint (e.g. /api/templates)
import crypto from "crypto";

const SECURITY_KEY = process.env.PEXELIZE_SECURITY_KEY;

app.get("/api/templates", async (req, res) => {
  const editorKey = process.env.PEXELIZE_EDITOR_KEY;
  const signature = crypto
    .createHmac("sha256", SECURITY_KEY)
    .update(editorKey)
    .digest("hex");

  const upstream = await fetch(
    `https://api.pexelize.com/v1/templates?editorKey=${editorKey}`,
    { headers: { "X-Pexelize-Signature": signature } }
  );
  const data = await upstream.json();
  res.json(data);
});

Then your frontend calls your own endpoint:

// Your frontend — fetch from your backend, not directly from Pexelize
const res = await fetch("/api/templates?category=newsletter");
const { templates } = await res.json();

// Show templates in your own UI (modal, sidebar, page, etc.)
// When user selects a template:
const detail = await fetch(`/api/templates/${templates[0].id}`);
const template = await detail.json();
editor.loadDesign(template.designJson);

This approach keeps your securityKey server-side while giving you full control over the template browsing experience — whether that's a modal, a dedicated page, a sidebar panel, or an onboarding flow.

Learn more​

  • Security — Full guide on HMAC identity verification with your Security Key
  • SDK Methods — loadDesign() and other editor methods

Stay updated​