> ## Documentation Index
> Fetch the complete documentation index at: https://discord-dependabot-npm-and-yarn-js-yaml-5-2-2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Discord Development Guide Library

> Guides to help you get started on your development journey with Discord.

export const ImageCard = ({img, href, title, children, imageHeight = 120, imageFade = false, imageOffset = 0}) => {
  return <div className="MDXImageCard image-card-wrapper" style={{
    position: 'relative',
    cursor: 'pointer',
    marginTop: '0.5rem',
    marginBottom: '0.5rem'
  }}>
      <a href={href} aria-label={title} className="MDXImageCard image-card-link" style={{
    position: 'absolute',
    inset: 0,
    zIndex: 1
  }} />
      <div className="MDXImageCard image-card" style={{
    display: 'flex',
    flexDirection: 'column',
    borderRadius: '1rem',
    overflow: 'hidden',
    height: '100%'
  }}>
        <div style={{
    height: `${imageHeight}px`,
    width: '100%',
    overflow: 'hidden',
    flexShrink: 0,
    backgroundColor: '#242429',
    ...imageFade && ({
      maskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)',
      WebkitMaskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)'
    })
  }}>
          <img src={img} alt={title} style={{
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    objectPosition: `center calc(50% - ${imageOffset}px)`,
    display: 'block',
    margin: 0
  }} />
        </div>
        <div style={{
    display: 'flex',
    flexDirection: 'column',
    padding: '1.25rem 1.5rem',
    flex: 1
  }}>
          <p className="MDXImageCard image-card-title" style={{
    margin: 0,
    fontWeight: 600,
    fontSize: '1rem'
  }}>
            {title}
          </p>
          {children && <p className="MDXImageCard image-card-description" style={{
    margin: '0.25rem 0 0',
    fontSize: '1rem',
    lineHeight: '1.5rem'
  }}>
              {children}
            </p>}
        </div>
      </div>
    </div>;
};

## Building on Discord

<CardGroup cols={3}>
  <ImageCard title="Bot Development" href="/developers/guides/bots" img="https://mintcdn.com/discord-dependabot-npm-and-yarn-js-yaml-5-2-2/aPEGHDI2weNXSetp/images/headers/docs-botsapp-hero.png?fit=max&auto=format&n=aPEGHDI2weNXSetp&q=85&s=e9d7f3cd1e9328e517f10d612908df97" width="1336" height="540" data-path="images/headers/docs-botsapp-hero.png">
    Guides for developing bots on Discord.
  </ImageCard>

  <ImageCard title="Discord Activities" href="/developers/guides/activities" img="https://mintcdn.com/discord-dependabot-npm-and-yarn-js-yaml-5-2-2/QHXiyLK7INLoIB6C/images/activities/activities-hero.png?fit=max&auto=format&n=QHXiyLK7INLoIB6C&q=85&s=0828358f79ab8f5de502a0b667238951" width="1495" height="726" data-path="images/activities/activities-hero.png">
    Guides for developing embedded games and experiences on Discord.
  </ImageCard>

  <ImageCard title="Integrating the Social SDK" href="/developers/guides/social-sdk" img="https://mintcdn.com/discord-dependabot-npm-and-yarn-js-yaml-5-2-2/aPEGHDI2weNXSetp/images/headers/docs-sdk-hero.png?fit=max&auto=format&n=aPEGHDI2weNXSetp&q=85&s=5ddf2faa5759ede1aee50c34702c11b4" width="1336" height="540" data-path="images/headers/docs-sdk-hero.png">
    Guides for integrating games with the Discord Social SDK.
  </ImageCard>
</CardGroup>

<CardGroup cols={1}>
  <ImageCard title="Using Platform Features" href="/developers/guides/platform" img="https://mintcdn.com/discord-dependabot-npm-and-yarn-js-yaml-5-2-2/aPEGHDI2weNXSetp/images/headers/docs-home-hero.png?fit=max&auto=format&n=aPEGHDI2weNXSetp&q=85&s=e73b6108e0c01df5dfba37d02022a2af" width="1480" height="600" data-path="images/headers/docs-home-hero.png">
    Guides for using Discord's features across your game, app, and server experience.
  </ImageCard>
</CardGroup>

## Community & Servers

<CardGroup cols={1}>
  <ImageCard title="Community Management" href="/developers/guides/communities" img="https://mintcdn.com/discord-dependabot-npm-and-yarn-js-yaml-5-2-2/aPEGHDI2weNXSetp/images/game-development/how-to-create-a-community-for-your-game/banner-how-to-create-a-community-for-your-game.webp?fit=max&auto=format&n=aPEGHDI2weNXSetp&q=85&s=21e2ac3d0633e91d08446eeb6d72c6ce" width="1336" height="540" data-path="images/game-development/how-to-create-a-community-for-your-game/banner-how-to-create-a-community-for-your-game.webp">
    Guides for managing your Discord community and server effectively.
  </ImageCard>
</CardGroup>

## Building Games

<CardGroup cols={1}>
  <ImageCard title="Game Development" href="/developers/guides/game-development" img="https://mintcdn.com/discord-dependabot-npm-and-yarn-js-yaml-5-2-2/aPEGHDI2weNXSetp/images/game-development/how-to-grow-your-game/banner-how-to-grow-your-game.webp?fit=max&auto=format&n=aPEGHDI2weNXSetp&q=85&s=1c8eb1cc78be5505698a530ad2fbbb10" width="1336" height="540" data-path="images/game-development/how-to-grow-your-game/banner-how-to-grow-your-game.webp">
    Guides for building games and game development communities on Discord.
  </ImageCard>
</CardGroup>