بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ
NOTE: Webkit Browsers (Chrome, Safari etc.) are currently unable to properly parse arabic characters with inline HTML. Please use Firefox for displaying Tajweed. For more information, see the GitHub repo.
Developer Tools and Documentation

The library and documentation on how to use it is available on https://github.com/meezaan/alquran-tools. This page essentially lists the output of the library. Please see the complete documentation the GitHub URL above.

Rendered Example - Ayah Noor (24:35) with Tajweed Parsed
۞ ٱللَّهُ نُورُ ٱلسَّمَـٰوَٲتِ وَٱلْأَرْضِ‌ۚ مَثَلُ نُورِهِۦ كَمِشْكَوٲةٍ فِيهَا مِصْبَاحٌ‌ۖ ٱلْمِصْبَاحُ فِى زُجَاجَةٍ‌ۖ ٱلزُّجَاجَةُ كَأَنَّهَا كَوْكَبٌ دُرِّىٌّ يُوقَدُ مِن شَجَرَةٍ مُّبَـٰرَكَةٍ زَيْتُونَةٍ لَّا شَرْقِيَّةٍ وَلَا غَرْبِيَّةٍ يَكَادُ زَيْتُهَا يُضِىٓءُ وَلَوْ لَمْ تَمْسَسْهُ نَارٌ‌ۚ نُّورٌ عَلَىٰ نُورٍ‌ۗ يَهْدِى ٱللَّهُ لِنُورِهِۦ مَن يَشَآءُ‌ۚ وَيَضْرِبُ ٱللَّهُ ٱلْأَمْثَـٰلَ لِلنَّاسِ‌ۗ وَٱللَّهُ بِكُلِّ شَىْءٍ عَلِيمٌ
What do the Colours mean?
Type Identifier Colour CSS Description
hamza-wasl [h #AAAAAA ham_wasl Hamzat ul Wasl
silent [s #AAAAAA slnt Silent
laam-shamsiyah [l #AAAAAA slnt Lam Shamsiyyah
madda-normal [n #537FFF madda_normal Normal Prolongation: 2 Vowels
madda-permissible [p #4050FF madda_permissible Permissible Prolongation: 2, 4, 6 Vowels
qalaqah [q #DD0008 qlq Qalaqah
madda-obligatory [o #2144C1 madda_pbligatory Obligatory Prolongation: 4-5 Vowels
ikhafa-shafawi [c #D500B7 ikhf_shfw Ikhafa' Shafawi - With Meem
ikhafa [f #9400A8 ikhf Ikhafa'
idgham-shafawi [w #58B800 idghm_shfw Idgham Shafawi - With Meem
iqlab [i #26BFFD iqlb Iqlab
idgham-without-ghunnah [a #169200 idgh_ghn Idgham - With Ghunnah
idgham-without-ghunnah [u #169200 idgh_w_ghn Idgham - Without Ghunnah
idgham-mutajanisayn [d #A1A1A1 idgh_mus Idgham - Mutajanisayn
idgham-mutaqaribayn [b #A1A1A1 idgh_mus Idgham - Mutaqaribayn
ghunnah [g #FF7E1E ghn Ghunnah: 2 Vowels

Essentially, all that's happening here is that [h:9421[ٱ] which is returned by the API for the above Vese becomes:

<tajweed class="ham_wasl" data-type="hamza-wasl" data-description="Hamzat ul Wasl" data-tajweed=":9421">ٱ</tajweed>