Skip to content
CAI
Software that uses CAICheck a score

dimsemenov/PhotoSwipe

46.4

Weak · 1 October 2026

15.7k

lines of production code

JavaScript

primary language

2

measurements over time

CAI band scale
CAI trend line
CAI lens gauges

What this system is

This system is PhotoSwipe, a JavaScript library for creating mobile-optimized image galleries and lightboxes. It provides a modular architecture that handles core gallery mechanics, gesture interactions, and UI rendering, while offering a lightweight 'Lightbox' module for easy integration into existing websites. The project supports modern development workflows through TypeScript definitions, ES module distribution, and legacy UMD builds, alongside comprehensive documentation and interactive demos.

How it got here

2011–2021 — PhotoSwipe v5 modernization and build migration

14 changes.

The project underwent a comprehensive overhaul to release PhotoSwipe v5, featuring a complete architectural rewrite with modular components, enhanced accessibility, and a new Lightbox module. This release coincided with a migration from the legacy Apache Ant build system to a modern TypeScript-based toolchain, enabling ES2020 syntax and multi-format bundle generation.

2022 — Documentation migration and TypeScript support

12 changes.

The project rebuilt its documentation website using Docusaurus 2 to showcase new v5 features and interactive demos. Simultaneously, it expanded TypeScript support by adding comprehensive type definitions for core modules, gestures, UI components, and utilities, while also introducing a UMD bundle for legacy browser compatibility.

Features

Add UMD distribution bundle for legacy browser support

PhotoSwipe now provides a Universal Module Definition (UMD) build in the dist/umd folder, allowing integration in environments that do not support ES modules. This bundle includes the core library and the lightbox component, accompanied by a README with usage examples. The UMD version is designed for older browsers and explicitly notes that dynamic imports are not supported, requiring the pswpModule to be passed as a reference to PhotoSwipeLightbox.

dist/umd · high confidence

Added TypeScript definitions for PhotoSwipeLightbox

The distribution now includes a \lightbox.d.ts\ file that exports the \PhotoSwipeLightbox\ class and its associated types (such as \PhotoSwipeOptions\, \DataSource\, and event callbacks). This provides static type checking and IntelliSense support for developers using the lightbox component in TypeScript projects.

dist/types/lightbox · high confidence

Added TypeScript type definitions for UI components

The dist/types/ui directory now includes generated TypeScript declaration files (.d.ts) for the UI subsystem, covering the main UI class, the UIElement base class, and specific elements like arrows, close, zoom, counter, and loading indicators. These definitions expose the structure of UIElementData (including properties like className, html, onClick, and appendTo) and the DefaultUIElements union, enabling better type checking and IntelliSense for consumers of the library.

dist/types/ui · high confidence

Added TypeScript type definitions for core PhotoSwipe modules

The \dist/types\ directory now includes TypeScript declaration files (\.d.ts\) for the library's core components, including \Keyboard\, \MainScroll\, \Opener\, \ScrollWheel\, and the main \PhotoSwipe\ class along with its options and utility types. This enables TypeScript users to receive type checking and autocompletion for the gallery's internal mechanics, such as keyboard navigation, scroll handling, and transition management.

dist/types · high confidence

Added TypeScript type definitions for gesture handling components

The library now includes TypeScript declaration files (.d.ts) for the gesture subsystem, providing type information for the main Gestures class and its specific handlers: DragHandler, TapHandler, and ZoomHandler. This enables better type checking and IntelliSense support for developers using the library in TypeScript projects, covering the core interaction logic for dragging, tapping, and zooming gestures.

dist/types/gestures · high confidence

Added TypeScript type definitions for the slide module

This release adds TypeScript declaration files (.d.ts) for the slide subsystem, including the main Slide class, Content, Loader, Placeholder, ZoomLevel, PanBounds, and thumbnail bounds calculation. These definitions expose the public API and internal types for slide rendering, lazy loading, zooming, and panning, enabling better type checking and IntelliSense for consumers of the library.

dist/types/slide · high confidence

Added TypeScript type definitions for utility modules

This release adds TypeScript declaration files (.d.ts) for the library's internal utility modules, including animations, DOM events, viewport sizing, and general helpers. These new type definitions provide explicit type information for classes like Animations, SpringAnimation, CSSAnimation, and DOMEvents, as well as utility functions such as createElement, getDistanceBetween, and getViewportSize, enabling better type checking and IntelliSense support for consumers using TypeScript.

dist/types/util · high confidence

Build system now generates UMD bundles alongside ESM outputs

The build configuration has been updated to produce Universal Module Definition (UMD) versions of the PhotoSwipe core and lightbox scripts, in addition to the existing ES Module (ESM) and minified ESM outputs. This allows users who require traditional script-tag inclusion (non-module environments) to use the library via the new UMD files located in the \umd/\ subdirectory, while the standard ESM builds remain available for modern bundlers.

build · high confidence

Introduction of PhotoSwipe Lightbox module

A new PhotoSwipe Lightbox class has been added to simplify integrating the gallery into existing websites. This lightweight module automatically binds click events to gallery links, parses the DOM to retrieve image URLs and sizes, and initializes the core PhotoSwipe instance, allowing users to add a full-featured lightbox with minimal setup code.

src/js/lightbox · high confidence

Introduction of a filter API alongside existing events

The core module now supports a new filter system that allows developers to programmatically modify internal data and state, such as slide item data, placeholder sources, and UI elements, in addition to the existing event-based hooks. This change introduces methods like \applyFilters\ in the base class and defines a \PhotoSwipeFiltersMap\ in the eventable module, enabling more granular control over gallery behavior without relying solely on event dispatching.

src/js/core · high confidence

The documentation site has been migrated to Docusaurus 2, introducing a new homepage that showcases PhotoSwipe v5 features. This includes an interactive header gallery, a demo of the Dynamic Caption plugin, and a Deep Zoom gallery demo for viewing extremely large tiled images. The page also highlights key v5 improvements such as ES6 module distribution, dynamic imports, and the removal of legacy features like hash-based navigation and inline gallery support.

demo-docs-website/src/pages · high confidence

PhotoSwipe v5 initial release with new architecture and accessibility

This is the initial release of PhotoSwipe v5, introducing a completely restructured codebase with new modular components for keyboard navigation, main scrolling, and opening/closing animations. The gallery now includes built-in accessibility features, such as ARIA attributes following the 'carousel' pattern and focus trapping within the lightbox. Users can expect improved performance, particularly when navigating slides with loop enabled, and new options like trapFocus, maxWidthToAnimate, and wheelToZoom to customize behavior.

src/js · high confidence

Removals

Removal of Apache Ant 1.8.2 bundled tool

The Apache Ant 1.8.2 build tool has been removed from the \tools\ directory. This change deletes the entire \tools/apache-ant-1.8.2\ directory, including its installation instructions, PGP keys, license, and release notes, as well as all executable scripts in the \bin\ subdirectory (such as \ant\, \ant.bat\, and \antRun\).

tools · high confidence

Removal of PhotoSwipe 1.0.0 library and documentation

The PhotoSwipe 1.0.0 image gallery library (code-photoswipe-1.0.0.js and its minified version) has been removed from the artifact, along with its associated MIT license, README, and change-log files. This eliminates the mobile-optimized image viewer capability from this specific version location.

artifact, artifact/1.0.0 · high confidence

Removal of legacy PhotoSwipe example files

The \src/examples\ directory has been cleaned up by deleting the legacy demonstration files (\advanced-setup.html\, \index-jquery-plugin.html\, \index.html\, \jquery-engine.html\, and \styles.css\). These files, which previously showcased the older \code-photoswipe-1.0.0\ library and its jQuery integration, are no longer included in the distribution.

src/examples · high confidence

Removal of legacy PhotoSwipe v1 source files

The legacy PhotoSwipe v1 source files have been removed from the \src\ directory, including \caption-class.js\, \document-overlay-class.js\, \element-class.js\, \event-class.js\, \full-size-image-class.js\, and the bundled \jquery-1.5.1.min.js\. This cleanup eliminates the old class-based architecture and the outdated jQuery dependency from the source code.

src · high confidence

Architecture

Refactored gesture handling into modular handlers

The gesture logic in src/js/gestures has been restructured from a monolithic implementation into distinct, specialized modules: DragHandler, ZoomHandler, and TapHandler. This change improves code maintainability and separation of concerns by isolating the specific responsibilities of panning/dragging, pinch-to-zoom, and tap/click interactions into their own classes, while the main Gestures class now acts as the central coordinator binding pointer events and dispatching them to the appropriate handler.

src/js/gestures · high confidence

Behavioural changes

Migrate documentation site to Docusaurus 2

The PhotoSwipe documentation website has been rebuilt using Docusaurus 2, replacing the previous static site generator. This migration introduces a new navigation structure with dedicated sections for Examples, API, and Framework integrations (React, Vue, Svelte), and includes a new Svelte image gallery example. The site now features a light-themed UI, Google Analytics tracking, and updated footer links, providing a more modern and maintainable documentation experience for users.

demo-docs-website · high confidence

Migrate documentation site to Docusaurus 2 and update PhotoSwipe

The documentation website has been rebuilt using Docusaurus 2, replacing the previous static site generator. This migration includes adding a .nojekyll file to ensure proper deployment on GitHub Pages and updating the bundled PhotoSwipe lightbox library to version 5.4.4, which provides improved image loading, zooming, and event handling for the gallery demos.

demo-docs-website/static · high confidence

The documentation website has been rebuilt using Docusaurus 2, introducing a new theme structure and custom React components. A key addition is the \PswpCodePreview\ component, which allows documentation authors to embed interactive PhotoSwipe gallery demos directly within code blocks, complete with live HTML previews and various template options (e.g., badges, cropped images, captions). The site also features a custom sidebar navigation, enhanced code highlighting, and a dedicated homepage layout.

demo-docs-website/src/theme · high confidence

Migration to modern build tooling and TypeScript support

The project has replaced the legacy Apache Ant build system with a modern JavaScript toolchain, enabling the use of ES2020 syntax features like optional chaining and nullish coalescing via Babel plugins. This change is accompanied by the introduction of TypeScript configuration and declaration generation, allowing for type-safe development and improved IDE support, while the build process now relies on npm scripts instead of shell scripts.

(repo-wide) · high confidence

New animation engine and refined padding controls

The utility layer now features a dedicated animation system (src/js/util/animations.js) that manages CSS transitions and spring-based animations, including a Safari-specific timeout fallback to ensure transition events fire reliably. Additionally, the viewport-size utilities (src/js/util/viewport-size.js) introduce support for dynamic padding via the new \paddingFn\ and \padding\ options, allowing developers to define different padding values based on image data or slide index, while maintaining backward compatibility with legacy \paddingLeft\/\paddingRight\ settings.

src/js/util · high confidence

PhotoSwipe Lightbox updated to version 5.4.4

The distributed ESM bundle for PhotoSwipe Lightbox has been rebuilt and updated to version 5.4.4. This release includes the latest source code compilation, ensuring that the lightbox component reflects the current state of the library's core logic, event handling, and content loading mechanisms.

dist · high confidence

Rebuilt slide rendering with dedicated content and placeholder management

The slide rendering logic has been restructured to use a dedicated Content class that manages image and HTML slide elements, replacing the previous inline approach. This change introduces a separate Placeholder component that is now created and destroyed by the Content object, ensuring placeholders are removed only after the opening animation completes to prevent visual flashing. The Content class also handles srcset size updates before the image source is set, which resolves issues with Safari and Firefox. Additionally, the new architecture supports empty slide content, allows for custom padding based on image data or index, and improves lazy-loading reliability by caching content by index and properly handling non-image slides.

src/js/slide · high confidence

UI components restructured into modular, data-driven elements with improved accessibility

The UI layer has been refactored to use a modular, data-driven architecture where each component (arrows, close, zoom, loading, counter) is defined as a distinct object with declarative properties like \html\, \onClick\, and \order\. This change introduces better accessibility by adding \aria-label\ attributes to buttons and ensuring \aria-controls\ points to a unique ID. The loading indicator now respects a configurable delay, and zoom controls are automatically hidden or disabled when the current slide is not zoomable. Additionally, arrow navigation buttons are dynamically hidden when only a single slide is present.

src/js/ui · high confidence

Updated TypeScript type definitions for core modules

The TypeScript declaration files in dist/types/core have been regenerated and updated, including the introduction of new files for base.d.ts and eventable.d.ts. This ensures that type checking for the PhotoSwipe core, event handling, and slide data structures aligns with the current library version, improving developer experience and type safety for consumers using TypeScript.

dist/types/core · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

How this codebase got here

Score

  • CAI 43 → 46 (+2.9)
  • Rubric changed (rubric-2026.09.11 → rubric-2026.09.18) — scores are not directly comparable.

Lenses

  • Code Health 75 → 75 (+0.0)
  • Architecture 86 → 88 (+1.4)
  • Maturity 48 → 48 (+0.0)
  • Readiness 31 → 33 (+2.1)
  • Security 49 → 61 (+12.8)

Resolved (5)

  • Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
  • Documentation: no installation or build instructions
  • High CVE: [GHSA redacted] (demo-docs-website/package-lock.json)
  • High CVE: [GHSA redacted] (demo-docs-website/package-lock.json)
  • Medium CVE: [GHSA redacted] (demo-docs-website/package-lock.json)

New (15)

  • High CVE: [CVE redacted] (demo-docs-website/package-lock.json)
  • High CVE: [GHSA redacted] (demo-docs-website/package-lock.json)
  • High CVE: [GHSA redacted] (demo-docs-website/package-lock.json)
  • Outdated (npm): @docsearch/react
  • Outdated (npm): @docusaurus/core
  • Outdated (npm): @docusaurus/plugin-google-gtag
  • Outdated (npm): @docusaurus/preset-classic
  • Outdated (npm): @docusaurus/theme-live-codeblock
  • Outdated (npm): @mdx-js/react
  • Outdated (npm): clsx
  • Outdated (npm): photoswipe-deep-zoom-plugin
  • Outdated (npm): photoswipe-dynamic-caption-plugin
  • Outdated (npm): prism-react-renderer
  • Outdated (npm): react
  • Outdated (npm): react-dom

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

Survey your own repository

dimsemenov/PhotoSwipe was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.

About this page

  • The score is its most recent published measurement, taken on 1 October 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
  • Measured at commit cd41cb587a460634e4cae53134f3d01d06e284a6 — the exact code this score is about.
  • Scored under rubric-2026.09.18 — the same rubric and the same method as every other entry in this index.
  • Measured by watchdog.canine.dev using codehealth-analyzer preprod-e569280dd5e2.