comimi

The layoutMode setting determines how the viewer is presented in the browser:

• inline: Fits within the parent element (max 900px desktop / 500px mobile). Features fixed aspect ratio, rounded corners, and subtle shadows.
• wide: 100% width, with a draggable handle at the bottom to adjust height.
• browserFullscreen: Uses position: fixed; inset: 0 to fill the browser window without using the Fullscreen API.
• nativeFullscreen: Uses the browser's Fullscreen API. Falls back to browserFullscreen if it fails.

The viewer supports various touch and mouse gestures:

• Overlay Toggle: Click/tap in the center 40% of the screen.
• Page Navigation: Click/tap in the left 30% or right 30% (when overlay is closed). This is an instant switch.
• Swipe/Drag: Moves pages with a slide animation (40px threshold, horizontal priority).
• Zooming:
  • Pinch: Standard pinch-to-zoom.
  • Mouse Wheel: Ctrl/⌘ + Wheel zooms centered on the cursor. In spread mode, it only zooms the page under the cursor.
• Panning: Dragging while zoomed moves the view within page boundaries.

To initialize a manga viewer, import createMangaViewer and pass a container element and an options object. The library will replace the container's existing children with the viewer's DOM.

import { createMangaViewer } from "@yui540/comimi";

const viewer = createMangaViewer(document.querySelector("#viewer")!, {
  manga: {
    id: "sample",
    title: "モノクロ世界にようこそ",
    author: "yui540",
    pages: [
      { id: "p0", type: "image", src: "/pages/0.webp" },
      { id: "p1", type: "image", src: "/pages/1.webp" },
      { id: "p2", type: "image", src: "/pages/2.webp" }
    ]
  },
  locale: "ja",
  settings: {
    layoutMode: "inline",
    readingDirection: "rtl",
    hasCover: true
  },
  events: {
    pageChange: ({ pageIndex }) => console.log("page", pageIndex + 1)
  }
});

viewer.nextPage();
viewer.goToPage(10);
viewer.destroy();

To initialize a manga viewer, use the createMangaViewer function. You must provide a DOM element to mount the viewer and a configuration object containing the manga data. The library automatically manages the DOM within the target element. The returned instance can be used to control page navigation, settings, and events.

import { createMangaViewer } from "@yui540/comimi";

createMangaViewer(document.querySelector("#viewer")!, {
  manga: {
    id: "sample",
    title: "サンプル漫画",
    author: "yui540",
    pages: [
      { id: "p0", type: "image", src: "/pages/0.webp" },
      { id: "p1", type: "image", src: "/pages/1.webp" },
      { id: "p2", type: "image", src: "/pages/2.webp" },
    ],
  },
});

You can install the manga viewer via npm or use it via CDN.

NPM Installation:

npm install @yui540/comimi

CDN Usage: Load dist/manga-viewer.global.js and call window.MangaViewer.createMangaViewer(...).

Install the comimi library using npm to integrate a manga viewer into your website. This library is written in TypeScript/JavaScript and does not depend on UI frameworks like React, making it suitable for standalone use.

npm install @yui540/comimi

The viewer distinguishes between settings that apply to the entire application (Global) and settings that are specific to a particular manga (Per-Manga).

Per-Manga Settings

These are stored in the mangaSettings store and are unique to each manga.id. They include:

• pageTurnMode
• hasCover
• readingDirection

Global Settings

All other settings (like locale or autoPageTurnIntervalMs) are stored globally and apply to all manga viewed by the user.

When calling updateSettings(), the core automatically splits the provided settings into these two categories and persists them accordingly.

You can disable specific UI controls using the hiddenSettings array. The behavior depends on whether the key refers to a setting panel item or a toolbar operation.

Setting Panel Items: (Becomes read-only static display)

• locale, theme, cover, direction, interval

Toolbar Operations: (The UI element is completely removed)

• pageMode (1-page / spread toggle)
• autoplay (Auto-play button)
• viewMode (Layout switcher)

Example:

createMangaViewer(container, {
  manga,
  hiddenSettings: ["locale", "backgroundColor", "autoplay"]
});

Settings control the visual and functional behavior of the viewer. Common settings include:

The viewer supports built-in locales: ja, en, zh-CN, ko, th, and id. You can provide a locale string and use the translations option to override or add specific translation keys.

If a key is missing in the provided translations, it falls back to the ja locale, and finally to the key string itself.

createMangaViewer(container, {
  manga,
  locale: "fr",
  translations: {
    "overlay.settings": "Réglages",
    "settings.cover": "Couverture"
  }
});