A beautiful, open-source web application for streaming and managing IPTV channels from M3U8 playlists.
Note: This project was created mostly through vibe coding with AI assistance. It demonstrates what's possible when combining human creativity with AI-powered development.
Welcome screen - Add your M3U8 playlist to get started
Channel list with video player
-
📺 M3U/M3U8 Playlist Support - Import and manage multiple IPTV playlists
-
🎬 Multi-Protocol Streaming - HLS, RTMP, RTSP, HTTP streams with hls.js
-
⭐ Channel Management - Organize, favorite, search, and hide channels
-
📱 Fully Responsive - Perfect experience on mobile, tablet, and desktop
-
🎨 Modern UI - Beautiful dark mode interface with smooth animations
-
💾 Local Storage - All data stored locally in IndexedDB
-
🕐 Continue Watching - Resume from your watch history
-
⌨️ Keyboard Shortcuts - Full keyboard navigation (press
?for help) -
📺 Channel Info Overlay - Auto-displaying channel info on switch
-
🔊 Volume Memory - Remembers your volume preferences
-
⏭️ Auto-Play Next - Binge-watching mode with countdown
-
🎯 Smart Loading - Skeleton animations for smooth transitions
-
🔔 Toast Notifications - Beautiful feedback for all actions
- 📡 Chromecast Support - Cast streams to your TV
- 📋 EPG Support - Electronic Program Guide with search
- ⏪ Catchup/Timeshift - Watch past programs (provider-dependent)
- 🎥 Recording - Record streams directly in browser
- 🖼️ Picture-in-Picture - Watch while multitasking
- 📁 Custom Folders - Organize channels into custom categories
- 🔄 Auto-Refresh - Keep playlists up to date automatically
- 🌍 Country Grouping - Channels organized by country
- 🔍 Smart Search - Quickly find channels by name or category
- 🎯 Grid/List Views - Choose your preferred channel display mode
- 🎬 VOD Detection - Automatic movie/series detection from playlists
- 🔢 Channel Numbers - Display channel numbers for easy navigation
- 🎨 Themes & Accent Colors - Customize appearance with multiple accent colors
- 🔒 Parental Controls - PIN-protected channel and group blocking
- 📊 Watch Statistics - Track your viewing habits and top channels
- 💾 Backup/Restore - Export and import all your settings
- 📺 Last Channel Resume - Auto-resume last watched channel on startup
- 😴 Sleep Timer - Auto-stop playback after set duration
- 🎚️ Buffer Settings - Customize buffer length for smooth playback
- 📝 Subtitle/Audio Preferences - Set preferred languages
- 📈 Stream Info Overlay - View codec, bitrate, and resolution
- Node.js 18+ or npm/yarn/pnpm
-
Clone the repository
git clone https://github.com/chikosan/openiptv.git cd openiptv -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
git clone https://github.com/chikosan/openiptv.git && cd openiptv && docker-compose up -dOr run directly without cloning:
docker run -d -p 3000:3000 --name openiptv ghcr.io/chikosan/openiptv:latestAccess the app at http://localhost:3000
- On first launch, you'll see the welcome screen
- Enter your M3U8 playlist URL (e.g.,
http://example.com/playlist.m3u8) - Click "Add Playlist" and wait for channels to load
- Start watching!
- Search: Use the search bar to find channels quickly
- Favorites: Click the star icon to add channels to favorites
- View Modes: Switch between grid and list views
- Filters: Filter by all channels or favorites only
- Play/Pause: Click the video or use spacebar
- Volume: Use volume slider or up/down arrow keys
- Fullscreen: Click fullscreen button or press 'F'
- Quality: Video.js automatically adapts quality based on your connection
- Framework: Next.js 14 (App Router)
- UI Library: React 18
- Language: TypeScript
- Styling: TailwindCSS + shadcn/ui
- State Management: Zustand
- Video Player: hls.js (streaming) + Video.js (UI controls)
- Data Fetching: TanStack Query (React Query)
- Icons: Lucide React
- Animations: Framer Motion
- Primary: IndexedDB (via native API)
- Fallback: localStorage
openiptv/
├── app/ # Next.js app directory
│ ├── api/ # API routes (proxy)
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── channels/ # Channel list components
│ ├── layout/ # Layout components
│ ├── player/ # Video player components
│ ├── settings/ # Settings modal
│ └── welcome-screen.tsx # Welcome screen
├── lib/ # Utilities and logic
│ ├── store/ # Zustand stores
│ ├── recording/ # Recording functionality
│ ├── epg/ # EPG management
│ ├── m3u8-parser.ts # M3U8 playlist parser
│ ├── storage.ts # IndexedDB wrapper
│ └── types.ts # TypeScript types
├── public/ # Static assets & PWA
└── package.json # Dependencies
Currently, no environment variables are required. All data is stored locally.
Edit app/globals.css to customize the color scheme:
:root {
--primary: 217.2 91.2% 59.8%; /* Blue */
--secondary: 262.1 83.3% 57.8%; /* Violet */
--accent: 38.4 96.1% 50%; /* Amber */
}OpenIPTV supports Progressive Web App features:
- Install on home screen
- App-like experience
- SVG icons for crisp display
- Offline channel list access
- Push notifications
- M3U8 playlist import
- Channel list with search
- Video player with HLS support
- Favorites management
- Responsive design
- Dark mode UI
- Grid/List view modes
- Country-based channel grouping
- PWA support with SVG icons
- Improved error handling
- Autoplay fallback handling
- HLS.js optimizations for slow streams
- Chromecast integration
- EPG (Electronic Program Guide)
- Multiple playlist management
- Custom folders/categories
- Channel drag & drop organization
- Auto-refresh playlists
- Picture-in-Picture support
- Quality selector
- Recording/DVR functionality (basic)
- Admin panel for channel management
- Scheduled recordings
- User accounts (optional)
- Playlist sharing/export
- Parental controls
- Multi-language support
- Some M3U8 streams may not work due to CORS restrictions
- Mobile browsers may have autoplay limitations
- Picture-in-Picture support varies by browser
All documentation is located in the docs/ folder:
- Quick Start Guide - Get up and running fast
- Deployment Guide - Deploy to any platform (Docker, Vercel, VPS, etc.)
- Troubleshooting - Common issues and solutions
- Contributing - How to contribute
- Changelog - Version history
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
This application is a player for IPTV playlists. Users are responsible for the legality of the content they access through their own playlist URLs. The developers of this application do not host, distribute, or provide any IPTV content.
- Video.js - HTML5 video player
- hls.js - HLS streaming
- Next.js - React framework
- shadcn/ui - UI components
- TailwindCSS - CSS framework
For questions or support, please open an issue on GitHub.
Made with ❤️ for IPTV enthusiasts
OpenIPTV is open-source software.