Skip to main content
Open Tarteel Hero Light

​
Welcome to Open Tarteel

Open Tarteel is an open-source Quran audio streaming application designed to provide an optimal listening experience across all platforms. Built with modern web technologies, it delivers high-quality Quran recitations with an intuitive, responsive interface.
Open Tarteel is completely free and open-source, licensed under MIT. Contributions from the community are always welcome!

​
Key Features

Progressive Web App

Install on any device with offline capabilities and app-like experience. Works seamlessly on desktop, mobile, and tablets.

Advanced Audio Player

Full-featured player with playlist management, repeat modes, shuffle, variable playback speed, and visual audio feedback.

Multiple Reciters

Access a comprehensive collection of Quran reciters with different recitation styles and multiple Moshaf options.

Responsive Design

Beautiful interface built with Tailwind CSS that adapts perfectly to any screen size with smooth animations.

Search & Favorites

Quickly find your preferred reciters and save them as favorites for easy access. Fuzzy search powered by Fuse.js.

Media Session API

Control playback directly from system media controls, lock screens, and notification areas.

​
Technology Stack

Open Tarteel is built with cutting-edge web technologies:
  • Next.js 15 - React framework with server-side rendering and optimized performance
  • React 19 - Latest React with improved concurrent features
  • TypeScript - Type-safe development with enhanced IDE support
  • Jotai - Primitive and flexible state management for React
  • Tailwind CSS - Utility-first CSS framework for rapid UI development
  • PWA (Serwist) - Progressive Web App capabilities with offline support
  • WaveSurfer.js - Audio visualization and waveform rendering
The application uses Jotai atoms for global state management, providing a lightweight and performant alternative to other state management solutions.

​
What Makes Open Tarteel Different?

​
Modern Architecture

Built on Next.js 15 with the App Router, Open Tarteel leverages the latest React Server Components and streaming capabilities for optimal performance.
src/app/layout.tsx
'use client';
import { useAtom } from 'jotai';
import { Tajawal } from 'next/font/google';

const tajawal = Tajawal({
  weight: ['400', '700', '900'],
  subsets: ['arabic'],
  preload: true,
});

​
State Management with Jotai

Simple, atomic state management that scales: 
import { atom } from 'jotai';

export const selectedReciterAtom = atom(null);
export const playbackModeAtom = atom('normal');
export const volumeAtom = atom(1.0);
export const playbackSpeedAtom = atom(1.0);

​
Progressive Web App

Install Open Tarteel on any device for an app-like experience with offline support:
src/app/manifest.ts
export default function manifest() {
  return {
    name: 'Open Tarteel',
    short_name: 'Open Tarteel',
    description: 'Quran streaming application',
    display: 'standalone',
    theme_color: '#000000',
    background_color: '#000000',
    start_url: '/',
  };
}

​
Use Cases

Daily Listening

Listen to your favorite Quran recitations during daily routines, commutes, or relaxation time.

Study & Memorization

Use repeat modes and adjustable playback speed to aid in Quran memorization.

Offline Access

Install as PWA and access previously played surahs even without internet connection.

Multi-Reciter Exploration

Discover and compare different recitation styles from renowned Quran reciters worldwide.

​
Community & Support

Open Tarteel is an open-source project that welcomes contributions:

​
Getting Started

Ready to start using or developing Open Tarteel?

Installation

Install Open Tarteel locally for development or contribution

Quick Start

Get up and running with Open Tarteel in minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us