Comic Viewer Demo

Before you read

This chapter is published a week ahead of its free release. Please keep the pages to yourself until then.

Why am I seeing this?

Early access comes with the membership this chapter was opened with.

Pages around the chapter

StartPage and EndPage put content of your own at the two ends of the reading sequence. The reader opens on the notice before the first page and reaches the next-chapter card after the last one, turning to both exactly as it turns to a page.

Neither of them is counted as a page. The progress still reads Pages 1-2 of 7 on the first spread, and the page list keeps the indexes it was given, so the numbering a reader sees is the numbering of the document. While one of them is on screen on its own, the status names it instead of a page number.

In double-page mode they take a half of the spread like any other page: this chapter holds an odd number of pages, which leaves the last one without a facing page, so the next-chapter card pairs with it. The links and the disclosure inside them stay usable, and the swipe and edge-click page turns leave a control that was pressed alone.

Source code

import * as ComicViewer from "@publira/comic-viewer";

export const Reader = ({ pages }) => (
  <ComicViewer.Root pages={pages}>
    <ComicViewer.StartPage>
      <CoverNotice />
    </ComicViewer.StartPage>

    <ComicViewer.Viewport />

    <ComicViewer.EndPage>
      <NextChapterCard />
    </ComicViewer.EndPage>

    <ComicViewer.Toolbar />
    <ComicViewer.PageNavigation />
  </ComicViewer.Root>
);