Render on iOS, Android, Flutter and React Native

The text runs everywhere; the printed page does not. On the web a muṣḥaf page is an SVG. On a phone it is Quran Engine, because SVG does not perform there. This page is the per-platform matrix.

Blocks used

Quran Text Quran Engine Quran SVG Quran SVG Elements

Platforms

Web · iOS · Android · Flutter · React Native

Time

About 8 minutes

Where the engine replaces SVG

Three blocks render printed muṣḥaf pages, and they are not alternatives of equal scope: coverage narrows as addressing deepens. Quran SVG covers every vectorised muṣḥaf and addresses an ayah; Quran SVG Elements covers only the muṣḥafs that have been split and addresses a word or a mark; Quran Engine covers those same split muṣḥafs and addresses the same things, fast, on a phone.

A fully split page is hundreds of kilobytes of vector paths, and an app cannot hold 604 of them in a DOM and stay responsive. That is why the engine exists, and the platform rule is short:

You are on	Whole page, tap an ayah	Tap a word, colour a mark
Web	Quran SVG, inline	Quran SVG Elements, inline — or the engine over wasm when the DOM is too slow
iOS, Android, Flutter, React Native	Quran Engine, with the page data from its release

Quran Text: six libraries, one API

The text has a native library per language, each bundling Ḥafṣ and its font, each passing the same test suite against the same data. Package names are taken from each library’s own manifest at quran-ws/quran-text@fea25cd, each spelled the way its ecosystem spells a package name (Naming, rule 5.2).

Platform	Package	Runs on	Ḥafṣ in one line
JavaScript / TypeScript	`quran-text` (npm)	Node ≥ 18, browsers, React Native — ESM, no dependencies	`await Mushaf.hafs()`
Python	`quran-text` (PyPI)	Python ≥ 3.9, no dependencies	`Mushaf.hafs()`
PHP	`quran-ws/quran-text` (Composer)	PHP ≥ 8.1, `ext-json`, `ext-mbstring`	`Mushaf::hafs()`
Dart / Flutter	`quran_text` (pub)	Dart ≥ 3.0; the font is declared as a Flutter asset	`await Mushaf.hafs(read: rootBundle.loadString)`
Swift	`QuranText` (Swift Package)	iOS 13, macOS 10.15, watchOS 6, tvOS 13	`try Mushaf.hafs()`
Kotlin	`ws.quran:quran-text` (Maven)	JVM 17, Android — `org.json` only	`Mushaf.hafs()`

Names follow each language’s convention (ayah_marks in Python, ayahMarks elsewhere); nothing else changes.

None of the six is on a registry at the pinned commit

The manifests above are complete (pyproject.toml, composer.json, pubspec.yaml, Package.swift, build.gradle.kts with Maven Central publishing configured), but nothing has been published and the repository is private. Publishing is on the launch list. Until then each library installs from its directory under lib/.

Quran Engine: one core, four wrappers

The engine is a Rust core behind one C ABI (crates/qvp-ffi/include/qvp.h), and each platform gets a thin wrapper that marshals and paints. Names are the same across all of them, so docs/API.md and the engine reference apply one to one. State as of quran-ws/quran-engine@a19ee9b, 11 September 2026:

Platform	In the tree	Engine binary	State
Web	`web/qvp.js` — the reference wrapper, Canvas2D	`qvp_ffi.wasm`, built from source	Runs on this site, on a wasm we built ourselves. Not a published package.
Android	`packages/android/qvp` — Kotlin over JNI, namespace `net.quranpedia.qvp`, plus a demo app	`libqvp_ffi` via `scripts/build-engine-android.sh`	minSdk 24; arm64-v8a, armeabi-v7a, x86_64. Not on Maven.
iOS	`packages/ios/QvpKit` — Swift package over the C ABI, CoreGraphics `QvpPageView`, a SwiftUI demo, 13 XCTest cases	`QvpEngine.xcframework` via `scripts/build-engine-ios.sh` — gitignored, built per checkout	Source landed on 11 September 2026. Not built or run by us, and no binary ships.
Flutter	`packages/flutter/qvp_flutter` — `dart:ffi` plugin, `CustomPainter`	the Android `.so` from the same script	`pubspec.yaml` declares Android only (`plugin.platforms.android`) and `publish_to: none`.
React Native	`packages/react-native/qvp-react-native` — `@quran.ws/qvp-react-native` 0.1.0, a native `<QvpPageView />` over the Kotlin library	the Android library, as a Gradle project	RN ≥ 0.76. Its own `package.json` says “Android; iOS TODO”. Not on npm.

In practice iOS today means the Swift package directly, not Flutter or React Native on iOS. On every platform the engine is built from source; the v0.1.0 release carries the 604 pages of data and no engine binary.

The page data is separate from every wrapper, on every platform

No package bundles a page. NNN.qvp, the NNN.words.json sidecars and atlas.qva come from the data release (44 MB) and are assets your app loads — from the app bundle, the files directory or a download. The wrappers accept a path or bytes; see Work offline for what to ship and what to fetch.

The other blocks

Block	What ships	Runs on
Quran SVG	SVG pages with an ayah hit-layer, plus JSON	Anything that renders SVG. Interactive in a browser DOM; on native, as a static image only — the hit-layer needs the DOM
Quran SVG Elements	Split SVG pages and JSON indexes	The web. On mobile, this is what the engine converts and draws for you
Quran Tajweed	JSON: spans as positions, and the rule corpus	Anywhere; apply to text you already render, in any language
Qiraat Ayah Map	JSON mapping files	Anywhere
Quran Assets	Recolourable SVG ornaments	Anything that renders SVG — 40 font markers are OFL-confirmed, the scan-traced set is provisional; see the guide
Quran PNG	An HTTP service	Anything that can GET a URL; no offline form

Start on your platform

Web
Text: npm install quran-text and the quickstart. Pages: inline Quran SVG per the reference, or Elements for word-level work. The engine over wasm when the DOM stops keeping up; the engine reference walks the four calls.
Android
Text: the Kotlin library, Mushaf.hafs(). Pages: packages/android/qvp and its demo MainActivity.kt, which is the reference reader every other native demo was ported from. Build libqvp_ffi once with scripts/build-engine-android.sh.
iOS
Text: the QuranText Swift package, try Mushaf.hafs(). Pages: packages/ios/QvpKit after scripts/build-engine-ios.sh produces the XCFramework. Its README documents QvpPageView and the demo; we have not built it, so treat that page as the repository’s claim rather than ours.
Flutter
Text: quran_text, with the font declared as a package asset. Pages: qvp_flutter by path dependency, Android only today.
React Native
Text: the JavaScript package works in React Native; load another riwayah with Mushaf.fromJson. Pages: @quran.ws/qvp-react-native with the Kotlin library included as a Gradle project, Android only today.

Try it live

The web wrapper and the real wasm, in your browser — the same API the native wrappers expose.

Work offlineWhat each of these files weighs, and what to ship in the app.Quran Engine referenceThe API every wrapper mirrors, run against a real page.Choosing a blockEight packages. Which one answers your question, and which one does not.