---
title: "Using PhotoSwipe in Astro to Build an Image Gallery"
description: "How to Build an image gallery in an Astro application using PhotoSwipe?"
source: "https://www.launchfa.st/blog/photoswipe-astro"
author: "Rishi Raj Jain"
created_at: 2024-04-24T00:00:00.000Z
updated_at: 2026-07-02T00:00:00.000Z
---
> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.
In this guide, you will learn how to use PhotoSwipe in an Astro application. You will go through the process of setting up a new Astro project, installing the PhotoSwipe module, and turning your image collection into an image gallery.
## Prerequisites
You'll need the following:
- [Node.js 20](https://nodejs.org/en/blog/announcements/v20-release-announce) or later
## Table Of Contents
- [Create a new Astro application](#create-a-new-astro-application)
- [Integrate PhotoSwipe in your Astro project](#integrate-photoswipe-in-your-astro-project)
- [Install PhotoSwipe SDK](#install-photoswipe-sdk)
- [Create an Image Collection](#create-an-image-collection)
- [Turn your Image Collection into an Image Gallery](#turn-your-image-collection-into-an-image-gallery)
- [Build and Test your Astro application locally](#build-and-test-your-astro-application-locally)
- [Source Code](#source-code)
- [Conclusion](#conclusion)
## Create a new Astro application
Let’s get started by creating a new Astro project. Execute the following command:
```bash
npm create astro@latest my-app
```
`npm create astro` is the recommended way to scaffold an Astro project quickly.
When prompted, choose:
- `Empty` when prompted on how to start the new project.
- `Yes` when prompted if you plan to write TypeScript.
- `Strict` when prompted how strict TypeScript should be.
- `Yes` when prompted to install dependencies.
- `Yes` when prompted to initialize a git repository.
Once that’s done, you can move into the project directory and start the app:
```bash
cd my-app
npm run dev
```
The app should be running on [localhost:4321](http://localhost:4321/).
Now, let's move on to integrate PhotoSwipe in your Astro application.
## Integrate PhotoSwipe in your Astro project
### Install PhotoSwipe SDK
Execute the command below to install the necessary package for using PhotoSwipe:
```bash
npm install photoswipe
npm install -D @types/photoswipe
```
The command installs the following library:
- `photoswipe`: A framework-agnostic JavaScript Image Gallery library.
- `@types/photoswipe`: Type definitions for `photoswipe` library.
### Create an Image Collection
Using PhotoSwipe (with the default configuration) requires two things:
- A parent HTML element (most commonly, a `
```
### Turn your Image Collection into an Image Gallery
In minimal lines of code with PhotoSwipe, you can turn your collection of images into an interactive image gallery. You can easily do that in 3 steps:
- Import the `PhotoSwipe` css.
- Import the `PhotoSwipe` module.
- Create a lightbox using `PhotoSwipe`.
Refer to the script below to do the above steps in this example:
```astro {38-54}
---
// File: src/pages/index.astro // [!code focus]
import { ViewTransitions } from "astro:transitions";
---
// [!code focus]
Astro
In this guide, you will learn how to use PhotoSwipe in an Astro application. You will go through the process of setting up a new Astro project, installing the PhotoSwipe module, and turning your image collection into an image gallery.
## Prerequisites
You'll need the following:
- [Node.js 20](https://nodejs.org/en/blog/announcements/v20-release-announce) or later
## Table Of Contents
- [Create a new Astro application](#create-a-new-astro-application)
- [Integrate PhotoSwipe in your Astro project](#integrate-photoswipe-in-your-astro-project)
- [Install PhotoSwipe SDK](#install-photoswipe-sdk)
- [Create an Image Collection](#create-an-image-collection)
- [Turn your Image Collection into an Image Gallery](#turn-your-image-collection-into-an-image-gallery)
- [Build and Test your Astro application locally](#build-and-test-your-astro-application-locally)
- [Source Code](#source-code)
- [Conclusion](#conclusion)
## Create a new Astro application
Let’s get started by creating a new Astro project. Execute the following command:
```bash
npm create astro@latest my-app
```
`npm create astro` is the recommended way to scaffold an Astro project quickly.
When prompted, choose:
- `Empty` when prompted on how to start the new project.
- `Yes` when prompted if you plan to write TypeScript.
- `Strict` when prompted how strict TypeScript should be.
- `Yes` when prompted to install dependencies.
- `Yes` when prompted to initialize a git repository.
Once that’s done, you can move into the project directory and start the app:
```bash
cd my-app
npm run dev
```
The app should be running on [localhost:4321](http://localhost:4321/).
Now, let's move on to integrate PhotoSwipe in your Astro application.
## Integrate PhotoSwipe in your Astro project
### Install PhotoSwipe SDK
Execute the command below to install the necessary package for using PhotoSwipe:
```bash
npm install photoswipe
npm install -D @types/photoswipe
```
The command installs the following library:
- `photoswipe`: A framework-agnostic JavaScript Image Gallery library.
- `@types/photoswipe`: Type definitions for `photoswipe` library.
### Create an Image Collection
Using PhotoSwipe (with the default configuration) requires two things:
- A parent HTML element (most commonly, a `