From canva-pack
Generates minimal TypeScript code for Canva Connect REST API: fetch user profile, create designs, export PNG. For new integrations or testing OAuth setup.
How this skill is triggered — by the user, by Claude, or both
Slash command
/canva-pack:canva-hello-worldThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Minimal working example: authenticate, get user profile, create a design, and export it as PNG. All via the Canva Connect REST API at `api.canva.com/rest/v1/*`.
Minimal working example: authenticate, get user profile, create a design, and export it as PNG. All via the Canva Connect REST API at api.canva.com/rest/v1/*.
canva-install-auth — valid OAuth access tokendesign:meta:read, design:content:write, design:content:read// src/canva/client.ts
const CANVA_BASE = 'https://api.canva.com/rest/v1';
export async function canvaAPI(
path: string,
accessToken: string,
options: RequestInit = {}
): Promise<any> {
const res = await fetch(`${CANVA_BASE}${path}`, {
...options,
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json',
...options.headers,
},
});
if (!res.ok) {
const body = await res.text();
throw new Error(`Canva API ${res.status}: ${body}`);
}
return res.status === 204 ? null : res.json();
}
// GET /v1/users/me — no scopes required, rate limit: 10 req/min
const me = await canvaAPI('/users/me', accessToken);
console.log(`User ID: ${me.team_user.user_id}`);
console.log(`Team ID: ${me.team_user.team_id}`);
// POST /v1/designs — scope: design:content:write, rate limit: 20 req/min
const design = await canvaAPI('/designs', accessToken, {
method: 'POST',
body: JSON.stringify({
design_type: { type: 'preset', name: 'presentation' },
title: 'Hello Canva API',
}),
});
console.log(`Design created: ${design.design.id}`);
console.log(`Edit URL: ${design.design.urls.edit_url}`); // expires in 30 days
console.log(`View URL: ${design.design.urls.view_url}`); // expires in 30 days
// POST /v1/exports — scope: design:content:read, rate limit: 20 req/min
const exportJob = await canvaAPI('/exports', accessToken, {
method: 'POST',
body: JSON.stringify({
design_id: design.design.id,
format: { type: 'png', transparent_background: false },
}),
});
// Poll for completion — GET /v1/exports/{jobId}
let job = exportJob.job;
while (job.status === 'in_progress') {
await new Promise(r => setTimeout(r, 2000));
const poll = await canvaAPI(`/exports/${job.id}`, accessToken);
job = poll.job;
}
if (job.status === 'success') {
console.log('Download URLs (valid 24 hours):');
job.urls.forEach((url: string, i: number) => console.log(` Page ${i + 1}: ${url}`));
} else {
console.error('Export failed:', job.error);
}
// GET /v1/designs — scope: design:meta:read, rate limit: 100 req/min
const designs = await canvaAPI('/designs?ownership=owned&limit=5', accessToken);
for (const d of designs.items) {
console.log(`${d.title} (${d.id}) — ${d.page_count} pages`);
}
import { canvaAPI } from './canva/client';
async function main() {
const token = process.env.CANVA_ACCESS_TOKEN!;
// 1. Verify connection
const me = await canvaAPI('/users/me', token);
console.log(`Connected as user ${me.team_user.user_id}`);
// 2. Create a design
const { design } = await canvaAPI('/designs', token, {
method: 'POST',
body: JSON.stringify({
design_type: { type: 'custom', width: 1080, height: 1080 },
title: 'My First API Design',
}),
});
console.log(`Created: ${design.id} — edit at ${design.urls.edit_url}`);
// 3. Export as PDF
const { job } = await canvaAPI('/exports', token, {
method: 'POST',
body: JSON.stringify({
design_id: design.id,
format: { type: 'pdf' },
}),
});
console.log(`Export job ${job.id} started — status: ${job.status}`);
}
main().catch(console.error);
| Error | Cause | Solution |
|---|---|---|
| 401 Unauthorized | Expired or invalid token | Refresh token via /v1/oauth/token |
| 403 Forbidden | Missing required scope | Enable scope in integration settings |
| 404 Not Found | Design doesn't exist or no access | Verify design ID and ownership |
| 429 Too Many Requests | Rate limit exceeded | Respect Retry-After header |
Proceed to canva-local-dev-loop for development workflow setup.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin canva-packCreates Canva designs via Connect REST API, redirects for user editing, fetches metadata, and exports as PDF/PNG/JPG. For programmatic design workflows and app integrations.
Automates Canva tasks like listing designs, creating from brand templates, uploading assets, and exports via Composio toolkit and Rube MCP. Useful for design automation workflows.
Automates Canva operations: list/browse designs, create from brand templates/assets, upload assets via Rube MCP Composio toolkit. Requires active Canva connection.