emdash-popcase

A native EmDash image and video viewer powered by Yet Another React Lightbox.

• Open body images and galleries with zoom, captions, and optional thumbnails.
• View linked video files and YouTube videos in the same viewer.
• Explore camera, lens, and exposure information in an optional EXIF panel.
• Navigate with a keyboard or touch, with image links available without JavaScript.

Live demo

Installation

Requires EmDash 1.3.1+, Astro 7, React, React DOM, and @astrojs/react.

pnpm add emdash-popcase

Add Popcase to your existing astro.config.ts or astro.config.mjs, keeping your database, storage, and other plugins. Register react() only once and place popcaseIntegration() before emdash().

import { defineConfig } from "astro/config";
import react from "@astrojs/react";
import emdash from "emdash/astro";
import { popcase, popcaseIntegration } from "emdash-popcase";

export default defineConfig({
  integrations: [
    react(),
    popcaseIntegration(),
    emdash({
      // Keep your existing database and storage configuration.
      plugins: [popcase()],
    }),
  ],
});

Rebuild and redeploy. See the setup guide for integration requirements and configuration details.

To adjust viewer settings, open Popcase in the admin sidebar or visit /_emdash/admin/plugins/popcase/settings.

Screenshots

Youtube Support

Auto-detect YouTube links.

Photo Information

View the EXIF information of the photo.

Settings

Configurable settings for the viewer.

Documentation

• Setup, settings, and supported content
• Photo information and standalone EXIF plugin
• Development and verification
• Releasing to npm

Development

Use Node.js 24+ and the pnpm version in package.json.

pnpm install --frozen-lockfile
pnpm dev

The self-contained example/ site includes synthetic media. Build commands, tests, fixture scenarios, and local checkout instructions are in the development guide.

License

MIT. Dependencies retain their own licenses.