Template Editor API Integration

Core Components

The integration consists of three main components that together provide a complete template experience for your users.

User Flow

The typical end-user journey follows four steps. Your CMS controls the UI; DS Templates provides the data and editor.

White-label & Custom Domain

All DS Templates URLs can be served from your own domain. Your end-users will never see or find the DS Templates brand.

Authentication

Authentication is handled via JWT tokens. Your CMS backend requests a token for a specific user, and that token is used for all subsequent API calls and to load the editor iframe.

Roles

Generate JWT Token

Your CMS backend requests a JWT token for a specific user. This token is then used for all authenticated operations.

{
    "external_user_id": "cms-user-456",
    "account_id": "company-123",
    "role": "editor"
}

{
    "jwt_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "expires_in": 3600
}

Manage Sub-users

Provision sub-users with specific roles for an account. Existing users (matched by external_user_id) are skipped.

{
    "subusers": [
        {
            "external_user_id": "cms-user-456",
            "email": "user@company.com",
            "role": "editor"
        },
        {
            "external_user_id": "cms-user-789",
            "email": "admin@company.com",
            "role": "admin"
        }
    ]
}

{
    "success": true,
    "created": 2,
    "skipped": 0
}

Template Library

Retrieve all available templates to display in your CMS. This powers the template browser/library where users choose a template to edit.

[
    {
        "template_id": "abc123",
        "preview_url": "https://content.ds-templates.com/template/abc123/preview",
        "editor_url": "https://content.ds-templates.com/editor/abc123",
        "thumbnail_url": "https://content.ds-templates.com/template/abc123/thumbnail.jpg",
        "category": "Information",
        "responsive": true,
        "is_active": true
    },
    {
        "template_id": "def456",
        "preview_url": "https://content.ds-templates.com/template/def456/preview",
        "editor_url": "https://content.ds-templates.com/editor/def456",
        "thumbnail_url": "https://content.ds-templates.com/template/def456/thumbnail.jpg",
        "category": "Promotion",
        "responsive": false,
        "is_active": true
    }
]

User Templates

Retrieve all saved templates for the authenticated user. This powers the "My Templates" view in your CMS.

[
    {
        "template_id": "xyz789",
        "template_url": "https://content.ds-templates.com/template/xyz789",
        "preview_url": "https://content.ds-templates.com/template/xyz789/preview",
        "duration": 15,
        "thumbnail_url": "https://content.ds-templates.com/template/xyz789/thumbnail.jpg",
        "creator": "Jan Jansen",
        "last_edit": "2025-11-01T12:00:00Z",
        "ratio": "16:9",
        "language": "nl"
    }
]

Editor Iframe

The template editor is loaded in an iframe. The editor_url from the template library response is used as the iframe source, with the JWT token appended as a query parameter.

{editor_url}?token={jwt_token}

Embedding example

<div class="editor-container" style="width:100%;height:100vh">
    <iframe
        id="template-editor"
        src="https://content.ds-templates.com/editor/abc123?token={jwt_token}"
        style="width:100%;height:100%;border:none"
        allow="clipboard-write"
    ></iframe>
</div>

PostMessage Communication

The editor communicates bidirectionally with the parent window using the PostMessage API. Always validate event.origin before processing messages.

Editor → Parent Events

Example: save-complete

{
    "type": "save-complete",
    "data": {
        "templateId": "xyz789",
        "message": "Template saved successfully",
        "previewKey": "bb2534b15e5cca2de323c60aa44201f9"
    }
}

Parent → Editor Commands

Event listener example

const ORIGIN = 'https://content.ds-templates.com';
const editor = document.getElementById('template-editor');

window.addEventListener('message', (event) => {
    if (event.origin !== ORIGIN) return;

    const { type, data } = event.data;

    switch (type) {
        case 'ready':
            console.log('Editor ready');
            break;

        case 'save-complete':
            console.log('Template saved:', data.templateId);
            // Refresh your "My Templates" list
            refreshUserTemplates();
            break;

        case 'save-error':
            console.error('Save failed:', data.error);
            break;
    }
});

// Trigger save from your CMS UI
function triggerSave() {
    editor.contentWindow.postMessage(
        { type: 'save' }, ORIGIN
    );
}

Additional Endpoints

Beyond the core endpoints documented above, DS Templates can provide additional API endpoints tailored to your platform. These capabilities are available on request and determined in collaboration with each CMS provider based on your specific requirements.

Data Models

Reference for all data objects returned by the API.

Template (library item)

MyTemplate (saved user template)

Error Handling

All API endpoints return standard HTTP status codes with a consistent JSON error format.

Error response format

{
    "code": 401,
    "message": "JWT token missing or invalid"
}

Rate Limiting

API requests are rate-limited per account to ensure fair usage and platform stability. Exact limits are configured per partner and may differ from the defaults shown below.

X-RateLimit-Limit: 120
X-RateLimit-Remaining: 115
X-RateLimit-Reset: 1708300800

Security Best Practices

Follow these recommendations to ensure a secure integration.

• Server-side token generation — always request JWT tokens from your backend. Never expose your API credentials in client-side code.
• Token handling — pass the JWT token to the client only via the iframe URL query parameter. Do not store tokens in localStorage or cookies.
• Validate PostMessage origin — always verify event.origin before processing any message from the editor iframe.
• HTTPS only — all communication must use HTTPS. HTTP requests are rejected.
• Principle of least privilege — assign users the minimum required role (viewer, editor, admin).
• Credential rotation — contact DS Templates to issue new credentials if you suspect a compromise.