Quran Verse PNG Exporter is a web-based tool that allows users to generate high-quality, beautifully styled PNG images of Quranic verses directly from their browser. The application connects to the public AlQuran.cloud API to fetch authentic Quranic text in Uthmani script, providing users the flexibility to select specific surahs and verses, customize appearance settings, and export them as transparent or colored images.
The tool is designed with simplicity, accuracy, and respect for Quranic text presentation. It’s ideal for designers, educators, and content creators who wish to include Quranic verses in visual materials while maintaining high aesthetic and linguistic standards.
- No user data collection: The application performs all actions locally in the browser. No verse data, selections, or generated images are transmitted to external servers.
- Secure API usage: Quranic data is fetched via HTTPS from the verified AlQuran.cloud API, ensuring authenticity and data integrity.
- Local rendering and export: Image generation uses the client-side library html2canvas, which processes and exports the verse image entirely on the user’s device—eliminating any risk of data exposure.
- No cookies or analytics tracking: The app maintains complete user privacy and transparency.
These measures ensure a trustworthy, privacy-respecting experience, fully aligned with ethical and religious sensitivity toward Quranic content.
- ✅ Fetch any surah and verse range from the Quran using the AlQuran.cloud API.
- 🖋️ Customizable typography and colors — Adjust font size, text color, and background color to fit design needs.
- 🧩 Transparent background option — Ideal for overlaying on other visual materials.
- 🕌 Option to hide Bismillah — Provides flexibility when displaying certain verses.
- 💾 One-click PNG export — Download verses as high-resolution PNG images.
- 💻 Responsive and mobile-friendly design — Smooth experience across devices.
- ⚡ Completely offline after loading — Once loaded, the app can work even without continuous internet connection (for already-fetched surahs).
This application is fully client-side and requires no server setup.
- Visit the GitHub repository: Quran-Verse-PNG-Exporter
- Click on
index.html→Raw→ right-click → Save As. - Save the file locally as
index.html. - Open it in your browser by double-clicking.
git clone https://github.com/xsukax/Quran-Verse-PNG-Exporter.git
cd Quran-Verse-PNG-ExporterThen open index.html in your preferred web browser.
Supported browsers: Chrome, Edge, Firefox, Safari (latest versions)
-
Open the application in your browser.
-
From the dropdown menu, select the desired surah.
-
Specify the verse range (e.g., from verse 1 to verse 5).
-
Click 📖 “عرض الآيات” (Display Verses) to fetch and preview.
-
Customize the following:
- Font size (in pixels)
- Text color and background color
- Toggle background transparency
- Optionally hide Bismillah
-
Click 💾 “تصدير كصورة PNG” (Export as PNG) to download the rendered verse image.
graph TD
A[User Opens index.html] --> B[Fetch Surah List via AlQuran.cloud API]
B --> C[User Selects Surah and Ayah Range]
C --> D[Load Verses from API]
D --> E[Render Verses in Uthmani Script]
E --> F[Apply User Customization]
F --> G[Export View to PNG via html2canvas]
G --> H[Download PNG to User Device]
graph LR
subgraph Client-Side Application
HTML --> JS[JavaScript Logic]
JS -->|Fetch JSON| API[(AlQuran.cloud API)]
JS --> Render[DOM Rendering]
Render --> Canvas[html2canvas]
Canvas --> PNG[Generated PNG File]
end
This project is licensed under the GNU General Public License v3.0.
Contributions and suggestions are welcome! If you find issues or have enhancement ideas, feel free to open an issue or submit a pull request on the GitHub repository.
Author: @xsukax Project URL: https://github.com/xsukax/Quran-Verse-PNG-Exporter