discord-canvas-kit

Prebuilt canvas card templates for Discord bots. Zero boilerplate, fully typed, works with ESM and CJS.

Built on top of @napi-rs/canvas.

Install

npm install discord-canvas-kit @napi-rs/canvas

Cards

Rank / Level Card

import { createRankCard } from "discord-canvas-kit";

const buffer = await createRankCard({
  username: "Karan",
  avatarURL: "https://cdn.discordapp.com/avatars/...",
  level: 12,
  xp: 1350,
  rank: 3,
  status: "online",         // "online" | "idle" | "dnd" | "offline"
  accentColor: "#7289DA",   // optional
  background: "https://...", // optional image URL
});

// Send in Discord
interaction.reply({ files: [{ attachment: buffer, name: "rank.png" }] });

Welcome Card

import { createWelcomeCard } from "discord-canvas-kit";

const buffer = await createWelcomeCard({
  username: "Karan",
  avatarURL: "https://cdn.discordapp.com/avatars/...",
  memberCount: 1042,
  guildName: "My Server",
  accentColor: "#7289DA",     // optional
  background: "https://...",   // optional
  message: "Hope you enjoy!", // optional, defaults to "You are member #X"
});

Goodbye Card

import { createGoodbyeCard } from "discord-canvas-kit";

const buffer = await createGoodbyeCard({
  username: "Karan",
  avatarURL: "https://cdn.discordapp.com/avatars/...",
  memberCount: 1041,
  guildName: "My Server",
  accentColor: "#f04747",     // optional, defaults to red
  background: "https://...",   // optional
  message: "We'll miss you.", // optional
});

Music Card

import { createMusicCard } from "discord-canvas-kit";

const buffer = await createMusicCard({
  title: "Blinding Lights",
  artist: "The Weeknd",
  thumbnailURL: "https://...",
  progress: 0.45,      // 0 to 1
  currentTime: "1:32",
  totalTime: "3:20",
  accentColor: "#1db954", // optional, defaults to Spotify green
});

Options Reference

RankCardOptions

| Option | Type | Required | Default | |---|---|---|---| | username | string | yes | - | | avatarURL | string | yes | - | | level | number | yes | - | | xp | number | yes | - | | rank | number | yes | - | | status | PresenceStatus | no | "offline" | | accentColor | string | no | "#7289DA" | | background | string (URL) | no | - |

WelcomeCardOptions / GoodbyeCardOptions

| Option | Type | Required | Default | |---|---|---|---| | username | string | yes | - | | avatarURL | string | yes | - | | memberCount | number | yes | - | | guildName | string | yes | - | | accentColor | string | no | "#7289DA" / "#f04747" | | background | string (URL) | no | - | | message | string | no | Auto-generated |

MusicCardOptions

| Option | Type | Required | Default | |---|---|---|---| | title | string | yes | - | | artist | string | yes | - | | thumbnailURL | string | yes | - | | progress | number (0-1) | yes | - | | currentTime | string | yes | - | | totalTime | string | yes | - | | accentColor | string | no | "#1db954" |

Build

npm run build

Output goes to dist/ with ESM, CJS, and .d.ts type declarations.