A headless, framework-agnostic Discord activity tracker using Lanyard API
Real-time Discord presence tracking powered by Lanyard API
Loading Discord activity...
Works seamlessly with your favorite frameworks
Simple hooks for React 16.8+
Composables for Vue 3
Native stores for Svelte
Pure JavaScript, no framework needed
Track what matters to you
Native Discord integration support for:
Track 2000+ services with rich presence!
Automatically tracked by Discord:
PreMID is a powerful browser extension and desktop app that displays rich presence for thousands of websites and services on Discord. When combined with this package, you get:
Setup is easy: Install extension + desktop app → Browse supported services → Your activity appears automatically! All data flows through Lanyard and works with this package out of the box.
Get started in minutes with your favorite framework
# Using npm
npm install discord-lanyard-activity
# Using yarn
yarn add discord-lanyard-activity
# Using pnpm
pnpm add discord-lanyard-activity
# Using bun
bun add discord-lanyard-activityGo to Discord Settings → Advanced → Enable Developer Mode
Right-click your profile → Copy User ID
Join the Lanyard Discord server to enable tracking
Choose your framework and follow the example below
import { useDiscordActivity } from 'discord-lanyard-activity/react';
function App() {
const { data, isLoading, error } = useDiscordActivity({
userId: 'YOUR_DISCORD_USER_ID',
});
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<h2>{data.discord_user.username}</h2>
<p>Status: {data.discord_status}</p>
</div>
);
}<script setup>
import { useDiscordActivity } from 'discord-lanyard-activity/vue';
const { data, isLoading, error } = useDiscordActivity({
userId: 'YOUR_DISCORD_USER_ID',
});
</script>
<template>
<div v-if="isLoading">Loading...</div>
<div v-else-if="error">Error: {{ error.message }}</div>
<div v-else>
<h2>{{ data.discord_user.username }}</h2>
<p>Status: {{ data.discord_status }}</p>
</div>
</template><script>
import { useDiscordActivity } from 'discord-lanyard-activity/svelte';
const activity = useDiscordActivity({
userId: 'YOUR_DISCORD_USER_ID',
});
</script>
{#if $activity.isLoading}
<div>Loading...</div>
{:else if $activity.error}
<div>Error: {$activity.error.message}</div>
{:else if $activity.data}
<h2>{$activity.data.discord_user.username}</h2>
<p>Status: {$activity.data.discord_status}</p>
{/if}import { DiscordActivityClient } from 'discord-lanyard-activity';
const client = new DiscordActivityClient({
userId: 'YOUR_DISCORD_USER_ID',
});
client.subscribe((state) => {
if (state.data) {
console.log('Username:', state.data.discord_user.username);
console.log('Status:', state.data.discord_status);
}
});
client.connect();