Docs

Learn Refract in three taps.

Each step is a node. Press one to open it, follow the path, and you have shipped your first transform — a key, an origin, and one URL.

Quickstart

Three nodes to your first render.

Create a key and connect your origin

Create an API key, then point Refract at an image origin you already have — a bucket, a CMS, any public URL. There is no re-upload: originals are fetched on demand and cached at the edge, never stored permanently.

A neat stack of blank pale cards on a bright clean table — your untouched originals, fetched on demand.

Request your first transform

Append parameters to the source path. This one asks for a 1200px-wide render, the best format the browser accepts, and quality 80.

https://demo.refract.dev/hero.jpg?w=1200&fm=auto&q=80

Automate with the SDK

Build the same URL in code. The SDK returns a plain string you can drop into any src attribute.

@refract/js

import { refract } from "@refract/js";

const url = refract("hero.jpg", { width: 1200, format: "auto", quality: 80 });
// → https://demo.refract.dev/hero.jpg?w=1200&fm=auto&q=80

Reference

Ten parameters, chainable in any order.

Set them on the query string or through the SDK. Three are content-negotiated from the request and marked Negotiated.

w px Target width in pixels.

h px Target height in pixels.

fit covercontainfillcrop Resize mode against the requested box.

fm Negotiated jpegpngwebpavifauto Output format. auto negotiates AVIF, WebP, or JPEG from the request's Accept header.

q Negotiated 1–100 Quality. Default 75.

dpr Negotiated 1–3 Device pixel ratio for retina renders.

crop smartcenteredges Crop strategy. smart keeps the subject in frame.

rot 90180270 Rotation in degrees.

blur 0–100 Gaussian blur radius.

bg hex Background fill for fit=contain.

Caching & limits

Fast by default, purgeable on demand.

50 req/s Rate limit per key, on every tier.

30 days Transformed variants cached at the edge.

Instant Purge by URL or tag, any time.