Frameworks

Javascript

JavaScript, TypeScript, Astro and Node

[Overview](../) · Framework Integrations

Use the framework-independent client in any application with fetch. This guide shows how to request a one-time snapshot and how to update a browser page without React, Vue or Svelte.

Install

terminal.shbash

bun add @iconical/presence

See Installation for npm, pnpm, Yarn and pre-release alternatives.

Fetch a snapshot

example.tstypescript

import { createPresenceClient } from "@iconical/presence";

const client = createPresenceClient();
const userId = "123456789012345678"; // Opted-in Discord user.

try {
  const result = await client.getPresence(userId);
  console.log(result.profile.displayName);
  console.log(result.presence?.status ?? "Waiting for update");
} catch (error) {
  console.error("Presence unavailable", error);
}

presence: null indicates a missing current snapshot, not necessarily an offline account. A 404 deliberately does not reveal why a user could not be queried.

ℹ️

Browser lifecycle

Close the subscription when the page or widget is removed to avoid unnecessary network activity.

Render live updates in a browser

Add an element to a page:

index.htmlhtml

<p id="discord-status" role="status">Connecting…</p>

Then subscribe in your browser-side script:

example.tstypescript

import { createPresenceClient } from "@iconical/presence";

const element = document.querySelector<HTMLElement>("#discord-status");
const client = createPresenceClient();

const stop = client.subscribePresence("123456789012345678", {
  onUpdate(result) {
    if (!element) return;
    element.textContent = result.availability === "pending"
      ? "Waiting for a Discord update"
      : (result.presence?.status ?? "Unavailable");
  },
  onError(error) {
    if (element) element.textContent = "Presence unavailable";
    console.error(error);
  },
});

window.addEventListener("pagehide", stop, { once: true });

For a .js file, remove the TypeScript-specific annotation from querySelector. Use the cleanup function whenever the widget is removed without a full page navigation.

Astro

An Astro .astro page can render a placeholder, then subscribe in a browser