Shoji

A zero-dependency, plugin-first TypeScript lightbox/gallery. Drop in two <script>/<link> tags, or install from npm — everything else, including every official plugin, is opt-in.

Guides

• Getting started

  Installation (script tags vs. npm/ESM), the zero-config quickstart, dynamic mode.

• Plugins

  The plugin contract, the options[plugin.name] convention, and every official plugin at a glance.

• Layout plugin

  Grid, masonry (vertical & horizontal), and justified — options and examples.

• Transitions

  Every built-in mode preset, custom CSS transitions, and per-device overrides.

• Methods

  Every gallery instance method and property, grouped by purpose.

• Events

  The full event catalog — payload shapes and when each one fires.

• Settings

  Every GalleryOptions field, plus a quick-reference table of plugin options.

• Theming

  Every --shoji-* custom property, dark/light, and z-index layering.

• Infinite scroll

  No dedicated plugin — updateSlides() plus a plain IntersectionObserver already covers both append and prepend.

• Architecture

  How the pieces fit together — core, plugins, the event bus, options, and the DOM structure that actually renders. Diagrams included.

Examples

Real, runnable, self-contained HTML files — copy one wholesale into your own project.

Browse the examples →

Playground

Every GalleryOptions/plugin-option field as a live form — flip settings, pick dynamic (JSON items) vs. selector (DOM markup) mode, and rebuild the gallery to see the result immediately, no editing required.

Open the playground →

API reference

Generated from source via TypeDoc — always in sync with the actual public types (src/index.ts, src/core/index.ts, and each official plugin's index.ts).

Browse the API reference →