pencere
Modern, accessible, framework-agnostic lightbox — pure TypeScript, zero runtime dependencies.
View Transitions API morph, WCAG 2.2 AA, plugins, controlled mode, tree-shakeable. Works everywhere.
Live demo →
> [!IMPORTANT]
> **What's inside:** image / video / iframe / custom renderers, View Transitions API morph (#12), hash-based deep linking (#p1, #p2…), pinch + wheel zoom, drag-to-dismiss, Fullscreen API, lifecycle hooks (`willOpen`, `didRender`, `didNavigate`), plugin system with narrow `PencereContext` (#4), controlled mode for React / Vue router sync (#6), injectable `ImageLoader` DI (#9), automatic RTL, Trusted Types helper, IME-safe keyboard.
>
> **Adapters:** React, Vue, Svelte, Solid, Web Component, plus `bindPencere()` declarative DOM scanner for plain HTML.
>
> **Status:** Early development — public API is frozen in spirit but not in signature. Feedback on [GitHub Issues](https://github.com/productdevbook/pencere/issues) and PRs welcome.
## Quick Start
```sh
npm install pencere
```
Or use the CDN (SRI hash is published with every [release](https://github.com/productdevbook/pencere/releases)):
```html
```
```ts
import { PencereViewer } from "pencere"
const viewer = new PencereViewer({
items: [
{ type: "image", src: "/a.jpg", alt: "Mountain lake", caption: "Yosemite Valley" },
{ type: "image", src: "/b.jpg", alt: "Bosphorus at dusk" },
],
loop: true,
viewTransition: true,
routing: true,
})
// Pass the clicked thumbnail so the UA morphs thumb → lightbox natively.
document
.querySelector("#open")
?.addEventListener("click", (e) => viewer.open(0, e.currentTarget))
```
## Declarative HTML
```html
```
### React
```tsx
import { useLightbox } from "pencere/react"
function Gallery() {
const { open } = useLightbox({
items: [{ type: "image", src: "/a.jpg", alt: "A" }],
useNativeDialog: true,
})
return
}
```
### Vue 3
```ts
import { usePencere } from "pencere/vue"
const { open } = usePencere({
items: [{ type: "image", src: "/a.jpg", alt: "A" }],
})
```
### Svelte
```svelte
```
### Web Component
```html
```
## Why pencere?
| Library | License | Framework-agnostic | Zoom | Video | Thumbs | TS-first | WCAG 2.2 AA | View Transitions |
| ----------------------------------------------------------------------------------------- | ----------- | ------------------ | ---- | ------ | ------ | -------- | ----------- | ---------------- |
| **pencere** | **MIT** | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ |
| [PhotoSwipe v5](https://github.com/dimsemenov/PhotoSwipe) | MIT | ✅ | ✅ | plugin | plugin | ~ | ~ | ❌ |
| [GLightbox](https://github.com/biati-digital/glightbox) | MIT | ✅ | ~ | ✅ | ❌ | ❌ | ~ | ❌ |
| [Fancybox v6 (@fancyapps/ui)](https://github.com/fancyapps/ui) | **GPL / ₺** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
| [yet-another-react-lightbox](https://github.com/igordanchenko/yet-another-react-lightbox) | MIT | React only | ~ | plugin | plugin | ✅ | ✅ | ❌ |
| [lightGallery](https://github.com/sachinchoolur/lightGallery) | **GPL / ₺** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
| [basicLightbox](https://github.com/electerious/basicLightbox) | MIT | ✅ | ❌ | ❌ | ❌ | ~ | ❌ | ❌ |
| [Spotlight.js](https://github.com/nextapps-de/spotlight) | Apache | ✅ | ~ | ✅ | ❌ | ~ | ❌ | ❌ |
| [Swiper (lightbox mode)](https://github.com/nolimits4web/swiper) | MIT | ✅ | ~ | ❌ | ✅ | ✅ | ~ | ❌ |
Key differentiators:
- **License freedom.** Fancybox and lightGallery — the two most feature-complete options — are GPL/commercial. `pencere` is MIT end to end.
- **Zero runtime dependencies.** Framework adapters are optional peer deps.
- **WCAG 2.2 AA from the start.** APG Dialog + Carousel patterns, focus trap with shadow-DOM-aware tabbable detection, 44×44 target sizes, `prefers-reduced-motion` respected, `forced-colors` mapping for Windows High Contrast.
- **Strict CSP compatible.** Zero inline styles. Stylesheet ships through `adoptedStyleSheets` (no `style-src` impact) with a `
```
### React
```tsx
import { useLightbox } from "pencere/react"
function Gallery() {
const { open } = useLightbox({
items: [{ type: "image", src: "/a.jpg", alt: "A" }],
useNativeDialog: true,
})
return
}
```
### Vue 3
```ts
import { usePencere } from "pencere/vue"
const { open } = usePencere({
items: [{ type: "image", src: "/a.jpg", alt: "A" }],
})
```
### Svelte
```svelte
```
### Web Component
```html