Skip to main content
Open Tarteel provides access to multiple Quran reciters, each offering unique recitation styles and different Riwayat (transmission methods).

​
Browsing Reciters

The reciter selector presents an organized list of available reciters with comprehensive information.

​
Reciter Cards

Each reciter is displayed in a card showing:

Reciter Name

The full name of the reciter in Arabic or English

Riwaya

The transmission method (e.g., Hafs, Warsh, Qaloon)

Favorite Count

Real-time count of users who favorited this reciter

View Count

Total number of times this reciter has been played
Reciter statistics update in real-time using GunDB distributed database (reciter-card.tsx:86-93).

​
Search & Filter

​
Search by Name

Quickly find reciters by typing their name in the search field. The search works in both Arabic and English.

​
Filter by Riwaya

Narrow down reciters by their transmission method:
  • Hafs - Most common transmission
  • Warsh - Popular in North Africa
  • Qaloon - One of the earliest transmissions
  • Shu’bah - Alternative transmission from Asim
  • And many others…
Click any Riwaya badge on a reciter card to filter the entire list by that transmission method.

​
Sort Options

Organize the reciter list by:
Sort reciters A-Z by name (default)
// Sorting handled by filter-sort hook
sort === 'alphabetical' && sorted.sort((a, b) => 
  a.name.localeCompare(b.name)
)

​
Selecting a Reciter

To start listening:
  1. Browse or search for your preferred reciter
  2. Click on their card to select them
  3. The player automatically loads their complete Mushaf (collection of Surahs)
  4. Begin playback with the first Surah or choose from the playlist
Your selected reciter is saved automatically, so you’ll resume where you left off on your next visit (selectedReciterAtom).

​
Reciter Information

​
Viewing Reciter Details

Each reciter’s page displays:
  • Name - Full reciter name
  • Moshaf Name - The specific compilation or edition
  • Complete Playlist - All available Surahs for that reciter
  • Riwaya - Transmission method used

​
Sharing Reciters

Share your favorite reciters with others:
  1. Click the share icon on any reciter card
  2. Choose your preferred sharing method
  3. Share via social media, messaging apps, or copy the link
// Share functionality from reciter-card.tsx:38-41
const handleShare = async (event: React.MouseEvent) => {
  event.stopPropagation();
  shareReciter(reciter);
};

​
Loading Reciters

Reciter data is fetched from the API based on your language preference:
Displays reciter names in Arabic script with Arabic metadata
The app automatically switches reciter information when you change the interface language (use-reciters.ts:19-52).

​
Favorites Integration

Quickly access your favorite reciters:
  • Click the star icon to favorite/unfavorite a reciter
  • Toggle “Show only favorites” to filter the list
  • Favorites sync across devices using GunDB
  • Favorite counts are publicly shared and updated in real-time
Favorites are synced via GunDB peer network. If you clear browser data, you’ll need to re-favorite your preferred reciters.

​
Reciter Selector Component

The main selector shows:
  • Currently selected reciter name
  • Quick access to favorite toggle
  • Share button
  • Search button to open the full selector dialog
// From reciter-selector.tsx:44-49
const displayedReciterName =
  selectedReciter?.name ??
  formatMessage({
    id: 'reciter.select',
    defaultMessage: 'Select A Reciter',
  });

​
Visual States

  • Default - Gray border, white background
  • Favorited - Amber tinted border and background
  • Focused - Blue border with ring effect for keyboard navigation
  • Hover - Elevated shadow and border color change

​
Keyboard Navigation

Navigate through reciters using your keyboard:
  • Arrow Keys - Move between reciter cards
  • Enter/Space - Select the focused reciter
  • Tab - Navigate through interactive elements
  • Escape - Close the reciter selector dialog

​
Mobile Experience

On mobile devices:
  • Full-screen reciter selector
  • Touch-optimized card sizes
  • Smooth scrolling
  • Pull-to-refresh for updating reciter list
  • Bottom sheet style on smaller screens
The reciter selector automatically adapts its layout based on your screen size for optimal browsing.

​
Data Persistence

Reciter preferences are stored locally:
  • Selected reciter saved to localStorage
  • Favorite list synced via GunDB
  • Sort and filter preferences remembered
  • Last played Surah position saved
All data persists across browser sessions.

​
API Integration

Reciters are fetched from the Open Tarteel API: 
// From use-reciters.ts:22-28
const fetchReciters = async () => {
  try {
    setLoading(true);
    const data = await getAllReciters(locale);
    setReciters(data);
  } catch {
    setError('Failed to load reciters');
  }
};
The API returns localized reciter data based on your selected language (ar/en).

Build docs developers (and LLMs) love

Get started for freeTalk to us