Framework integrations

Keenpix image delivery works with plain URLs, but the official MIT-licensed package family gives each framework its native integration shape. All adapters extend @keenpix/core, so URL construction, source normalization, proportional responsive dimensions, signing payloads, and transform parameters stay consistent.

pnpm add @keenpix/react
# or npm install @keenpix/react

Every adapter takes the same public delivery configuration:

import { createManagedKeenpixConfig } from '@keenpix/core'

const config = createManagedKeenpixConfig('website')

baseUrl and projectId are safe to expose in rendered HTML. Management API keys and signing secrets are server-only.

Core primitives

Use @keenpix/core when a framework has no dedicated adapter or when you are building an integration library:

import { createKeenpix, createImageAttributes } from '@keenpix/core'

const keenpix = createKeenpix(config)
const src = keenpix.url('/hero.jpg', { width: 1280, format: 'webp' })
const hinted = keenpix.url('/hero.jpg', { width: 'auto', dpr: 'auto' })
const attributes = createImageAttributes(config, {
  alt: 'Hero',
  src: '/hero.jpg',
  widths: [640, 960, 1280],
})

Transform URLs do not require the management SDK or an API key. Use @keenpix/sdk only from trusted server code when automating projects, domains, configuration, or prewarming.

Every framework adapter inherits width: 'auto' and dpr: 'auto' from @keenpix/core. The browser-facing packages never receive a signing secret; generate HMAC URLs in trusted server/build code with @keenpix/sdk/signing and pass the resulting URL to the framework integration. Project watermarks require no adapter option because the transform service applies them consistently.