PHPackages                             mikespub/web-comic-reader - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. mikespub/web-comic-reader

ActiveLibrary

mikespub/web-comic-reader
=========================

Web Based cbr/cbz/cbt comic book reader. Written in HTML5 and Javascript

2026.1.24(3mo ago)02671MITJavaScript

Since Oct 5Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/mikespub-org/afzafri-Web-Comic-Reader)[ Packagist](https://packagist.org/packages/mikespub/web-comic-reader)[ RSS](/packages/mikespub-web-comic-reader/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (4)Used By (1)

Web Comic Reader
================

[](#web-comic-reader)

Modern web-based comic book reader for CBR, CBZ, and CBT files with library management and reading progress tracking.

About this fork
===============

[](#about-this-fork)

This fork is used to allow opening a comic book via ?url=... parameter (relative or absolute on same server), and create packages for use in other projects.

The [assets/ files](assets/) are available as:

- PHP composer package: [mikespub/web-comic-reader](https://packagist.org/packages/mikespub/web-comic-reader), or
- NPM javascript package: [@mikespub/web-comic-reader](https://www.npmjs.com/package/@mikespub/web-comic-reader).

Features
--------

[](#features)

- **Modern UI**
- **Library Mode** - Select your comics folder once, access anytime with persistent folder access
- **Reading Progress** - Automatically saves your last read page and scrolls to it when you reopen
- **Thumbnail Previews** - Auto-generated cover thumbnails for quick comic recognition
- **Recently Read** - Quick access to your last 5 comics with progress indicators
- **Quick Read Mode** - Upload and read individual files without library setup
- **Client-Side Only** - All processing happens in your browser, no server uploads required
- **Offline Support** - Works completely offline after initial load

Usage
-----

[](#usage)

### Library Mode (Recommended)

[](#library-mode-recommended)

1. Click "Select Comics Folder"
2. Choose your comics folder and grant permission
3. Browse your library with thumbnails and progress tracking
4. Click any comic to read
5. Your progress is automatically saved

### Quick Read Mode

[](#quick-read-mode)

1. Click "Quick Read"
2. Upload a single CBR/CBZ/CBT file
3. Read immediately (progress won't be saved)

Getting Started (Development)
-----------------------------

[](#getting-started-development)

### Prerequisites

[](#prerequisites)

- A local web server (Python's `http.server`, Node's `http-server`, etc.)
- For Library Mode: HTTPS server setup

### Basic Setup (HTTP - Quick Read Only)

[](#basic-setup-http---quick-read-only)

```
# Clone or download the repository
git clone
cd Web-Comic-Reader

# Start a local server (choose one):
# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Node.js http-server
npx http-server -p 8000

# PHP
php -S localhost:8000
```

Visit `http://localhost:8000` in your browser. Only Quick Read mode will work.

### HTTPS Setup (Required for Library Mode)

[](#https-setup-required-for-library-mode)

To enable Library Mode with folder access, you need HTTPS:

**Option 1: Using nginx-proxy (Recommended for local development)**

1. Set up nginx-proxy with SSL certificates
2. Configure proxy to your local server
3. Access via `https://yourdomain.test`

**Option 2: Using mkcert for local HTTPS**

```
# Install mkcert
# macOS
brew install mkcert

# Create local CA
mkcert -install

# Generate certificate
mkcert localhost 127.0.0.1

# Use with your server (example with http-server)
npx http-server -p 8000 -S -C localhost+1.pem -K localhost+1-key.pem
```

### File Structure

[](#file-structure)

```
├── index.html              # Main HTML file
├── assets/
│   ├── css/
│   │   └── styles.css     # All styles and theming
│   └── js/
│       ├── script.js      # Main application logic
│       └── uncompress/
│           └── uncompress.js  # Archive extraction
├── README.md
└── LICENSE

```

### Development Notes

[](#development-notes)

- Reading progress is stored in `localStorage` (key: `comic_reader_userpref`)
- Folder handles are stored in `IndexedDB` (database: `ComicReaderDB`)
- Thumbnails are base64-encoded JPEG stored in localStorage
- Uses vanilla JavaScript (no jQuery required)

Requirements
------------

[](#requirements)

- Modern browser with File System Access API support (Chrome, Edge, Opera)
- **HTTPS required** for Library Mode (folder access)
- For Quick Read Mode, HTTP is sufficient

Browser Compatibility
---------------------

[](#browser-compatibility)

### Library Mode (File System Access API)

[](#library-mode-file-system-access-api)

**✅ Fully Supported:**

- Chrome/Chromium (desktop)
- Microsoft Edge (desktop)
- Opera (desktop)

**❌ Not Supported:**

- Safari (macOS &amp; iOS) - Apple has not implemented this API due to privacy/security concerns
- Firefox - Partially supported behind flags, not production-ready
- All iOS browsers (Chrome, Firefox, Edge on iOS) - Use Safari's engine, inherit same limitations

**📝 Note:** Safari and unsupported browsers will automatically fall back to Quick Read mode only. Users can still read comics by uploading individual files, but library features and progress tracking won't be available.

Supported Formats
-----------------

[](#supported-formats)

- `.cbr` - Comic Book RAR
- `.cbz` - Comic Book ZIP
- `.cbt` - Comic Book TAR

Technical Details
-----------------

[](#technical-details)

- Pure client-side processing (no server required)
- Reading progress stored in localStorage
- Folder handles stored in IndexedDB
- Thumbnails generated using Canvas API
- lightGallery for image viewing with zoom and fullscreen

Credits
-------

[](#credits)

- [Uncompress.js](https://github.com/workhorsy/uncompress.js) - Archive extraction
- [lightGallery](https://github.com/sachinchoolur/lightGallery) - Image gallery and viewer
- [Dropzone.js](https://www.dropzone.dev/) - File upload handling

License
-------

[](#license)

This project is licensed under the MIT License - see the LICENSE file for details.

###  Health Score

37

—

LowBetter than 83% of packages

Maintenance78

Regular maintenance activity

Popularity15

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity37

Early-stage or recently created project

 Bus Factor1

Top contributor holds 79.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~55 days

Total

3

Last Release

114d ago

Major Versions

2025.11.23 → 2026.1.242026-01-24

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1447115?v=4)[Mike's Pub](/maintainers/mikespub)[@mikespub](https://github.com/mikespub)

---

Top Contributors

[![afzafri](https://avatars.githubusercontent.com/u/14824387?v=4)](https://github.com/afzafri "afzafri (94 commits)")[![mikespub](https://avatars.githubusercontent.com/u/1447115?v=4)](https://github.com/mikespub "mikespub (13 commits)")[![joskezelensky](https://avatars.githubusercontent.com/u/170706918?v=4)](https://github.com/joskezelensky "joskezelensky (10 commits)")[![gigirassy](https://avatars.githubusercontent.com/u/145225213?v=4)](https://github.com/gigirassy "gigirassy (1 commits)")

### Embed Badge

![Health badge](/badges/mikespub-web-comic-reader/health.svg)

```
[![Health](https://phpackages.com/badges/mikespub-web-comic-reader/health.svg)](https://phpackages.com/packages/mikespub-web-comic-reader)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
