Building blocks/Rendering

Quran Engine

Beta

A rendering engine for interactive Mushaf pages that uses each platform's native graphics APIs.

Quick startquran-engine
Package
@quran.ws/engine
Version
0.1.0
Whole mushaf
38.9 MB brotli
Wasm engine
311 KB

What it provides

  • The split pages converted to a compact binary: 5.3× smaller than the SVG, 38.9 MB brotli for the whole mushaf
  • One Rust core with thin wrappers for Web, Android, Flutter, React Native and iOS
  • Gap-aware exact hit-testing, layout, layered styles, highlight bands, selection, mask and reveal
  • Search with Arabic normalisation, crop-to-SVG, and a cross-page atlas

Use it when you need

Use it when building Quran applications for mobile or desktop and you need fast, lightweight page rendering with interactive access to page elements.

  • A mobile or native app, where shipping and rendering SVG pages is too slow or too large
  • The same word-level behaviour across Web, iOS, Android, Flutter and React Native, from one API
  • Memorisation tools that hide and reveal in place

Not for

  • The web, where the split SVGs already work well. Use Quran SVG Elements.
  • Just showing a page and tapping ayat — an SVG and a few lines of JavaScript do that. Use Quran SVG.

See it work

Several things this block does, each running on data from the repository itself.

The engine, running

Tap a word. The hit-test, the five text forms and the word key all come out of wasm.

Real data
Starting the wasm engine…

Provenance

Every dataset identifies its source, edition, riwayah, version, and verification status. The digest lets you confirm the file you ship is the file that was verified.

View full provenance →
Quran EngineBeta
Repositoryquran-ws/quran-engine
Package@quran.ws/engine
Version0.1.0
LicenceMIT (the code) · source bundle terms (the data)
Publicat launch

Quick start

The shortest path to something running. The repository’s README covers the rest.

$ # not published — build the wasm, or take it from the release
import { QvpEngine } from "./qvp.js";
 
const engine = await QvpEngine.init(wasm);
const page = await engine.loadPage(bytes);
page.hitTest(x, y); // 0.7 µs, exact outlines
page.highlight("2:255");
Read the full documentation →

Works with

Blocks meet through shared references, not through a framework. Each of these understands something this block produces.

Quran SVG ElementsThe artwork the engine converts and draws.Quran TextAttach words to shapes at runtime.Quran TajweedFeed spans into layered styles.