Creating Your First Presence

Create a new Nowly presence with the CLI and send your first Discord Rich Presence activity.

Start With the CLI

Use the Nowly CLI to scaffold a new presence:

nowly init "Example"

The CLI creates metadata, a presence script, and required assets.

Basic Presence Code

Presence and Assets are provided by the runtime — see Presence API and Assets. document is the standard browser DOM API, available because presences run as content scripts in the extension.

Only PresenceType (and other helpers like createMediaTimestamps) must be imported from @nowly/sdk.

import { PresenceType } from "@nowly/sdk"

const presence = new Presence()

presence.on("UpdateData", async () => {
  await presence.setActivity({
    details: document.title,
    state: document.location.hostname,
    largeImageKey: Assets.Logo,
    type: PresenceType.Watching,
  })
})

Runtime Flow

When the user visits a matching URL, Nowly loads your presence. The presence reads page state and calls setActivity. The extension forwards that payload to Nowly Host, which updates Discord.

Development Loop

1

Scaffold

Generate the presence folder, metadata, and required assets.

nowly init "Example"
2

Configure

Set the name, author, supported URLs, category, color, and localized descriptions.

Edit metadata.json — see Metadata for all available fields.

3

Implement

Write the presence logic using the Presence SDK.

import { PresenceType } from "@nowly/sdk"

const presence = new Presence()

presence.on("UpdateData", async () => {
  await presence.setActivity({
    details: document.title,
    largeImageKey: Assets.Logo,
    type: PresenceType.Watching,
  })
})
4

Validate

Check that your metadata structure is correct and assets are in place.

nowly validate
5

Build

Compile the presence into a standalone bundle.

nowly build example
6

Bundle

Get a dev extension build with your presence baked in.

nowly extension example

Downloads the latest dev extension build from the CDN and bundles example into it. See CLI for the full monorepo alternative and the --from flag.

7

Reload

The presence is auto-installed as soon as the extension reloads.

Load dist/extension-dev as an unpacked extension (or reload it) at chrome://extensions

8

Test

Open the target website — the presence activates automatically.

Visit the site

Repeat Implement → Build → Bundle → Reload after each code change.

Edit on GitHub