canva-sdk-patterns

name	canva-sdk-patterns
description	Apply production-ready Canva Connect API client patterns for TypeScript and Python. Use when building a reusable API client, implementing token refresh, or establishing team coding standards for Canva integrations. Trigger with phrases like "canva client patterns", "canva best practices", "canva code patterns", "canva API wrapper", "canva TypeScript client".
allowed-tools	Read, Write, Edit
version	1.5.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","design","canva"]
compatibility	Designed for Claude Code

Canva SDK Patterns

Overview

Production-ready patterns for wrapping the Canva Connect REST API. There is no official SDK — all integrations use fetch against api.canva.com/rest/v1/* with OAuth Bearer tokens. These patterns add automatic token refresh, retry logic, type safety, and multi-tenant support.

Prerequisites

• Completed canva-install-auth setup
• Understanding of OAuth 2.0 token lifecycle
• TypeScript 5+ project (or Python 3.10+)

Pattern 1: Type-Safe Client with Auto Token Refresh

// src/canva/client.ts
interface CanvaTokens {
  accessToken: string;
  refreshToken: string;
  expiresAt: number; // Unix ms
}

interface CanvaClientConfig {
  clientId: string;
  clientSecret: string;
  tokens: CanvaTokens;
  onTokenRefresh?: (tokens: CanvaTokens) => Promise<void>; // Persist new tokens
}

export class CanvaClient {
  private static BASE = 'https://api.canva.com/rest/v1';
  private tokens: CanvaTokens;

  constructor(private config: ) {
    . = config.;
  }

   request<T = >(: , :  = {}): <T> {
    
     (.() > .. - ) {
       .();
    }

     res =  (, {
      ...init,
      : {
        : ,
        : ,
        ...init.,
      },
    });

     (res. === ) {
       .();
       .(path, init); 
    }

     (!res.) {
       body =  res.();
        (res., body, path);
    }

     res. ===  ? (  T) : res.();
  }

    (): <> {
     basicAuth = .(
      
    ).();

     res =  (, {
      : ,
      : {
        : ,
        : ,
      },
      :  ({
        : ,
        : ..,
      }),
    });

     (!res.)   ();

     data =  res.();
    . = {
      : data.,
      : data.,  
      : .() + data. * ,
    };

     ..?.(.);
  }

  
   () {  .(); }
   () {  .(); }
   () {  .(, { : , : .(body) }); }
   () {  .(); }
   () {  .(); }
   () {  .(, { : , : .(body) }); }
   () {  .(); }
   () {  .(, { : , : .(body) }); }
   () {  .(); }
}