Quickstart

Prerequisites

A Framalab account with at least one project that has approved photos
A gallery token — see Authentication

1. Install

pnpm add @dcmx-studio/framalab-sdk

npm install @dcmx-studio/framalab-sdk

yarn add @dcmx-studio/framalab-sdk

2. Initialize the client

Store both values as environment variables — never hardcode them in source.

.env.local

FRAMALAB_URL=https://panel.yourdomain.com
FRAMALAB_TOKEN=your-gallery-token

client.ts

import { createFramalabClient } from "@dcmx-studio/framalab-sdk"

const client = createFramalabClient({
  baseUrl: process.env.FRAMALAB_URL!,
  token: process.env.FRAMALAB_TOKEN!,
})

3. Fetch photos

fetch-photos.ts

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.

index.html

<!DOCTYPE html>
<html>
<body>
  <div id="gallery"></div>

  <script type="module">
    import { createFramalabClient } from "@dcmx-studio/framalab-sdk"

    const client = createFramalabClient({
      baseUrl: "https://panel.yourdomain.com",
      token: "your-gallery-token", // illustration only — use server-side in production
    })

    const photos = await client.getPhotos()
    const gallery = document.getElementById("gallery")

    for (const photo of photos) {
      const version = photo.versions.find(v => v.versionType === "webp_medium")
      if (!version) continue
      const img = document.createElement("img")
      img.src = version.url
      img.width = version.width ?? 1200
      img.height = version.height ?? 800
      gallery.appendChild(img)
    }
  </script>
</body>
</html>

You should see all approved photos from your project rendered in the page.

Next steps

Photo Versions

thumb vs medium vs full — when to use each

getMediaUrl

Custom resize, format, and quality transforms

Error Handling

Handle auth and server errors gracefully

Get Started

SDK Reference

Concepts

Examples

Prerequisites

1. Install

2. Initialize the client

3. Fetch photos

4. Render (vanilla JS)

Next steps

Photo Versions

getMediaUrl

Error Handling

​Prerequisites

​1. Install

​2. Initialize the client

​3. Fetch photos

​4. Render (vanilla JS)

​Next steps

Photo Versions

getMediaUrl

Error Handling

Prerequisites

1. Install

2. Initialize the client

3. Fetch photos

4. Render (vanilla JS)

Next steps