Install and Initialize EPUB.js

Task

Install EPUB.js and create a browser-only Reader component around the existing Reader UI.

Install

npm install epubjs

Component

Create or update the Reader component as a client component:

"use client";

import ePub, { type Book, type Rendition } from "epubjs";
import { useEffect, useRef } from "react";

Keep the EPUB.js instance in refs:

const bookRef = useRef<Book | null>(null);
const renditionRef = useRef<Rendition | null>(null);

Initialize against the Reader container:

const book = ePub(epubUrl);
const rendition = book.renderTo(containerRef.current!, {
  width: "100%",
  height: "100%",
});

bookRef.current = book;
renditionRef.current = rendition;

await rendition.display();

The EPUB URL should come from an authenticated server boundary, not from a publicly exposed storage bucket.

Test

Open a real Book and confirm the EPUB renders inside the existing Reader content area.

Checkpoint

EPUB.js is initialized only in the browser and displays a real stored EPUB inside Readly’s prepared Reader UI.