Skip to content

Web Interface

The web interface is a mobile-friendly music player and browser for OwnTone.

You can reach it at http://owntone.local:3689 or depending on the OwnTone installation at http://<server-address>:<port>.

This interface becomes useful when you need to control playback, trigger manual library rescans, pair with remotes, select speakers, grant access to Spotify, and for many other operations.


Below you have a selection of screenshots that shows different part of the interface.

Now playing Queue Music browse Music artists Music artist Music albums Music albums options Music album Spotify Audiobooks authors Audiobooks Podcasts Podcast Files Search Menu Outputs


The web interface is usually reachable at http://owntone.local:3689. But depending on the setup of OwnTone you might need to adjust the server name and port of the server accordingly http://<server-name>:<port>.

Building and Serving

The web interface is built with Vite and Bulma.

Its source code is located in the web-src folder and therefore all npm commands must be run under this folder.

To switch to this folder, run the command hereafter.

cd web-src

Dependencies Installation

First of all, the dependencies to libraries must be installed with the command below.

npm install

Once the libraries installed, you can either build, format, and lint the source code, or serve the web interface locally.

Source Code Building

The following command builds the web interface for production with minification and stores it under the folder ../htdocs.

npm run build

Source Code Formatting

The source code follows certain formatting conventions for maintainability and readability. To ensure that the source code follows these conventions, Prettier is used.

The command below applies formatting conventions to the source code based on a preset configuration. Note that a additional configuration is made in the file .prettierrc.json.

npm run format

Source Code Linting

In order to flag programming errors, bugs, stylistic errors and suspicious constructs in the source code, ESLint is used.

Note that ESLint has been configured following this guide.

The following command lints the source code and fixes all automatically fixable errors.

npm run lint


In order to serve locally the web interface, the following command can be run.

npm run serve

After running npm run serve the web interface is reachable at localhost:3000.

By default the above command expects the OwnTone server to be running at localhost:3689 and proxies API calls to this location.

If the server is running at a different location you have to set the environment variable VITE_OWNTONE_URL, like in the example below.

export VITE_OWNTONE_URL=http://owntone.local:3689
npm run serve