Online Reader Framework

What it does

Long texts are hard to read on a screen. The reader gives each book the same set of tools, so the reader of the book can adjust the page to how they read.

• Navigate

  A nested contents tree, previous and next links, six front-page layouts, and an address for every section.

• Search

  Full-text search across every section, including nested ones.

• Adjust the page

  Light, dark or system theme. Font, size, spacing and text width. Dim the other paragraphs, show a few lines, or lay a ruler under the current line. Optional anchored reading emphasises the first letters of words.

• Keep notes

  Highlights with notes, reflections, bookmarks and progress, saved in the reader's own browser for each book. Notes export as Markdown, and a quote can become an image with a QR code.

• Listen

  Read aloud with the browser's speech voices, with the spoken passage highlighted. A host can also supply audio tracks, with optional word alignment.

• Take it away

  Build an EPUB 3 file of the book in the browser. Generate Markdown files and a prompt so that a reader can ask an AI agent about the book.

A host can also place an interactive HTML example, such as a diagram or a simulator, inside a chapter. It runs in a sandboxed frame, and the chapter keeps a written text version that search, read-aloud, the EPUB and the agent files use.

The reader has no server and no accounts, and it calls no AI service. A host can add its own coaching panel through one render function. Read aloud depends on the voices the browser provides, and EPUB export needs a browser.

Live editions

Five books by Dominik Lukeš are published on the framework. Each has its own terms for the text. The framework repository contains none of them.

• Guide to Deliberate Practice as a Universal Learning Method

  A manual for learning any skill with deliberate practice.

• Building Your Language Muscle

  A guide that applies deliberate practice to learning a language.

• Introduction to Key Issues in Language Through Stack Exchange Answers

  All 253 answers the author wrote on Linguistics Stack Exchange between 2013 and 2016, in nine sections.

• Increasing Reading Productivity

  The Academic Reading Framework in ten chapters, with three interactive diagrams.

• Foundations of Readability

  Principles for readable documents and slides in fourteen chapters, with six interactive examples.

Get started

You need Node 22.12 or later. The package is used from source and is not on npm.

git clone https://github.com/techczech/onlinereaderframework.git
cd onlinereaderframework
npm run setup
npm run build
npm test
npm run example
npm run example:preview

npm run example builds a small example book, written for the repository and released under the MIT licence, and npm run example:preview shows it at http://127.0.0.1:4173/. The example has chapters inside chapters, ordinary formatting, an interactive example with its text version, an EPUB download and agent files. Its source in examples/reader-example is a starting point for your own book.

Then install the built packages/reader-core folder in your project as a local file dependency, and pass the reader a book:

import { PublicationReader } from 'reader-core';
import 'reader-core/reader.css';

const book = {
  id: 'my-guide',
  title: 'My Guide',
  author: 'A. Author',
  description: 'One sentence about the book.',
  sections: [
    { id: 'start', title: 'Start here', category: 'Basics',
      content: '# Start here\n\nSome **Markdown**.' },
  ],
};

export default () => <PublicationReader book={book} />;

The README covers the book format in full, agent-file generation, EPUB export and the limits of this release.

Interactive examples and hosting

An interactive example is one self-contained HTML file. The host registers it with the reader; the text of a chapter cannot create one. The reader shows it in a frame that may run scripts but has no access to the page, the reader's notes, storage, cookies, pop-ups or the network, and it accepts only one kind of message from the frame: the height of its content.

The frame setting alone is not enough, because the same file can also be opened on its own as a full view. The folder of interactive examples must therefore be served with a Content-Security-Policy header that includes sandbox allow-scripts and blocks network access. The example build writes these headers in a _headers file in the format Cloudflare Pages reads, and the local preview sends the same headers.

• Cloudflare Pages, or a server where you set the headers yourself: deploy the full build. The two guides above are served this way.
• GitHub Pages: it cannot send custom headers and ignores _headers. Build with npm run example:no-embeds. That build registers no interactive example and contains no example files; each chapter shows its text version instead.

The policy is in examples/reader-example/hosting-headers.mjs, and the full contract is in packages/reader-core/src/embed/README.md.

Source and release

• Repository on GitHub
• Releases (version 1.1.0 is the current release; version 1.0.0 was the first)
• Changelog
• Report a problem or ask a question
• MIT licence text

Reading research behind it

The reading settings follow guidance the author has published on how people read and what makes text easy to process. All three are free to read, and the first two are now themselves editions on the framework.

• Foundations of Readability: five principles for readable documents and slides, and three reading modes (comprehensive reading, skimming and scanning).
• Increasing Reading Productivity: the Academic Reading Framework, for improving academic reading productivity.
• Principles of Readability: clear-writing principles, with examples and checklists.

Licence

The software is released under the MIT licence, copyright 2026 Dominik Lukeš. The fonts it bundles (Inter, Merriweather and Material Symbols Outlined) are under the SIL Open Font License 1.1, with their notices kept in the repository. The licence does not cover the text of any book published with the framework. Read the licensing summary.