Live demo (English) · Live demo (Arabic, RTL) · Documentation
Built for reading on a phone. Every page is designed at 390 px and widened with container queries: a bottom tab bar, a horizontally scrolling section rail, compact story rows with inline-end thumbnails, and a story bar that slides away as you read and comes back when you scroll up. Hierarchy comes from story type and typography rather than from colour. Dense, but calm.
Five kinds of story, one column. Standard report; photo essay with a snap gallery and lightbox; video story with captions and a transcript; long-read on a warm paper background with a table of contents and a CSS-only progress hairline; and a live blog with newest-first updates, per-update permalinks and a pulsing LIVE badge. The card to article hero morphs through cross-document View Transitions, with no JavaScript at all.
Arabic is a real edition, not a mirror. The RTL build is the same code with dir=”rtl” and logical CSS properties only, carrying original Arabic headlines, bylines and captions. IBM Plex Sans Arabic is self-hosted, leading is Arabic-aware, the reading measure is 60 characters, every number sits in a <bdi> and only the icons that point somewhere are mirrored.
Night reading, not just dark mode. The dark palette is tuned for long text: warm near-black surfaces rather than #000 , a night variant of the paper background, and a single token that dims photographs so a bright press photo does not flare in a dark room. It follows the system setting, remembers the toggle and applies before first paint. Every colour is an OKLCH light/dark pair that passes WCAG AA, and six accent presets ship in one token block.
Everything a publisher sells. Three subscription plans with a monthly and annual switch and a comparison table, a subscribe checkout, a metered paywall with three free stories a month and a visible counter, a subscriber account with plan, saved stories, newsletters and addresses, and a six-product merch shop with cart and checkout. The demo runs entirely in the browser; the included Connect a backend guide covers Snipcart, Stripe Payment Links, the Shopify Buy Button and Ghost members, with the adapter code in the package.
Nothing loads from a third party until a reader asks. Every embed, whether YouTube, Vimeo, Dailymotion, SoundCloud, a map or a social post, is a poster with a button. Permission is remembered per provider and revocable from the privacy page.
Fast and honest. No AMP, no jQuery, no Bootstrap, no icon font, no CDN, no hotlinked fonts or images. A Lucide SVG sprite, self-hosted Inter, Newsreader and IBM Plex Sans Arabic, AVIF/WebP/JPEG at three sizes, about 24 KB of CSS and 24 KB of JavaScript gzipped. Lighthouse is 95 or better for performance and 100 for accessibility and best practices on the flagged pages in both directions. The pages even work opened from disk.
Built to be edited. Prettified HTML, readable CSS and JS beside the minified copies, one token block, semantic markup with no hashed class names, no inline styles and no inline event handlers. A Vite 8 and Tailwind CSS 4 source project is included for buyers who want a build step.
Already own version 1? The 2.x download still contains your original 1.x AMP files, unchanged, in a legacy/ folder. Version 2 is a complete rewrite and shares no code with 1.x, so the two cannot be merged, so nothing is taken away from you, and your licence still covers the old files.