Frameworks
Frameworks
Framework Integrations
Choose your integration
Use the framework-neutral client for maximum flexibility, or pick an adapter that handles component lifecycle and reactive state.
[Overview](./)
PresenceKit works in JavaScript and TypeScript applications and provides optional integrations for popular UI frameworks. Every integration uses the same consent-aware PresenceKit service; choose the client or adapter that best fits your project.
NOTE
You do not need a Discord bot token in your application. The person whose activity you display must first approve sharing using
/confirmin the official Discord server.
Choose an integration
| Project | Documentation | Recommended approach |
|---|---|---|
| Vanilla JavaScript, TypeScript, Astro or Node.js | JavaScript & TypeScript | createPresenceClient() |
| React or Next.js | React & Next.js | usePresence() and React UI components |
| Vue or Nuxt | Vue & Nuxt | Vue composables |
| Svelte or SvelteKit | Svelte & SvelteKit | Svelte stores |
| Angular | Angular | Framework-independent client with lifecycle cleanup |
The common pattern
1. Install @iconical/presence from npm using your preferred package manager.
2. Use the correct import for your framework.
3. Supply the numeric Discord ID of someone who has opted in.
4. Display pending as waiting for a fresh update, not offline.
5. Stop live subscriptions when the component or page is removed.
import { createPresenceClient } from "@iconical/presence";
const client = createPresenceClient();
const result = await client.getPresence("123456789012345678");
console.log(result.availability === "pending" ? "Waiting for an update" : result.presence?.status);Which guide should you read first?
If you are new to the SDK, begin with Getting Started and Installation. For method signatures, see the API Reference; for styling and prebuilt UI, explore Features & Components.
In this section
Was this page helpful?