ZenReader

Landing Page

Overview

ZenRead is a minimal, distraction-free reading tool that lets users extract and read clean versions of any online article or blog post. It removes unnecessary ads, popups, and clutter from webpages, providing a comfortable, focused reading experience.

Built with modern web technologies, ZenRead allows users to paste any article URL, automatically extracts the main content, and displays it in a clean, readable format with customizable typography and display options.

Screenshot Of Reader and Font Settings

Key Features

• Distraction-Free Reading
  Extracts only the main content of articles — no ads, popups, or unnecessary elements.
• Typography Customization
  Users can change font size and font style for a more personalized reading experience.
• Light & Dark Mode
  Switch easily between light and dark themes based on user preference or system settings.
• Automatic Parsing
  Uses smart parsing to automatically detect and extract the main content from most websites.
• Responsive Design
  Fully responsive and optimized for reading on both desktop and mobile devices.

Tech Stack

• Frontend: Next.js 15 (App Router), React, Tailwind CSS
• Styling: Tailwind CSS with Typography Plugin, Shadcn UI
• Backend/API: Next.js API Routes
• Libraries Used: @mozilla/readability, jsdom
• Deployment: Vercel

Watch the Tutorial

Want to see how ZenReader works in action?
Check out the video tutorial on YouTube:

▶ Watch here: How to Use ZenReader | Read Any Article Without Ads or Popups

Challenges Solved

• Cleanly parsing and displaying article content from diverse websites with inconsistent HTML structures.
• Handling CORS and network request errors for better reliability.
• Providing accessibility through typography controls and theme switching.