> ## Documentation Index
> Fetch the complete documentation index at: https://framalabdocs.dcmxstudio.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Quickstart
> Fetch your first photo in under 5 minutes.
## Prerequisites
* A Framalab account with at least one project that has approved photos
* A gallery token — see [Authentication](/concepts/authentication)
## 1. Install
```bash pnpm theme={null}
pnpm add @dcmx-studio/framalab-sdk
```
```bash npm theme={null}
npm install @dcmx-studio/framalab-sdk
```
```bash yarn theme={null}
yarn add @dcmx-studio/framalab-sdk
```
## 2. Initialize the client
Store both values as environment variables — never hardcode them in source.
```env .env.local theme={null}
FRAMALAB_URL=https://panel.yourdomain.com
FRAMALAB_TOKEN=your-gallery-token
```
```ts client.ts theme={null}
import { createFramalabClient } from "@dcmx-studio/framalab-sdk"
const client = createFramalabClient({
baseUrl: process.env.FRAMALAB_URL!,
token: process.env.FRAMALAB_TOKEN!,
})
```
## 3. Fetch photos
```ts fetch-photos.ts theme={null}
const photos = await client.getPhotos()
for (const photo of photos) {
const thumb = photo.versions.find(v => v.versionType === "webp_thumb")
console.log(photo.id, thumb?.url)
}
```
## 4. Render (vanilla JS)
This example runs entirely in the browser and is for illustration only. In production, never expose `FRAMALAB_TOKEN` client-side — fetch data server-side (SSR, SSG, or a server route) so the token stays on the server.
```html index.html theme={null}
```
You should see all approved photos from your project rendered in the page.
## Next steps
thumb vs medium vs full — when to use each
Custom resize, format, and quality transforms
Handle auth and server errors gracefully