> For the complete documentation index, see [llms.txt](https://seanime.gitbook.io/seanime-extensions/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://seanime.gitbook.io/seanime-extensions/plugins/ui/user-interface/screen.md).

# Screen

Observe and control navigation within the app.

{% hint style="warning" %}
**Pitfall**

Users having multiple tabs open can lead to **unexpected behavior**.

This happens because navigation events are received from all connected clients.
{% endhint %}

## Listen to navigation

```typescript
// Listen to navigation
ctx.screen.onNavigate(e => {
    // User navigated to the 'One Piece' anime page
    console.log(e.pathname) // /entry
    console.log(e.searchParams) // { "id": "21" }
})

// Or as a state
const screen = ctx.screen.getState()
const isAnimeEntry = ctx.computed(() => screen.get().current === "entry", [screen])
isAnimeEntry.get()
```

## Navigate

```typescript
// Navigate to the 'Sakamoto Days' anime page
ctx.screen.navigateTo("/entry", { "id": "177709" })
```

## Reload the screen

```typescript
// Hard reload the webapp/desktop client screen.
ctx.screen.reload()
```

## Get the current screen

Calling this will trigger `onNavigate`

This is useful if you want to know the current screen without having to wait for the user to navigate.

```typescript
ctx.screen.loadCurrent()
```