SponsorKit

To use SponsorKit without writing code, you can use the CLI. First, create a .env file in your project root and configure at least one provider (e.g., GitHub, Patreon, etc.).

Supported providers include:

• GitHub Sponsors
• Patreon
• OpenCollective
• Afdian
• Polar
• Liberapay
• Ko-fi

Once configured, run the following command to fetch data and generate sponsor images:

npx sponsorkit

Ko-fi uses webhooks instead of a direct API for sponsor lists. To use Ko-fi:

1. Start the SponsorKit receiver:

   npx sponsorkit kofi-webhook

2. Expose the local server http://127.0.0.1:3456/kofi via an HTTPS tunnel (e.g., using ngrok).
3. Set that public URL in your Ko-fi webhooks page.
4. Once events are received, regenerate your sponsor output using:

   npx sponsorkit --force

Note: Ko-fi does not send events when a membership ends. SponsorKit treats subscription payments as active for 35 days by default. You can adjust this using kofi.subscriptionEffectivity in your config.

You can generate multiple images with different settings (e.g., different sizes or renderers) in a single run using the renders field in your configuration. Each render inherits the top-level configuration settings unless overridden.

import { defineConfig } from 'sponsorkit'

export default defineConfig({
  github: { /* ... */ },
  width: 800,
  renderer: 'tiers',

  renders: [
    {
      name: 'sponsors.tiers',
      formats: ['svg'],
    },
    {
      name: 'sponsors.wide',
      width: 1200,
    },
    {
      name: 'sponsors.circles',
      renderer: 'circles',
      width: 600,
    },
  ],
})

Use defineConfig from sponsorkit to create your configuration object. This object allows you to define sponsorship tiers, handle sponsor merging across platforms, customize rendering outputs, and manage how links and avatars are replaced.

import { defineConfig, tierPresets } from 'sponsorkit'

export default defineConfig({
  tiers: [
    {
      title: 'Sponsors',
      monthlyDollars: 10,
      preset: tierPresets.medium,
    },
  ],
})

You can import fetchSponsors to integrate SponsorKit directly into your own TypeScript/JavaScript applications.

import { fetchSponsors } from 'sponsorkit'

const sponsors = await fetchSponsors({
  github: {
    token: 'YOUR_TOKEN',
    login: 'YOUR_LOGIN',
  },
  // ... other providers
})

You can customize the appearance of generated SVG files using the svgInlineCSS configuration key. The default CSS targets the text element and specific SponsorKit classes:

text {
  font-weight: 300;
  font-size: 14px;
  fill: #777777;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sponsorkit-link {
  cursor: pointer;
}
.sponsorkit-tier-title {
  font-weight: 500;
  font-size: 20px;
}

The renders array allows you to generate multiple versions of your sponsor graphics in a single run. Each render object can specify:

• name: A unique identifier for the render.
• width: The width in pixels.
• formats: An array of output formats (e.g., ['svg', 'png']).
• renderer: The specific rendering engine to use (e.g., 'circles').
• includePastSponsors: Boolean to include or exclude past sponsors in this specific render.

renders: [
  {
    name: 'sponsors',
    width: 800,
    formats: ['svg', 'png'],
  },
  {
    renderer: 'circles',
    name: 'sponsors-circles',
    width: 1000,
    includePastSponsors: true,
  },
],

You can customize the metadata displayed for sponsors using:

• replaceLinks: An object mapping original URLs to new URLs (e.g., mapping a GitHub profile to a personal website).
• replaceAvatars: An object to provide custom avatar mappings.

replaceLinks: {
  'https://github.com/antfu': 'https://antfu.me',
},

When using the 'tiers' renderer, you can define custom tiers using the tiers option in SponsorkitRenderOptions. Each tier defines a minimum monthly dollar amount and can have its own visual styling and composition hooks.

tiers: [
  {
    monthlyDollars: 100,
    title: 'Gold Tier',
    preset: {
      boxWidth: 200,
      boxHeight: 50,
      avatar: { size: 40 }
    }
  }
]