Tesdash

A self-hosted static dashboard designed for the Tesla browser — launch all your apps in fullscreen with a single tap.

How it works

Tesla's browser can open any URL fullscreen using a YouTube redirect trick. Tesdash wraps every app link with:

https://www.youtube.com/redirect?q=<your-url>

This is applied automatically at build time — you just add URLs to the config file.

Stack

Features

• Fullscreen launcher — every app opens fullscreen via the Tesla YouTube redirect
• Per-app fullscreen toggle — set fullscreen: false on any app to open it in a normal tab instead
• Glassmorphism UI — dark theme with backdrop blur and per-app accent color extracted from the logo
• Spotlight effect — radial gradient follows cursor/finger across each card (disabled on touch for performance)
• Category drag & drop — reorder categories by dragging the handle; order persists in localStorage
• Add custom apps — tap the + button to add any app at runtime without touching the config
• URL launcher — type any URL and open it fullscreen instantly
• Language & Region modal — 13 interface languages; country filter hides apps unavailable in your region
• Regional app support — apps can be limited to specific countries via regions: in the config
• EV charging calculator — calculates charge time, cost and energy for all Tesla models with a dual-range battery slider
• Live clock — updates every second
• Touch optimized — all interactions work on the Tesla touchscreen
• PWA ready — web manifest and icons configured for home screen installation
• Zero JS for static content — cards and layout are pure HTML, JS only loads for interactive islands

Getting started

# Install dependencies
bun install

# Start dev server
bun dev

# Build static output → /dist
bun run build

# Preview build
bun run preview

Self-hosting with Docker

A Docker image is available at ghcr.io/crstian19/tesdash. It builds the static output with Bun and serves it with nginx.

docker run -p 8080:80 ghcr.io/crstian19/tesdash:latest

Or with Docker Compose:

services:
  tesdash:
    image: ghcr.io/crstian19/tesdash:latest
    ports:
      - "8080:80"
    restart: unless-stopped

Images are published automatically on every version tag for amd64 and arm64.

Configuration

Edit src/data/config.yml to add, remove or reorganize apps. No code changes needed.

categories:
  - name: Streaming
    apps:
      - name: Netflix
        url: https://www.netflix.com
        logo: /logos/netflix.png   # local path or remote URL
        color: "#E50914"           # optional — auto-extracted from logo if omitted
        regions: ['ES', 'GB']      # optional — hide app outside these countries
        fullscreen: false          # optional — open without YouTube redirect (default: true)

Logo sources

• Local: place PNG/SVG/WebP files in public/logos/ and reference them as /logos/filename.png
• Remote: use any direct image URL (fetched at build time)
• Auto color: if color is omitted, the dominant color is extracted from the logo automatically

Project structure

tesdash/
├── public/
│   └── logos/          ← App logos (PNG, SVG, WebP)
├── src/
│   ├── components/
│   │   ├── Clock.svelte
│   │   └── UrlLauncher.svelte
│   ├── data/
│   │   └── config.yml  ← Edit this to configure your apps
│   └── pages/
│       └── index.astro
├── .github/
│   └── workflows/
│       └── docker.yml  ← Builds and pushes Docker image on version tags
├── Dockerfile
├── astro.config.mjs
└── package.json