Speed-Read

Lightweight, embeddable document reader for EPUB, PDF, CBZ, and Tumblr posts. Add a reader to any webpage in one line of code.

Features

• Lightweight: ~13KB initial load, format libraries loaded on-demand
• Multi-format: EPUB, PDF, CBZ, and Tumblr post support
• Dual export: Web Component and React
• Episodic content: Chapter manifest support for serial content
• Tumblr series: Navigate through linked Tumblr post series with caching
• Themeable: CSS custom properties for styling
• Accessible: Keyboard and touch navigation

Quick Start

HTML (CDN)

<script src="https://cdn.jsdelivr.net/npm/@entrolution/speed-read@latest"></script>
<speed-reader src="/book.epub"></speed-reader>

React

import { Reader } from '@entrolution/speed-read/react';

function App() {
  return (
    <Reader
      src="/book.epub"
      onPageChange={(page, total) => console.log(`Page ${page}/${total}`)}
    />
  );
}

Episodic Content

<speed-reader manifest="/chapters.json"></speed-reader>

{
  "title": "My Web Novel",
  "chapters": [
    { "src": "/chapters/ch1.epub", "title": "The Beginning" },
    { "src": "/chapters/ch2.epub", "title": "The Journey" }
  ]
}

Tumblr Posts

Read Tumblr post series with automatic navigation between linked posts:

<speed-reader tumblr="https://www.tumblr.com/username/post-id/slug"></speed-reader>

Posts are fetched via CORS proxy and cached locally. Use a custom proxy if needed:

<speed-reader
  tumblr="https://www.tumblr.com/username/post-id/slug"
  tumblr-proxy="https://my-cors-proxy.com/?url=">
</speed-reader>

Installation

npm install @entrolution/speed-read

Or use via CDN:

<script src="https://cdn.jsdelivr.net/npm/@entrolution/speed-read@latest"></script>

Usage

Web Component

<!-- From URL -->
<speed-reader src="/path/to/book.epub"></speed-reader>

<!-- With manifest -->
<speed-reader manifest="/chapters.json"></speed-reader>

Attributes

Attribute	Type	Description
src	string	URL to document file
manifest	string	URL to chapters manifest
tumblr	string	Tumblr post URL
tumblr-proxy	string	Custom CORS proxy URL (optional)

Events

Event	Detail	Description
ready	-	Document loaded and ready
pagechange	{ page, total }	Page navigation occurred
chapterchange	{ chapter, total }	Chapter changed (manifest mode)
error	ReaderError	Error occurred

React Component

import { Reader } from '@entrolution/speed-read/react';

function App() {
  return (
    <Reader
      src="/book.epub"
      onReady={() => console.log('Ready!')}
      onPageChange={(page, total) => console.log(`${page}/${total}`)}
      onError={(error) => console.error(error)}
    />
  );
}

Props

Prop	Type	Description
src	string | File | Blob	Document source
manifest	string	Manifest URL
tumblr	string	Tumblr post URL
tumblrProxy	string	Custom CORS proxy URL
onReady	() => void	Called when ready
onPageChange	(page, total) => void	Page change callback
onChapterChange	(chapter, total) => void	Chapter change callback
onError	(error) => void	Error callback
className	string	CSS class name
style	CSSProperties	Inline styles

Loading Files Directly

Both components support loading files from File or Blob objects:

// React
const readerRef = useRef();
const handleFile = (file) => {
  readerRef.current.loadFile(file);
};

<Reader ref={readerRef} />

// Web Component
const reader = document.querySelector('speed-reader');
reader.loadFile(file);

Theming

Style the reader with CSS custom properties:

speed-reader {
  --speed-reader-bg: #ffffff;
  --speed-reader-text: #000000;
  --speed-reader-accent: #0066cc;
  --speed-reader-error-bg: #fff0f0;
  --speed-reader-error-text: #cc0000;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  speed-reader {
    --speed-reader-bg: #1a1a1a;
    --speed-reader-text: #e0e0e0;
    --speed-reader-accent: #66b3ff;
  }
}

Keyboard Navigation

Key	Action
Arrow Right / Arrow Down / Space	Next page
Arrow Left / Arrow Up	Previous page
Home	First page
End	Last page

Supported Formats

Format	Extension	Library
EPUB	.epub	foliate-js
PDF	.pdf	pdf.js
CBZ	.cbz	JSZip + Web Worker
Tumblr	URL	CORS proxy + caching

Bundle Size

Module	Gzipped
Core	~8KB
+ EPUB	~80KB
+ PDF	~200KB
+ CBZ	~30KB
+ Tumblr	~8KB

Format libraries are loaded dynamically, only when needed.

DRM Protection

DRM-protected files are detected and blocked with a clear message. The reader supports:

• Adobe ADEPT (EPUB)
• Readium LCP (EPUB)
• Password-protected PDFs
• Adobe PDF DRM

Browser Support

• Chrome 80+
• Firefox 78+
• Safari 14+
• Edge 80+

Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Run tests
npm test

# Build
npm run build

Roadmap

See ROADMAP.md for planned features including:

• Table of Contents & Search
• Bookmarks & Annotations
• Themes & Typography controls
• Offline/PWA support

Contributing

See CONTRIBUTING.md for guidelines.

Changelog

See CHANGELOG.md for release history.