51:"HubScrollBehavior" 52:I[142750,["$1","$2","$3","$4","$5","$6","$7","$8","$9","$a","$b","$c","$d","$e","$f","$15","$16","$17","$18","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d"],"$51"] 53:I[839823,["$1","$2","$3","$4","$5","$6","$7","$8","$9","$a","$b","$c","$d","$e","$f","$15","$16","$17","$18","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d"],"HubHeader"] :HL["https://portfolio-bucket.iconical.dev/projects/7c66a10e-917e-4b68-b540-6c41a5a0fb30-PresenceKit Big 1080-1792247037217.png","image"] 54:Ta10,

Overview

PresenceKit is a lightweight, framework-friendly TypeScript SDK that makes it easy to integrate real-time Discord presence into websites and applications.

Built with simplicity and developer experience in mind, PresenceKit provides access to Discord statuses, activities, games, and Spotify listening information without requiring developers to manage their own Discord bots or infrastructure.

Features

Real-Time Presence — Display Discord online status, activities, and games with live updates.
Spotify Integration — Show currently playing tracks, album artwork, and listening activity.
Multi-Framework Support — Works with JavaScript, React, Vue, Svelte, and modern web frameworks.
Ready-to-Use Components — Customizable presence cards, activity displays, and Spotify widgets.
Privacy-First — Users explicitly opt in before their presence information becomes available.
Lightweight SDK — Minimal setup, TypeScript support, and a straightforward developer API.

Getting Started

Install PresenceKit using your preferred package manager:

<Snippet>bun add @iconical/presence</Snippet>

Alternatively, use npm install @iconical/presence or pnpm add @iconical/presence.

Once installed, developers can integrate Discord presence into their applications using the SDK's client, framework integrations, or prebuilt UI components.

How It Works

PresenceKit connects to an official hosted API that securely provides presence information for opted-in Discord users.

Users authorize sharing through the Discord /confirm command, retaining control over their visibility and the ability to revoke access.

The SDK handles fetching, subscriptions, and live presence updates, allowing developers to focus on their applications.

Technologies

TypeScript · JavaScript · Bun · Discord API · REST · Server-Sent Events · React · Vue · Svelte

Result & Impact

Simplified Discord presence integration into a reusable, privacy-focused SDK, enabling developers to build richer, interactive web experiences with minimal configuration.

55:Ta10,

Overview

PresenceKit is a lightweight, framework-friendly TypeScript SDK that makes it easy to integrate real-time Discord presence into websites and applications.

Features

Real-Time Presence — Display Discord online status, activities, and games with live updates.
Spotify Integration — Show currently playing tracks, album artwork, and listening activity.
Multi-Framework Support — Works with JavaScript, React, Vue, Svelte, and modern web frameworks.
Ready-to-Use Components — Customizable presence cards, activity displays, and Spotify widgets.
Privacy-First — Users explicitly opt in before their presence information becomes available.
Lightweight SDK — Minimal setup, TypeScript support, and a straightforward developer API.

Getting Started

Install PresenceKit using your preferred package manager:

<Snippet>bun add @iconical/presence</Snippet>

Alternatively, use npm install @iconical/presence or pnpm add @iconical/presence.

Once installed, developers can integrate Discord presence into their applications using the SDK's client, framework integrations, or prebuilt UI components.

How It Works

PresenceKit connects to an official hosted API that securely provides presence information for opted-in Discord users.

Users authorize sharing through the Discord /confirm command, retaining control over their visibility and the ability to revoke access.

The SDK handles fetching, subscriptions, and live presence updates, allowing developers to focus on their applications.

Technologies

TypeScript · JavaScript · Bun · Discord API · REST · Server-Sent Events · React · Vue · Svelte

Result & Impact

Simplified Discord presence integration into a reusable, privacy-focused SDK, enabling developers to build richer, interactive web experiences with minimal configuration.

3f:["$","div",null,{"className":"hub-theme fixed inset-0 overflow-hidden bg-background sm:pt-3","style":{"--hub-light":"#572020","--hub-dark":"#bc3730","--hub-light-foreground":"#ffffff","--hub-dark-foreground":"#ffffff"},"children":[["$","$L52",null,{}],["$","div",null,{"id":"hub-scroll","className":"h-full overflow-y-auto overscroll-contain scroll-smooth [scrollbar-gutter:stable] motion-reduce:scroll-auto","children":["$","div",null,{"className":"flex min-h-full w-full flex-col gap-4 px-3 pb-4 sm:px-3","children":[["$","div",null,{"className":"relative h-28 w-full overflow-hidden rounded-2xl sm:h-40 md:h-52 lg:h-60","children":[["$","img",null,{"src":"https://portfolio-bucket.iconical.dev/projects/7c66a10e-917e-4b68-b540-6c41a5a0fb30-PresenceKit Big 1080-1792247037217.png","alt":"","className":"size-full w-full object-cover object-center"}],["$","div",null,{"className":"pointer-events-none absolute inset-0 bg-gradient-to-b from-background/15 via-background/45 to-background"}]]}],["$","$L53",null,{"project":{"id":"e8b04e21-5220-40cf-bf30-145f3c3b2de5","title":"PresenceKit","slug":"presencekit","summary":"A lightweight TypeScript SDK for displaying real-time Discord status, activities, and Spotify presence on websites, with support for modern web frameworks.","role":"Developer","client":"","outcome":"Simplified real-time Discord presence integration with a lightweight, privacy-focused SDK, offering live activity updates, Spotify support, and seamless integration across modern web frameworks.","language":"English","content":"$54","coverImage":"projects/7c66a10e-917e-4b68-b540-6c41a5a0fb30-PresenceKit Big 1080-1792247037217.png","stacks":["TypeScript","JavaScript","Discord","SDK","npm","React","Vue","Svelte","Spotify","Real-Time","Open Source","Web Development"],"technologies":["TypeScript","Bun"],"genre":"Libraries & Packages","status":"Live","lightColor":"#572020","darkColor":"#bc3730","relatedContent":{"mode":"manual","items":[]},"lifecycleNote":{"lessons":"","explanation":"","successorUrl":"","successorLabel":""},"journey":{"links":{"roadmapId":"","feedbackId":"","changelogId":""},"enabled":false,"milestones":[],"includeChangelog":false},"actionButtons":[],"projectUrl":null,"repoUrl":null,"hubConfig":{"enabled":true,"opening":"hub","classicPercent":50,"homepageLayout":"split","motionEffects":true,"requirementsDisplay":"inline","seoType":"auto","seoIsAccessibleForFree":null,"homeContent":"$55","tagline":"","supportProjectTitle":"Support this project","supportProjectDescription":"Help fund development, fixes and future updates.","supportProjectUrl":"","sections":[{"id":"hero","enabled":true,"layout":"wide"},{"id":"content","enabled":true,"layout":"wide"},{"id":"latest","enabled":true,"layout":"wide"},{"id":"activity","enabled":false,"layout":"cards"},{"id":"documentation","enabled":true,"layout":"cards"},{"id":"downloads","enabled":true,"layout":"cards"},{"id":"changelog","enabled":true,"layout":"cards"},{"id":"roadmap","enabled":true,"layout":"cards"},{"id":"feedback","enabled":false,"layout":"cards"},{"id":"pages","enabled":true,"layout":"cards"},{"id":"showcase","enabled":false,"layout":"cards"},{"id":"requirements","enabled":false,"layout":"cards"},{"id":"support","enabled":true,"layout":"cards"},{"id":"donations","enabled":false,"layout":"cards"}],"modules":{"documentation":true,"changelog":true,"roadmap":true,"feedback":true,"downloads":true,"support":true,"showcase":false,"requirements":false}},"visibility":"public","featured":false,"aiSummaryEnabled":false,"sortOrder":0,"startDate":null,"endDate":null,"monetization":{"enabled":true,"variant":"control","sponsorId":"","adsEnabled":true,"sponsorPlacement":"none","autoAffiliateLinks":true,"enableInArticleAds":true},"contentBlocks":[],"createdAt":"$D2026-10-17T14:28:58.822Z","updatedAt":"$D2026-10-17T14:35:01.303Z"},"modules":{"roadmap":null,"feedback":null,"changelog":null}}],"$L56","$L57"]}]}]]}]

In this section