Scroll Code

Problem

Reading an unfamiliar repository on a phone usually means pinching a desktop code page, dragging sideways, and repeatedly losing the current function. I wanted the reading flow to match the device rather than force a desktop interface into a narrow screen.

Scroll Code accepts a public GitHub repository and turns its source into a vertical feed. Each card represents a function, class, interface, trait, type, or safe plain text section. Vertical movement advances through the repository while horizontal movement remains available for long source lines.

Constraints

Repository content cannot be trusted merely because GitHub hosts it. An archive can contain traversal paths, links, special device entries, oversized files, binary data, generated output, or compressed content that expands far beyond its download size.

The reader also needs a stable source identity. A default branch can change while a person reads, so every journey must stay attached to one resolved Git commit.

Ownership

I designed and built the repository contracts, GitHub ingestion path, language analysis, syntax highlighting, mobile reader, file drawer, pagination, accessibility behavior, tests, and public documentation.

The application uses GitHub as its repository source. It does not claim ownership of the repositories a user chooses to read.

Decisions

I treated every downloaded archive as hostile input. Scroll Code constrains redirects to approved GitHub hosts, rejects path traversal, symbolic links, hard links, and device entries, and applies limits to compressed archives, expanded content, individual files, the readable corpus, and the final response.

The server resolves the default branch to a commit before downloading its archive. That choice makes the reading feed repeatable and prevents a branch update from changing files during analysis.

Tree sitter extracts code units for JavaScript, TypeScript, TSX, Python, and Rust. Other safe readable files become clearly labeled plain text cards. Shiki returns syntax tokens while the React interface controls the final markup, which keeps repository text away from executable HTML paths.

The architecture separates repository ingestion, language analysis, and reader presentation through explicit contracts. A future definition provider can replace the current unavailable navigation provider without changing the GitHub downloader or feed.

Result

The public prototype loads a repository into a full screen snap feed with touch scrolling, Page Up and Page Down navigation, a file drawer, focus restoration, reduced motion behavior, error announcements, and saved position recovery for each repository and commit.

Validation on August 27 2026 included ESLint, TypeScript checking, 81 passing Vitest tests, a successful Next.js production build, and a pnpm audit with zero known vulnerabilities. A real browser run downloaded saberrg/image2txt from GitHub and rendered its source as three cards. The phone sized image on this page comes from that run.

Limitations

The current prototype supports public repositories and the default branch only. It does not include private repository authentication, branch selection, editing, AI ranking, offline reading, or live definition navigation.

The source is public, but Scroll Code is not deployed as a public service. The analysis endpoint has no authentication, request rate limit, or shared analysis concurrency guard. Those controls are required before unrestricted public hosting.

Reflection

The visible interface is intentionally quiet. Most of the engineering sits behind the first card, where the system has to prove which commit it read, decide which files deserve attention, reject unsafe input, preserve source provenance, and remain honest about unsupported navigation.

That combination is what I enjoy building. A simple user action should rest on explicit boundaries, evidence, and failure behavior that can survive closer inspection.