Framework integrations

Keenpix has no SDK. Integrating it means producing the right URL and putting it in an <img> (or your framework's image component). There are two flavours:

1. Pluggable loaders — frameworks with a built-in image component you can point at a custom backend: Next.js and Nuxt.
2. URL builder + native <img> — everywhere else. A tiny helper builds the URL and you render a normal image with srcset for responsiveness.

The universal pattern

Drop this helper anywhere (it's framework-agnostic — plain TypeScript):

// keenpix.ts
const HOST = 'https://keenpix.example.com'
const PROJECT = 'YOUR_PROJECT_ID'

type Opts = { w?: number; h?: number; q?: number; fmt?: string; fit?: string; dpr?: number }

export function keenpix(src: string, opts: Opts = {}): string {
  const params = new URLSearchParams({ project: PROJECT })
  for (const [k, v] of Object.entries(opts)) {
    if (v != null) params.set(k, String(v))
  }
  return `${HOST}/img/${encodeURIComponent(src)}?${params.toString()}`
}

// A responsive srcset across common widths.
export function keenpixSrcSet(src: string, widths = [640, 960, 1280, 1920], opts: Opts = {}) {
  return widths.map((w) => `${keenpix(src, { ...opts, w })} ${w}w`).join(', ')
}

Then render a fully responsive, auto-format image with native HTML:

<img
  src="${keenpix('/hero.jpg', { w: 1280 })}"
  srcset="${keenpixSrcSet('/hero.jpg', [640, 960, 1280, 1920])}"
  sizes="100vw"
  loading="lazy"
  decoding="async"
  alt="Hero"
/>

Omitting fmt is the same as fmt=auto: Keenpix negotiates from the request's Accept header and returns AVIF, WebP, or JPEG. Add fmt: 'webp', fmt: 'avif', or fmt: 'svg' only when you want a fixed output format. SVG output is explicit; an SVG origin with fmt=auto is rasterized instead of returned as SVG.

Pick your framework

Don't see yours? If it can render an <img> tag, the universal pattern above already works — that includes Angular, Solid, Qwik, Gatsby, Laravel, Rails, Django, WordPress, and static-site generators.