A material-themed UI for qBittorrent. This interface is more slimmed down, although still contains several features such as:
- See torrent contents before downloading
- File system navigation (choose where to save a torrents, create sub-folders, etc.)
- Bulk edit (pause, resume, delete, prioritize, and more)
- Sorting by different metrics (name, size, date completed, etc.)
- Manage local & qBittorrent preferences
- A fully material-themed UI (Light & Dark themes)
- ... and more!
A live demo is available here: https://qbit-material-webui-demo.herokuapp.com/
This app is tested with v4.4.5 and higher of qBittorrent, any lower version are not guaranteed to work.
Thanks to @marzzzello for adding support in LinuxServer.io's qBittorrent container: https://github.com/marzzzello/linuxserver-io-mod-qbit-matui
- Take a production-ready build from releases, or build it yourself
- Extract the files into any folder
- In qBittorrent, under Tools > Options > Web UI > Use alternative Web UI, set the file location as the folder you created in Step 2.
- Done!
This app relies on a couple files to work properly.
Under src/assets/
there are two files: config.json
and config.prod.json
. This will store general configuration, such as the delimeter used when parsing file paths (Unix vs. Windows).
If you wish to configure your endpoints and other data for dev/prod, do so in src/assets/http_config.json
.
In order to have the most accurate testing environment, we make use of a docker container running qBittorrent. Make sure you have both Docker and docker-compose installed.
Checkout the instructions in the dev/
folder on how to set it up.
- Run
npm run dev
for a dev server - Navigate to
http://localhost:8090/
- Username:
admin
; Password:adminadmin
; This can be changed through the default Web UI.
The app will re-compile everytime you save changes. To see the changes, you must hard-reload the web page (CTRL SHIFT R
on Windows)
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
To get a build for the login page, run ng build --project="login"
, and provide the --prod
flag for a production build.