Show Live Discord Presence, VS Code, Spotify & Game Activity with Lanyard

You've probably seen personal websites with something like "Currently listening to Spotify" or "Coding in VS Code — editing app.tsx," updating live. That's not magic — it's a free, open-source tool called Lanyard that exposes your Discord presence as a REST API and WebSocket.

In this post we'll go through everything step by step — what Lanyard is, how it works, what to enable in Discord, and how to use it in a React/Next.js website or your GitHub profile README.

---

What is Lanyard?

Lanyard is a hosted service that exposes your Discord account's presence (status, activities, Spotify, VS Code, games — anything Discord shows) to the outside world in two ways:

• REST API: GET https://api.lanyard.rest/v1/users/:your_discord_id
• WebSocket: wss://api.lanyard.rest/socket — gives you realtime updates, no polling needed

You don't need to self-host anything — you just need to join a specific Discord server, since the Lanyard bot only monitors presence for members of its own server.

---

Step 1: Join the Lanyard Discord Server

This is the most important step. The Lanyard bot can only monitor presence for members of its own server (for privacy reasons).

👉 Join: discord.gg/lanyard

As soon as you join, your presence data becomes available at:

https://api.lanyard.rest/v1/users/YOUR_DISCORD_USER_ID

How to find your Discord User ID

1. Open Discord → Settings → Advanced
2. Turn on Developer Mode
3. Right-click your profile → Copy User ID

---

Step 2: Which Discord Settings to Enable

To make sure your presence data shows up correctly, a few settings need to be on in your Discord client:

• Settings → Activity Privacy:
  • Display current activity as a status message → ON (for games/apps to show)
  • Share your detected activities with Discord integrations → ON
• For Spotify, go to Settings → Connections, connect Spotify, and make sure "Display Spotify as your status" is ON
• VS Code activity doesn't show automatically — you need an extension for that (below)

---

Step 3: What the API Response Looks Like

Calling GET https://api.lanyard.rest/v1/users/YOUR_ID gives you JSON with fields like:

• discord_status → online/idle/dnd/offline
• listening_to_spotify → true/false
• spotify → song, artist, album, album art
• activities → array — this is where VS Code, games, and any custom activities show up
• discord_user → username, avatar, etc.
• kv → Lanyard's own key-value store (for custom data)

This is the data you'll fetch and render in your website's UI.

---

Step 4: Showing Live VS Code Activity

VS Code activity doesn't appear on Discord automatically — install the "Discord Presence" extension from the VS Code marketplace (the official Discord Rich Presence extension for VS Code). Once installed, it automatically starts showing your current file, workspace, and language in your Discord status — and since you're in the Lanyard server, it'll show up in the Lanyard API too, automatically.

---

Step 5: Adding It to a Next.js / React Website

The easiest way is the use-lanyard React hook — it subscribes over WebSocket, so presence updates in realtime without repeated fetching.

npm install use-lanyard

"use client";

import { useLanyard } from "use-lanyard";

const DISCORD_ID = "YOUR_DISCORD_USER_ID";

export default function DiscordPresence() {
  const presence = useLanyard(DISCORD_ID);

  if (!presence) return <p>Loading presence...</p>;

  const statusColor: Record<string, string> = {
    online: "bg-green-500",
    idle: "bg-yellow-500",
    dnd: "bg-red-500",
    offline: "bg-gray-500",
  };

  return (
    <div className="rounded-xl border p-4 space-y-2">
      <div className="flex items-center gap-2">
        <span
          className={`w-3 h-3 rounded-full ${statusColor[presence.discord_status]}`}
        />
        <span className="font-medium">{presence.discord_user.username}</span>
      </div>

      {presence.listening_to_spotify && presence.spotify && (
        <div className="flex items-center gap-3">
          <img
            src={presence.spotify.album_art_url}
            alt={presence.spotify.album}
            className="w-12 h-12 rounded"
          />
          <div>
            <p className="text-sm font-medium">{presence.spotify.song}</p>
            <p className="text-xs text-gray-500">{presence.spotify.artist}</p>
          </div>
        </div>
      )}

      {presence.activities
        .filter((a) => a.type !== 4) // skip custom status
        .map((activity) => (
          <div key={activity.id} className="text-sm">
            <p className="font-medium">{activity.name}</p>
            {activity.details && (
              <p className="text-xs text-gray-500">{activity.details}</p>
            )}
            {activity.state && (
              <p className="text-xs text-gray-500">{activity.state}</p>
            )}
          </div>
        ))}
    </div>
  );
}

What activity.type means:

• 0 → Playing (games, VS Code)
• 1 → Streaming
• 2 → Listening (Spotify)
• 3 → Watching
• 4 → Custom status
• 5 → Competing

---

Step 6: Showing It on Your GitHub Profile README

You don't even need to write code — there's a ready-made project called lanyard-profile-readme (by cnrad). It generates an SVG for your README.md that shows your live Discord presence. Search "cnrad/lanyard-profile-readme" on GitHub for setup instructions — basically you drop in a markdown image tag with your ID as a query param.

[![Discord Presence](https://lanyard-profile-readme.vercel.app/api/YOUR_DISCORD_ID)](https://github.com/cnrad/lanyard-profile-readme)

---

Step 7: Showing Game Activity (Including Custom RPC)

Discord auto-detects installed games (check Settings → Activity Privacy → Registered Games to see if yours is listed). If not, you can add it manually from there.

For your own custom app/game Rich Presence:

1. Go to the Discord Developer Portal (discord.com/developers/applications)
2. Click New Application, give it a name
3. Copy the Application ID (Client ID) from General Information
4. Use that client ID with the Rich Presence SDK / discord-rpc library to set your custom presence

Once that's set, it shows up in your Discord status automatically and appears in the Lanyard API's activities array — no extra work needed.

---

Lanyard KV — Extra Feature for Custom Data

Lanyard also gives you a small key-value store you can use for extra config or info on your website (like current location or a custom message).

• Get an API key by DMing the Lanyard bot: .apikey
• Set a value: PUT https://api.lanyard.rest/v1/users/:user_id/kv/:key
• Delete a value: DELETE https://api.lanyard.rest/v1/users/:user_id/kv/:key

---

Quick Checklist (TL;DR)

• [ ] Join the Lanyard Discord server (discord.gg/lanyard)
• [ ] Enable Developer Mode and copy your User ID
• [ ] Turn on both toggles under Settings → Activity Privacy
• [ ] Connect Spotify + turn on "Display as status"
• [ ] Install the "Discord Presence" extension in VS Code
• [ ] Add use-lanyard to your website, or lanyard-profile-readme to your GitHub README
• [ ] Optionally create your own Application in the Developer Portal for custom app/game Rich Presence

---

Set this up once, and whatever you're doing — coding, listening to music, gaming — reflects live on your website or GitHub, no manual updates needed.