> ## Documentation Index
> Fetch the complete documentation index at: https://rockboxzig.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Web UI

> Browser-based controller served by rockboxd on port 6062.

The web UI is a React app served from the GraphQL HTTP listener. Open
[http://localhost:6062](http://localhost:6062) once `rockboxd` is running.

<Frame>
  <img src="https://mintcdn.com/rockboxzig/v3v5r8o5HzmezrKX/images/web-preview.png?fit=max&auto=format&n=v3v5r8o5HzmezrKX&q=85&s=ca4c3bce09f485e8acfd0007dddbfa1b" alt="Rockbox web UI" width="2938" height="1588" data-path="images/web-preview.png" />
</Frame>

## Features

* Browse artists, albums and tracks from the tag database
* Browse the filesystem under `music_dir`
* Search powered by Typesense (instant results as you type)
* Manage the live playback queue and saved playlists
* Reorder, shuffle, repeat
* Like / unlike tracks and albums
* Pick the active output device (Chromecast, AirPlay, Snapcast TCP, …)
* Real-time "now playing" updates over a GraphQL subscription

## Building from source

The web UI ships pre-built with the `rockboxd` binary, but you can rebuild
it locally:

```sh theme={"theme":{"light":"catppuccin-latte","dark":"min-dark"}}
cd webui/rockbox
deno install
deno run build
```

The result lands in `webui/rockbox/build/` and is embedded into rockboxd at
link time.

## Customising the bind address

```toml theme={"theme":{"light":"catppuccin-latte","dark":"min-dark"}}
graphql_host = "0.0.0.0"   # default 0.0.0.0
graphql_port = 6062        # default 6062
```

Restart rockboxd, then reach the UI at `http://<host>:<port>`.

## Storybook

Component-level documentation is on Chromatic:
[storybook ↗](https://master--670ceec25af685dcdc87c0df.chromatic.com/?path=/story/components-albums--default).