Turn doomscrolling into discovery.
A calm, swipeable reader for Wikipedia and Wikivoyage, with no engagement-driven recommendations.
How it works · Engineering notes · Run it yourself · Make it your own
WikiScroll-film-github.mp4
Spare moments can go to an endless stream of reactions and headlines, or to something worth knowing. WikiScroll shows one article at a time: a photo, a title and an introduction trimmed to whole sentences. Read it, save it, open the full article, or move on.
A few deliberate choices shape the experience:
- Likes save; they never steer. Saving an article adds it to your library. It does not change what comes next. Nothing you save, skip or read is sent with a feed request, and tests check that.
- You choose the filters. Discovery is random within the topics, depth, language and travel filters you set, and nothing else.
- No streaks, targets or accounts. A small daily count and a weekly chart show your reading without turning it into a goal. Everything stays in your browser.
WikiScroll is an independent project. It is not affiliated with or endorsed by the Wikimedia Foundation. Articles belong to their Wikipedia and Wikivoyage authors, and every card links to the original.
|
Random articles with a photo and a readable introduction.
|
Community-written travel guides to destinations around the world.
|
Wikipedia is written by volunteers, and much of it still needs work. Editors mark articles that lack sources, need more citations, are out of date or are only a stub, and those marks put each article into hidden maintenance lists. WikiScroll reads those lists so that curiosity can turn into a small contribution. You may be the reader who knows a good source for the lake you just learned about.
In Settings → Discovery → Help Wikipedia there are three choices:
- Off (default): discovery as usual.
- Show tags: cards that need work get a small tag next to their category, naming the most useful fix (No sources, Needs citations, Citation needed, Needs copy editing, Needs clarification, Photo requested, Needs updating, Needs more detail or Short article). The tag links straight to the article on Wikipedia.
- Only these articles: the feed is filled with articles that need work, sampled from random points across Wikipedia's maintenance lists. It combines with topics and depth, so you can look for, say, history articles that need citations.
![]() |
![]() |
Help Wikipedia is available for English, German, French and Spanish Wikipedia, the editions whose maintenance lists are large and flat enough to sample reliably. WikiScroll doesn't edit anything itself: improvements happen on Wikipedia, under its own guidelines. Tags reflect Wikipedia's lists when the article was fetched, so a recently fixed article may still show one for a while.
English also includes requests for copy editing, clarification and photographs. Photo requests come from Wikipedia's talk-page categories and are linked back to the article; an absent thumbnail by itself is never considered an editing request. Only these articles honors selected topics and the depth setting, and resumes unfinished source lookups after a temporary delay.
Press Space on desktop, or long-press a card on a phone, and everything else steps back: the introduction is set in large serif type over a dimmed version of the article's photo. Press Space again or tap anywhere to return. Ambient Mode is enabled by default and can be switched off in Settings.
Settings offers Standard, Large and Larger excerpt text. The introduction refits to the card without scrolling inside it, and the preference also applies to Ambient Mode. Optional image dimming works in dark mode and is off by default. Tap a card image, or focus it and press Enter, to inspect it in a separate viewer; the original article links to its image credits.
Group saved articles into named collections, and share one as a link. The link opens a page on wikiscroll.com where every title, excerpt and image has been checked again against Wikimedia. Recipients can save their own copy, and messaging apps show a generated preview card.
![]() |
![]() The preview image, rendered by the Worker for link previews |
| Reading | Full-height cards with introductions trimmed to whole sentences that fit the screen. Ambient mode. An occasional "On this day" badge marks people and events tied to today's date. |
| Your library | Saved articles (also kept in IndexedDB for offline reading), reading history for the last 50 articles, and named collections, with undo when one is deleted. |
| Sharing | Article links get a proper preview in messaging apps. Collections are shared as a snapshot of up to 30 articles, verified again when the link is opened. |
| Languages | 15 content languages, and the interface translated into all of them. Each reader downloads only their own language. Arabic and Hebrew get a right-to-left layout. |
| Input | Touch swipes, double-tap to save, pull to refresh, mouse drag, two-finger trackpad swipes, and keyboard shortcuts. |
| Install and offline | Installable as a Progressive Web App. The app shell and recently viewed images are cached, so saved articles and cached content work offline. New discoveries and maps need a connection. |
| Appearance | Dark theme by default, with a light theme. Responsive layouts for phones, tablets and wide desktops. |
Keyboard shortcuts
| Key | Action |
|---|---|
| ↓ / ↑ | Next / previous card |
| → / ← | Save and continue / skip |
| L | Save or unsave |
| S | Share |
| R | Read the full article |
| M | Map (Wikivoyage) |
| Space | Ambient mode |
| Esc | Close panels and dialogs |
Shortcuts are ignored while a panel or dialog is open, while typing, and when a modifier key is held, so browser shortcuts keep working.
The interface is meant to feel calm and predictable. A lot of that comes from small details:
- The visible card is protected. Swipes, resizes, rotations and background clean-up never move you away from the article you are reading. If the next card isn't ready, a swipe springs back instead of showing an empty screen.
- Gestures do one thing. A trackpad swipe and its momentum count as one action. Swiping right or double-tapping only ever saves; it never removes a save. Vertical scrolling, pinch-zoom and small movements don't trigger anything.
- Text fits the space. Introductions are measured against the room available and cut at sentence boundaries (using
Intl.Segmenterwhere available), in cards and in ambient mode, so there is no hidden scrolling and no text cut mid-line. - Accessibility. Native
<dialog>modals with Escape and outside-click dismissal, and focus returns to the button that opened them. Closed drawers are madeinert; an open drawer takes keyboard focus and gives it back when it closes; and only the card on screen is in the Tab order. The feed is the page's main landmark, and menu buttons announce whether their panel is open. Switches and radio groups use proper ARIA roles and states. Notifications are announced withrole="status". Form inputs are at least 16 px, and pinch-zoom is never disabled. - Reduced motion. With
prefers-reduced-motion, transitions, card flights, smooth scrolling and map fly-to animations are replaced by instant changes. - Translations stay local. Interface labels and messages are translated from bundled dictionaries in the browser. Article text is never sent to a translation service, and in Arabic and Hebrew the interface is right-to-left while each article keeps its own direction.
WikiScroll is a static front end plus one Cloudflare Worker. It uses plain JavaScript with no framework and no build step for the app itself.
flowchart LR
subgraph Browser
UI["public/app.js<br>feed, gestures, library"]
SW["sw.js<br>offline shell and images"]
LS[("localStorage<br>+ IndexedDB")]
end
subgraph Worker["Cloudflare Worker (worker/)"]
API["/api/articles · /api/topics<br>/api/travel · /api/today"]
COL["/collection<br>verified shares and preview images"]
CACHE[("Edge cache")]
end
WM["Wikipedia and Wikivoyage APIs"]
UI -- "batches of cards" --> API
UI --- LS
API --> CACHE
API --> WM
COL --> WM
UI -. "fallback if the Worker is unavailable" .-> WM
The browser keeps a reserve of cards ready ahead of the one you're reading. The Worker picks candidates from Wikimedia, completes their pageviews and introductions in parallel batches, filters them by depth, and caches the results at the edge. docs/ARCHITECTURE.md has a map of the code.
Discovery depends on public APIs that can be slow, rate-limited or briefly unavailable. Most of the work in this codebase goes into keeping the reader moving anyway:
- Supply ahead of the reader: a bounded queue (60 to 100 articles, 16 cards rendered ahead) with retries that back off exponentially.
- Fresh openings, no repeats within a visit: online readers start from an independently sampled batch. Duplicate checks cover queued and displayed cards; later preloading uses randomized shared batch slots for efficiency. Offline openings use cached content.
- Accurate depth: Wikimedia returns pageviews for only 5 pages per request, so the rest are fetched in chunks. Missing data is never treated as "obscure". Depth ranges are adjusted per language.
- Deadlines: each upstream call has a 6-second limit, and the main feed answers within a 6.5-second budget. If time runs out, the Worker answers with the cards that are complete and finishes the rest in the background.
- Rate-limit awareness:
429andRetry-Afterpause only the affected host, in both the Worker and the browser. - Stale-while-revalidate: cached supply is served immediately and refreshed in the background, and yesterday's cards stay available during an outage.
- No stale replies: every request carries a feed generation number, so a slow reply meant for the previous source, language or filter can never appear in the new feed.
- Shared links are verified: shared collections carry only article IDs. Titles, excerpts and images are fetched again from Wikimedia, escaped, and checked against strict limits before anything is rendered.
- Locked-down pages: a Content Security Policy allows scripts only from WikiScroll, the map library's CDN and Cloudflare Web Analytics, with no inline scripts. The API answers only WikiScroll's own pages.
docs/ENGINEERING.md walks through each of these with code references, and covers what the test suite does and doesn't verify.
You need Node.js 22+ and pnpm.
git clone https://github.com/Golps/WikiScroll.git
cd WikiScroll
pnpm install
pnpm dev # wrangler dev at http://localhost:8787Run the tests. They use Node's built-in test runner and need no installed dependencies or network access:
node --test test/*.test.jsNote
Wikivoyage maps use CARTO basemaps and work without any setup. The map key is configured on the Worker rather than committed in the source. For a public deployment, add your own domain-restricted key and check CARTO's usage terms. See configuration.
Two ways to host it:
- Cloudflare Workers (how wikiscroll.com runs): the full app, including topic filters, travel filters, Help Wikipedia, "On this day", shared collection pages and link previews. See Deploying.
- Any static host, such as GitHub Pages: serve the
public/folder as plain files. The browser then reads Wikipedia and Wikivoyage directly, and the core reader works: random feeds, depth, languages, saves, collections, ambient mode, maps and offline reading. Worker-only features don't. See Static hosting for the exact list.
docs/DEVELOPMENT.md also covers configuration and making it your own.
This repository contains the source used to deploy wikiscroll.com. It isn't finished, and these limitations are known:
- Browser-only storage. Saves, collections and history live in your browser, with no account sync. Clearing site data removes them, and Safari may clear them after about 7 days without a visit.
- Shared collections can't be revoked. A shared link contains its snapshot. Deleting the collection locally doesn't disable a link that was already shared.
- Coverage varies by language. Help Wikipedia is available in 4 languages. Category labels on cards are English-only. Wikivoyage covers 12 editions.
- Built for wikiscroll.com. Share links, preview URLs and cache keys use that domain. See Make it your own before deploying elsewhere.
- Automated checks. The project includes 289 regression tests; see what the tests cover.
You're welcome to study this code, fork it and build something of your own. The main branch is the source for production, with automated tests and support for Cloudflare Workers Builds. Issues and pull requests may not get a response. CONTRIBUTING.md has more detail, and CHANGELOG.md lists what changed in each release. To report a security problem with wikiscroll.com, follow SECURITY.md instead of opening a public issue.
If WikiScroll is useful to you, a ⭐ on the repository helps others find it.
- Article text and images come from Wikipedia and Wikivoyage contributors. Text is available under CC BY-SA 4.0. Each image has its own license on Wikimedia Commons. WikiScroll links every card to its source for full attribution. Photos in this README are credited in docs/images/ATTRIBUTION.md.
- Maps use Leaflet, OpenStreetMap data, CARTO basemaps and Nominatim search.
- Social preview artwork combines real Wikimedia photographs of a blue dragon sea slug, STEVE atmospheric light and Socotra with the canonical logo. Photo attribution and licenses are in THIRD_PARTY_NOTICES.md; this composition is not a reader screenshot.
THIRD_PARTY_NOTICES.md has the full list.
The code is released under the MIT License. You're free to use, modify and build on it, as long as you keep the copyright notice.
The license covers the code only. The WikiScroll name and logo are not licensed for reuse, so please give your fork its own name and look. Wikipedia and Wikivoyage content, photos, map data and the bundled font keep their own licenses, listed in THIRD_PARTY_NOTICES.md.











