> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spark.money/llms.txt
> Use this file to discover all available pages before exploring further.

# Issuer SDK

export const Card = ({icon, iconLight, iconDark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="flex flex-col gap-12 justify-space-between">
          <div className="w-8 h-8">
            {iconLight && iconDark ? <>
                <img src={iconLight} className="icon-light w-full h-full pointer-events-none" alt={title} width={32} height={32} />
                <img src={iconDark} className="icon-dark w-full h-full pointer-events-none" alt={title} width={32} height={32} />
              </> : <img src={icon} className="w-full h-full pointer-events-none" alt={title} width={32} height={32} />}
          </div>
          <div className="flex flex-col gap-2">
            <h2 className="card-title text font-semibold leading-tight">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const VCard = ({img, light, dark, icon, href, title, description, target = "_self"}) => {
  return <div className="spark-card overflow-hidden rounded-2xl flex justify-center items-center hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="vcard-col">
          <div className="vcard-image w-full aspect-video relative">
            {light && dark ? <>
                <img src={light} alt={title} className="icon-light w-full h-full object-cover pointer-events-none" />
                <img src={dark} alt={title} className="icon-dark w-full h-full object-cover pointer-events-none" />
              </> : <div className="w-full h-full bg-cover bg-center bg-no-repeat" style={{
    backgroundImage: `url(${img})`
  }} />}
          </div>
          <div className="vcard-content flex flex-col gap-2 p-6">
            <h2 className="card-title text font-semibold leading-none">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const HCard = ({icon, light, dark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center items-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="hcard-row" style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '1rem'
  }}>
          <div className="hcard-icon" style={{
    flexShrink: 0,
    width: '40px',
    height: '40px'
  }}>
            {light && dark ? <>
                <img src={light} className="icon-light pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
                <img src={dark} className="icon-dark pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
              </> : <img src={icon} className="pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />}
          </div>
          <div className="hcard-text" style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem'
  }}>
            <h2 className="card-title text font-semibold leading-none" style={{
    margin: 0
  }}>
              {title}
            </h2>
            <p className="card-description text-sm leading-none" style={{
    margin: 0
  }}>
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

<Frame className="chill">
  <img className="block dark:hidden" src="https://mintcdn.com/lightspark/OQ3nooAPVcDN2i7X/images/issuance/issuer-sdk-light.png?fit=max&auto=format&n=OQ3nooAPVcDN2i7X&q=85&s=89c4a856229ba0e290dee0fac4d03027" alt="Issuer SDK" width="3840" height="1440" data-path="images/issuance/issuer-sdk-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/lightspark/OQ3nooAPVcDN2i7X/images/issuance/issuer-sdk.png?fit=max&auto=format&n=OQ3nooAPVcDN2i7X&q=85&s=f4adf64df3ef3ba572faf8d3bf654e8c" alt="Issuer SDK" width="3840" height="1440" data-path="images/issuance/issuer-sdk.png" />
</Frame>

The Spark Issuer SDK lets you create and manage tokens on the Spark network in the most scalable and developer-friendly way possible. Whether you're launching a new token, managing supply, or building token-based applications, the SDK provides everything you need to get started. See how [Brale built USDB](https://brale.xyz/blog/brale-spark-digital-dollars-native-to-bitcoin), the first Bitcoin-native stablecoin on Spark.

***

## Installation

<Columns cols={2}>
  <HCard title="TypeScript SDK" href="/issuance/typescript" icon="/icons/icon-typescript.svg" description="TypeScript setup guide" />

  <HCard title="View API Docs" href="/api-reference/issuer-overview" icon="/icons/icon-api-red.svg" description="Reference documentation" />
</Columns>

***

## Guides

<Columns cols={2} className="gap-4">
  <VCard title="Create Token" light="/images/issuance/create-token-light.png" dark="/images/issuance/create-token.png" href="/issuance/create-token" description="Define name, supply, and properties" />

  <VCard title="Transfer Tokens" light="/images/issuance/token-transfers-light.png" dark="/images/issuance/token-transfers.png" href="/issuance/transfer-tokens" description="Send tokens to users" />

  <VCard title="Mint & Burn" light="/images/issuance/token-management-light.png" dark="/images/issuance/token-management.png" href="/issuance/mint-tokens" description="Manage token supply" />

  <VCard title="Analytics" light="/images/issuance/token-analytics-light.png" dark="/images/issuance/token-analytics.png" href="/issuance/token-analytics" description="Track transactions and holders" />
</Columns>

***

## Tools

<Columns cols={3}>
  <Card title="Token Lists" href="https://btkn.info/" icon="https://mintcdn.com/lightspark/CTf3lWSz3PciiPxG/icons/icon-drop-blue.svg?fit=max&auto=format&n=CTf3lWSz3PciiPxG&q=85&s=3c05bfb18cca2607c170b86f08baa8f2" description="Token list standard for BTKN" target="_blank" width="16" height="16" data-path="icons/icon-drop-blue.svg" />

  <Card title="Explorer" href="https://www.sparkscan.io/?network=mainnet" icon="https://mintcdn.com/lightspark/CTf3lWSz3PciiPxG/icons/icon-globe-greenbright.svg?fit=max&auto=format&n=CTf3lWSz3PciiPxG&q=85&s=7642d66de6b46f117a947ded41ce8349" description="The official explorer for Spark" target="_blank" width="16" height="16" data-path="icons/icon-globe-greenbright.svg" />

  <Card title="Spark CLI" href="/tools/cli" iconLight="/icons/icon-cli-black.svg" iconDark="/icons/icon-cli-white.svg" description="CLI for Spark operations" />
</Columns>