Comic Viewer Demo

Tailwind CSS demo

Cover before the spreads

spreadStartIndex is the page every spread is counted from. The default 0 pairs the pages from the very first one, while the 1 used here leaves the first page on its own as a cover and pairs the pages that follow it. A page left unpaired at either end keeps the half of the spread it would have in a printed book instead of sitting in the middle.

Source code

1import * as ComicViewer from "@publira/comic-viewer";23export const Reader = ({ pages }) => (4  <ComicViewer.Root pages={pages} spreadStartIndex={1}>5    <ComicViewer.Viewport />6    <ComicViewer.Toolbar />7    <ComicViewer.PageNavigation />8  </ComicViewer.Root>9);