Comic Viewer Tailwind CSS Demo

Decrypted plugin sample

A custom fetch hook retrieves pre-encrypted .enc pages, and an afterFetch hook decrypts them before the viewer renders them.

Source code

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

const encryptedJpegPlugin = ComicViewer.definePlugin({
  name: "encrypted-jpeg",
  customFetch: ({ signal, url }) =>
    fetch(url, { signal }).then((response) => response.arrayBuffer()),
  afterFetch: ({ buffer }) => decryptPage(buffer),
});

export const Reader = ({ pages }) => (
  <ComicViewer.Root pages={pages} plugins={[encryptedJpegPlugin]}>
    <ComicViewer.Viewport />
    <ComicViewer.Toolbar />
    <ComicViewer.PageNavigation />
  </ComicViewer.Root>
);