# attajak/noutube architecture

> Architecture diagram of the GitHub repository attajak/noutube, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/attajak/noutube
- Repository: https://github.com/attajak/noutube

## Overview

NouTube wraps YouTube and YouTube Music in a cross-platform app, augmenting playback with injected page code and native controls. The main mobile workflow accepts a URL or shared link, opens it in the app’s page experience, and runs the content script to modify the YouTube page. Library, feeds, settings, and sync are important supporting capabilities; desktop and browser-extension entry points are also present. Edges are limited to relationships shown in excerpts or the README; unsampled subsystem links are omitted or marked unverified.

Main entry points: [`content/main.ts`](https://github.com/attajak/noutube/blob/main/content/main.ts) (Content bootstrap), [`components/page/webview-container.native.tsx`](https://github.com/attajak/noutube/blob/main/components/page/webview-container.native.tsx) (YouTube webview), [`app/index.tsx`](https://github.com/attajak/noutube/blob/main/app/index.tsx) (App entry), [`components/page/MainPage.tsx`](https://github.com/attajak/noutube/blob/main/components/page/MainPage.tsx) (Main page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App experience"]
  node_app_entry["App entry<br/>[index.tsx]"]
  node_main_page["Main page<br/>[MainPage.tsx]"]
  node_webview["YouTube webview"]
  node_desktop_renderer["Desktop renderer<br/>[App.tsx]"]
  node_extension_ui["Extension UI<br/>[App.tsx]"]
end

subgraph group_content["YouTube enhancements"]
  node_content_main["Content bootstrap<br/>[main.ts]"]
  node_intercept["Request interception<br/>[intercept.ts]"]
  node_page_player["Page player hooks<br/>[player.ts]"]
  node_page_controls["Playback controls"]
  node_page_filters["Content filters<br/>[blocklist.ts]"]
  node_page_styles["CSS customization<br/>[css.ts]"]
end

subgraph group_playback["Playback runtime"]
  node_native_view["Native view module<br/>[NouTubeView.tsx]"]
  node_native_service["Media service<br/>[NouService.kt]"]
  node_download["Video downloads<br/>[main.ts]"]
end

subgraph group_data["Library and sync"]
  node_app_state["Settings state<br/>[settings.ts]"]
  node_bookmark_state["Bookmark state<br/>[bookmarks.ts]"]
  node_feed_management["Channel feeds<br/>[feed-management.ts]"]
  node_sync["Account sync<br/>[account.ts]"]
end

node_user(("User"))
node_youtube["YouTube sites"]
node_supabase[("Supabase")]

node_user -->|"opens app"| node_app_entry
node_app_entry -->|"renders"| node_main_page
node_main_page -.->|"hosts page"| node_webview
node_webview -->|"wraps sites"| node_youtube
node_webview -->|"injects code"| node_content_main
node_content_main -->|"installs"| node_intercept
node_content_main -->|"binds player"| node_page_player
node_content_main -->|"installs"| node_page_controls
node_content_main -->|"installs"| node_page_filters
node_content_main -->|"injects styles"| node_page_styles
node_native_service -->|"controls playback"| node_page_player
node_user -->|"uses desktop"| node_desktop_renderer
node_user -->|"uses extension"| node_extension_ui
node_extension_ui -.->|"edits settings"| node_app_state
node_user -.->|"manages library"| node_bookmark_state
node_user -.->|"reads feeds"| node_feed_management
node_user -.->|"downloads video"| node_download
node_app_state -.->|"syncs settings"| node_sync
node_sync -.->|"syncs remotely"| node_supabase

click node_app_entry "https://github.com/attajak/noutube/blob/main/app/index.tsx"
click node_main_page "https://github.com/attajak/noutube/blob/main/components/page/MainPage.tsx"
click node_webview "https://github.com/attajak/noutube/blob/main/components/page/webview-container.native.tsx"
click node_desktop_renderer "https://github.com/attajak/noutube/blob/main/desktop/src/renderer/App.tsx"
click node_extension_ui "https://github.com/attajak/noutube/blob/main/extension/entrypoints/options/App.tsx"
click node_content_main "https://github.com/attajak/noutube/blob/main/content/main.ts"
click node_intercept "https://github.com/attajak/noutube/blob/main/content/intercept.ts"
click node_page_player "https://github.com/attajak/noutube/blob/main/content/player.ts"
click node_page_controls "https://github.com/attajak/noutube/blob/main/content/fullscreen-controls.ts"
click node_page_filters "https://github.com/attajak/noutube/blob/main/content/blocklist.ts"
click node_page_styles "https://github.com/attajak/noutube/blob/main/content/css.ts"
click node_native_view "https://github.com/attajak/noutube/blob/main/modules/nou-tube-view/src/NouTubeView.tsx"
click node_native_service "https://github.com/attajak/noutube/blob/main/modules/nou-tube-view/android/src/main/java/expo/modules/noutubeview/NouService.kt"
click node_app_state "https://github.com/attajak/noutube/blob/main/states/settings.ts"
click node_bookmark_state "https://github.com/attajak/noutube/blob/main/states/bookmarks.ts"
click node_feed_management "https://github.com/attajak/noutube/blob/main/lib/feed-management.ts"
click node_sync "https://github.com/attajak/noutube/blob/main/lib/supabase/sync/account.ts"
click node_download "https://github.com/attajak/noutube/blob/main/desktop/src/main/ipc/main.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app_entry,node_main_page,node_webview,node_desktop_renderer,node_extension_ui,node_user toneBlue
class node_content_main,node_intercept,node_page_player,node_page_controls,node_page_filters,node_page_styles,node_supabase toneAmber
class node_native_view,node_native_service,node_download toneMint
class node_app_state,node_bookmark_state,node_feed_management,node_sync toneRose
class node_youtube toneIndigo
```

## Components

### App experience

- [App entry](https://github.com/attajak/noutube/blob/main/app/index.tsx): `app/index.tsx`
- [Main page](https://github.com/attajak/noutube/blob/main/components/page/MainPage.tsx): `components/page/MainPage.tsx`
- [YouTube webview](https://github.com/attajak/noutube/blob/main/components/page/webview-container.native.tsx): `components/page/webview-container.native.tsx`
- [Desktop renderer](https://github.com/attajak/noutube/blob/main/desktop/src/renderer/App.tsx): `desktop/src/renderer/App.tsx`
- [Extension UI](https://github.com/attajak/noutube/blob/main/extension/entrypoints/options/App.tsx): `extension/entrypoints/options/App.tsx`

### YouTube enhancements

- [Content bootstrap](https://github.com/attajak/noutube/blob/main/content/main.ts): `content/main.ts`
- [Request interception](https://github.com/attajak/noutube/blob/main/content/intercept.ts): `content/intercept.ts`
- [Page player hooks](https://github.com/attajak/noutube/blob/main/content/player.ts): `content/player.ts`
- [Playback controls](https://github.com/attajak/noutube/blob/main/content/fullscreen-controls.ts): `content/fullscreen-controls.ts`
- [Content filters](https://github.com/attajak/noutube/blob/main/content/blocklist.ts): `content/blocklist.ts`
- [CSS customization](https://github.com/attajak/noutube/blob/main/content/css.ts): `content/css.ts`

### Playback runtime

- [Native view module](https://github.com/attajak/noutube/blob/main/modules/nou-tube-view/src/NouTubeView.tsx): `modules/nou-tube-view/src/NouTubeView.tsx`
- [Media service](https://github.com/attajak/noutube/blob/main/modules/nou-tube-view/android/src/main/java/expo/modules/noutubeview/NouService.kt): `modules/nou-tube-view/android/src/main/java/expo/modules/noutubeview/NouService.kt`
- [Video downloads](https://github.com/attajak/noutube/blob/main/desktop/src/main/ipc/main.ts): `desktop/src/main/ipc/main.ts`

### Library and sync

- [Settings state](https://github.com/attajak/noutube/blob/main/states/settings.ts): `states/settings.ts`
- [Bookmark state](https://github.com/attajak/noutube/blob/main/states/bookmarks.ts): `states/bookmarks.ts`
- [Channel feeds](https://github.com/attajak/noutube/blob/main/lib/feed-management.ts): `lib/feed-management.ts`
- [Account sync](https://github.com/attajak/noutube/blob/main/lib/supabase/sync/account.ts): `lib/supabase/sync/account.ts`

### Other components

- **User**
- **YouTube sites**
- **Supabase**

## Connections

- User → App entry: opens app (evidence: `app/index.tsx`)
- App entry → Main page: renders (evidence: `app/index.tsx`)
- Main page → YouTube webview: hosts page
- YouTube webview → YouTube sites: wraps sites (evidence: `README.md`)
- YouTube webview → Content bootstrap: injects code (evidence: `README.md`)
- Content bootstrap → Request interception: installs (evidence: `content/main.ts`)
- Content bootstrap → Page player hooks: binds player (evidence: `content/main.ts`)
- Content bootstrap → Playback controls: installs (evidence: `content/main.ts`)
- Content bootstrap → Content filters: installs (evidence: `content/main.ts`)
- Content bootstrap → CSS customization: injects styles (evidence: `content/main.ts`)
- Media service → Page player hooks: controls playback (evidence: `modules/nou-tube-view/android/src/main/java/expo/modules/noutubeview/NouService.kt`)
- User → Desktop renderer: uses desktop (evidence: `README.md`)
- User → Extension UI: uses extension (evidence: `README.md`)
- Extension UI → Settings state: edits settings
- User → Bookmark state: manages library
- User → Channel feeds: reads feeds
- User → Video downloads: downloads video
- Settings state → Account sync: syncs settings
- Account sync → Supabase: syncs remotely