Comic Viewer Demo

Left-to-right reading

The other demos keep the default rtl direction. With initialReadingDirection set to ltr, a spread starts on its left half, a page turn moves the reader to the right, and the navigation buttons swap sides to match. The last page of this sample has no page to face, and it keeps the half a spread starts on.

Source code

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

export const Reader = ({ pages }) => (
  <ComicViewer.Root pages={pages} initialReadingDirection="ltr">
    <ComicViewer.Viewport />
    <ComicViewer.Toolbar />
    <ComicViewer.PageNavigation />
  </ComicViewer.Root>
);