MaterialTube is a beautiful and elegant web client for Invidious servers, built using Next.js and MUI.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Guus van Meerveld fcf9237da0
Removed static site building
1 year ago
.github Removed static site building 1 year ago
public Added icon, removed multi platform building 2 years ago
src Removed static site building 1 year ago
.dockerignore Added Docker building 2 years ago
.eslintrc.json Improved useability on smaller devices, added category menu to trending page 2 years ago
.gitignore Added Materialize 2 years ago
.prettierrc.json Started work on #9, many small changes 2 years ago
Dockerfile Removed static site building 1 year ago Implemented basic video player 1 year ago
app.json Added app.json for Heroku deployment 2 years ago
docker-compose.yml Removed static site building 1 year ago
netlify.toml Update Netlify build settings + make GA run less 2 years ago
next-env.d.ts Added Materialize 2 years ago
next.config.js Added more settings to /settings #5 2 years ago
package.json Removed static site building 1 year ago
tsconfig.json Added functionality to trending page 2 years ago
yarn.lock Implemented basic video player 1 year ago


Deploy Site CodeQL Docker pulls

Deploy to Heroku Deploy to Netlify

MaterialTube is a simple client-side only web-client for Invidious servers. It supports using an Invidious account, but also allows you to store all of your data locally. It's main goal is to provide an even greater level of privacy and improve on the current Invidious UI.

Made using

Typescript React


(Current) Features

  • Browse trending
  • Watch video's
  • Custom settings


There are a few environmental variables that are able to be set during build time to further customize the application.

  • GIT_URL: Set the url to the git repo. Default:
  • APP_NAME: Set the app name to show to the users. Default: MaterialTube
  • DEFAULT_SERVER: Set the invidious server to use by default. Default:


Using Node.js


  • Node.js v16.x
  • Yarn or NPM
  • Git
git clone MaterialTube

cd MaterialTube

# Choose Yarn or NPM
yarn install --frozen-lockfile

# npm install --frozen-lockfile


Now you have to choose between export to static HTML (recommended) or running a custom server (improves speed)

Exporting to static HTML:

yarn export

# npm export

The HTML files can be found in the out folder. You can now serve them using something like NGINX or Apache

You can also opt to use a custom server, which improves on speed because it will prefetch your request.

Building and starting a custom server:

yarn build

# npm build

yarn start

# npm start

Using Docker



  • Docker
  • docker-compose
  • Git
git clone MaterialTube

cd MaterialTube

docker build . -t materialtube

Now update the docker-compose.yml to your needs and start the container:

docker-compose up -d

Using Docker Hub


  • Docker
  • docker-compose

Simply update the following to your needs and put it in a file named docker-compose.yml.

version: "3"

    build: guusvanmeerveld/materialtube
    container_name: material-tube
      - 3000:80

Now run docker-compose up -d to start the container.

Using Heroku

Deploying to Heroku is a very simple and highly recommended way of deploying. All you have to do is click the button below, create an account (if you don't already have one) and deploy it.


Using Netlify

Deploying to Netlify is just as easy as deploying to Heroku. Click the button below connect your Git repo and follow the steps to deploy your application.

Deploy to Netlify