NestJS icon

NestJS

Put the render call in a NestJS controller and your API key never reaches the browser. Imejis returns the finished image directly in the response, so the handler is a single upstream request, with nothing to poll and no webhook to receive.

Set two environment variables first: IMEJIS_API_KEY (from your dashboard) and IMEJIS_DESIGN_ID (any design's id). The fields you override are component.property pairs: headline.text, title.color, image.image; only what you send changes, and a design's overridable fields are listed in its Share / API panel.

One NestJS detail worth knowing: return a StreamableFile, not a bare Buffer. Nest serialises a Buffer as JSON ({"type":"Buffer","data":[…]}), which turns a 30KB PNG into 100KB of numbers that no browser will render.

Each handler below comes from a real NestJS app that is booted in Docker and called end to end before this page ships.

An endpoint that returns the generated imageAn endpoint that returns the generated image

A route in your app that renders on demand and streams the image straight back, so your render key never reaches the browser. This is the shape to use behind an <img src> on a page you control. ?format= picks png, jpeg, webp or pdf, and the route answers with the content type that matches it. A PDF labelled image/png is a file the browser, the email client and Slack all refuse to open.

NestJS: An endpoint that returns the generated image
import "reflect-metadata"
import {
  Body,
  Controller,
  Get,
  Header,
  NotFoundException,
  Query,
  StreamableFile,
} from "@nestjs/common"
import { Post as HttpPost } from "@nestjs/common"
 
const API_KEY = process.env.IMEJIS_API_KEY
const DESIGN_ID = process.env.IMEJIS_DESIGN_ID
const BASE = process.env.IMEJIS_RENDER_URL ?? "https://render.imejis.io"
const HEADERS = { "dma-api-key": API_KEY, "Content-Type": "application/json" }
 
@Controller()
export class ImejisController {
  // The formats the render API accepts. The routes below pass `?format=`
  // through when one is asked for; with none, the render host's default
  // (jpeg) applies.
  private readonly FORMATS = ["png", "jpeg", "webp", "pdf"]
 
  // Render on demand and return the image straight back. The render key stays
  // on the server, so it never reaches the browser — point an <img src> here.
  //
  // `?format=` decides what comes back — png · jpeg · webp · pdf. The type
  // goes on StreamableFile rather than in a @Header decorator, because a
  // decorator is fixed at class-definition time and this one has to follow the
  // format: a PDF labelled `image/png` is a file nothing will open.
  @Get("og")
  // Renders are deterministic, so cache aggressively at the edge/CDN — and
  // every request to the render API is one metered render.
  @Header("Cache-Control", "public, immutable, no-transform, max-age=31536000")
  async ogImage(
    @Query("title") title: string,
    @Query("subtitle") subtitle: string,
    @Query("format") requested: string,
  ) {
    const params = new URLSearchParams()
    if (this.FORMATS.includes(requested)) params.set("format", requested)
 
    const upstream = await fetch(`${BASE}/v1/${DESIGN_ID}?${params}`, {
      method: "POST",
      headers: HEADERS,
      body: JSON.stringify({
        "headline.text": title ?? "Hello from NestJS",
        "subtitle.text": subtitle ?? "",
      }),
    })
    if (!upstream.ok) throw new Error(`render failed: ${upstream.status}`)
    // StreamableFile, not a bare Buffer: Nest serialises a Buffer as JSON
    // ({"type":"Buffer","data":[…]}), which turns a 30KB PNG into 100KB of
    // numbers that no browser will render.
    return new StreamableFile(Buffer.from(await upstream.arrayBuffer()), {
      type: upstream.headers.get("content-type") ?? "image/jpeg",
    })
  }
}
 
// app.module.ts
// @Module({ controllers: [ImejisController] })
// export class AppModule {}

One endpoint every size and jpeg qualityOne endpoint, every size, and JPEG quality

A multi-size design carries several canvases: an OG image, a square post, a vertical story. ?variation=<id> picks which one the route renders, and omitting it gives the base size, so one endpoint serves every size your pages ask for. ?quality= trades file size for fidelity on JPEG only; png, webp and pdf ignore it.

NestJS: One endpoint, every size, and JPEG quality
import "reflect-metadata"
import {
  Body,
  Controller,
  Get,
  Header,
  NotFoundException,
  Query,
  StreamableFile,
} from "@nestjs/common"
import { Post as HttpPost } from "@nestjs/common"
 
const API_KEY = process.env.IMEJIS_API_KEY
const DESIGN_ID = process.env.IMEJIS_DESIGN_ID
const BASE = process.env.IMEJIS_RENDER_URL ?? "https://render.imejis.io"
const HEADERS = { "dma-api-key": API_KEY, "Content-Type": "application/json" }
 
@Controller()
export class ImejisController {
  // The formats the render API accepts. The routes below pass `?format=`
  // through when one is asked for; with none, the render host's default
  // (jpeg) applies.
  private readonly FORMATS = ["png", "jpeg", "webp", "pdf"]
 
  // One design, several canvases — an OG image, a square post, a vertical
  // story. `?variation=<id>` picks which one you get; with none you get the
  // base size. Map YOUR OWN size names to the ids (the design's Share / API
  // panel lists them) so a page asks for "story", not for an id.
  //
  // `?quality=` trades file size for fidelity on JPEG only — png, webp and
  // pdf ignore it.
  private readonly SIZES: Record<string, string | null> = {
    og: null,
    story: process.env.IMEJIS_VARIATION_ID ?? "story",
  }
 
  @Get("og-size")
  @Header("Cache-Control", "public, immutable, no-transform, max-age=31536000")
  async ogSize(
    @Query("size") size: string,
    @Query("title") title: string,
    @Query("format") requested: string,
    @Query("quality") quality: string,
  ) {
    // A key that is absent is an unknown size; one that is `null` is the base
    // canvas, which is a render with no `variation` at all.
    const variation = this.SIZES[size ?? "og"]
    if (variation === undefined) {
      throw new NotFoundException(`unknown size: ${size}`)
    }
 
    const params = new URLSearchParams()
    if (variation) params.set("variation", variation)
    if (this.FORMATS.includes(requested)) params.set("format", requested)
    if (Number(quality) >= 1 && Number(quality) <= 100) {
      params.set("quality", quality)
    }
 
    const upstream = await fetch(`${BASE}/v1/${DESIGN_ID}?${params}`, {
      method: "POST",
      headers: HEADERS,
      body: JSON.stringify({ "headline.text": title ?? "Every size" }),
    })
    if (!upstream.ok) throw new Error(`render failed: ${upstream.status}`)
    return new StreamableFile(Buffer.from(await upstream.arrayBuffer()), {
      type: upstream.headers.get("content-type") ?? "image/jpeg",
    })
  }
}
 
// app.module.ts
// @Module({ controllers: [ImejisController] })
// export class AppModule {}

An endpoint that returns a hosted or signed image urlAn endpoint that returns a hosted or signed image URL

Ask for ?delivery=hosted (a public URL) or ?delivery=signed (a private, expiring one) and hand the URL to the caller instead of the bytes, which is what you want for an email, a webhook payload, or a share card.

NestJS: An endpoint that returns a hosted or signed image URL
import "reflect-metadata"
import {
  Body,
  Controller,
  Get,
  Header,
  NotFoundException,
  Query,
  StreamableFile,
} from "@nestjs/common"
import { Post as HttpPost } from "@nestjs/common"
 
const API_KEY = process.env.IMEJIS_API_KEY
const DESIGN_ID = process.env.IMEJIS_DESIGN_ID
const BASE = process.env.IMEJIS_RENDER_URL ?? "https://render.imejis.io"
const HEADERS = { "dma-api-key": API_KEY, "Content-Type": "application/json" }
 
@Controller()
export class ImejisController {
  // The formats the render API accepts. The routes below pass `?format=`
  // through when one is asked for; with none, the render host's default
  // (jpeg) applies.
  private readonly FORMATS = ["png", "jpeg", "webp", "pdf"]
 
  // Ask for a stored URL instead of bytes. `hosted` is public and permanent;
  // `signed` is private and expires (`expiresIn` is minutes).
  @Get("og-url")
  async ogUrl(
    @Query("title") title: string,
    @Query("private") isPrivate: string,
    @Query("format") requested: string,
  ) {
    const delivery = isPrivate ? "signed" : "hosted"
    const params = new URLSearchParams({ delivery })
    // The stored URL carries the extension of the format it was rendered in,
    // so pass the format through here too — a recipient that sniffs by
    // extension (an email client, a Slack unfurl) needs `.pdf` to say pdf.
    if (this.FORMATS.includes(requested)) params.set("format", requested)
    if (delivery === "signed") params.set("expiresIn", "30")
 
    const upstream = await fetch(`${BASE}/v1/${DESIGN_ID}?${params}`, {
      method: "POST",
      headers: HEADERS,
      body: JSON.stringify({ "headline.text": title ?? "Shared card" }),
    })
    const stored = await upstream.json()
    return {
      url: stored.url,
      format: stored.format,
      expiresAt: stored.expiresAt ?? null,
    }
  }
}
 
// app.module.ts
// @Module({ controllers: [ImejisController] })
// export class AppModule {}

Bulk image generation from a routeBulk image generation from a route

One POST to /bulk renders many images, a row per record or one per size, and returns a URL for each, in the order you sent them.

NestJS: Bulk image generation from a route
import "reflect-metadata"
import {
  Body,
  Controller,
  Get,
  Header,
  NotFoundException,
  Query,
  StreamableFile,
} from "@nestjs/common"
import { Post as HttpPost } from "@nestjs/common"
 
const API_KEY = process.env.IMEJIS_API_KEY
const DESIGN_ID = process.env.IMEJIS_DESIGN_ID
const BASE = process.env.IMEJIS_RENDER_URL ?? "https://render.imejis.io"
const HEADERS = { "dma-api-key": API_KEY, "Content-Type": "application/json" }
 
@Controller()
export class ImejisController {
  // The formats the render API accepts. The routes below pass `?format=`
  // through when one is asked for; with none, the render host's default
  // (jpeg) applies.
  private readonly FORMATS = ["png", "jpeg", "webp", "pdf"]
 
  // One POST renders many images and returns a URL for each, in the order sent
  // — a row per record, or one per size.
  @HttpPost("cards")
  async cards(@Body() body: { rows?: { name: string; role: string }[] }) {
    const upstream = await fetch(`${BASE}/bulk`, {
      method: "POST",
      headers: HEADERS,
      body: JSON.stringify({
        designId: DESIGN_ID,
        delivery: "hosted",
        format: "png",
        data: (body.rows ?? []).map((row) => ({
          "headline.text": row.name,
          "subtitle.text": row.role,
        })),
      }),
    })
    const bulk = await upstream.json()
    return { summary: bulk.summary, urls: bulk.results.map((r) => r.url ?? null) }
  }
}
 
// app.module.ts
// @Module({ controllers: [ImejisController] })
// export class AppModule {}

Using the image url directly in a templateUsing the image URL directly in a template

For a public design you can skip the proxy entirely and point an <img> at the render URL with the field values in the query string. Keep the proxy when the key must stay private. That is the right default.

NestJS: Using the image URL directly in a template
import "reflect-metadata"
import {
  Body,
  Controller,
  Get,
  Header,
  NotFoundException,
  Query,
  StreamableFile,
} from "@nestjs/common"
import { Post as HttpPost } from "@nestjs/common"
 
const API_KEY = process.env.IMEJIS_API_KEY
const DESIGN_ID = process.env.IMEJIS_DESIGN_ID
const BASE = process.env.IMEJIS_RENDER_URL ?? "https://render.imejis.io"
const HEADERS = { "dma-api-key": API_KEY, "Content-Type": "application/json" }
 
@Controller()
export class ImejisController {
  // The formats the render API accepts. The routes below pass `?format=`
  // through when one is asked for; with none, the render host's default
  // (jpeg) applies.
  private readonly FORMATS = ["png", "jpeg", "webp", "pdf"]
 
  // For a PUBLIC design you can skip the proxy and point an <img> straight at
  // the render URL. Keep the proxy whenever the key must stay private — that
  // is the right default, and what /og above is for.
  @Get("card")
  @Header("Content-Type", "text/html")
  card(@Query("title") title: string) {
    const url = new URL(`${BASE}/v1/${DESIGN_ID}`)
    url.searchParams.set("dma-api-key", API_KEY)
    url.searchParams.set("headline.text", title ?? "Straight from a URL")
    return `<img src="${url}" width="1200" height="630" alt="Generated card" />`
  }
}
 
// app.module.ts
// @Module({ controllers: [ImejisController] })
// export class AppModule {}

The response is the raw image (`image/jpeg` by default). Choose the format with `?format=png|jpeg|webp|pdf` (default jpeg) and set JPEG quality with `?quality=1-100`. Store the result and get a URL back with `?delivery=hosted` (or `?delivery=signed&expiresIn=60`), and render a specific size of a multi-size design with `?variation=<id>`.

ParameterValuesDefaultWhat it does
?format=png · jpeg · webp · pdfjpegOutput image format.
?quality=1–100noneCompression quality for lossy output; ignored for other formats. (JPEG only)
?delivery=stream · hosted · signedstreamstream = raw image bytes (default); hosted = store + return a public URL; signed = store + return a time-limited URL.
?expiresIn=minutes60Signed-URL lifetime in minutes (default 60, max 10080 = 7 days). (delivery=signed only)
?variation=<size id>masterWhich multi-dimension SIZE to render. Omit or use "master" for the base size; an unknown id falls back to the master. (multi-size designs only)
  • PNG (?format=png): Lossless, supports transparency. Largest file.
  • JPEG (?format=jpeg): Smaller, lossy, no transparency. Quality adjustable.
  • WebP (?format=webp): Smallest, supports transparency. Modern browsers.
  • PDF (?format=pdf): Vector page, for print and documents.

See the delivery modes and generate images with the API guides.

Express has the same five handlers without the decorators, and the JavaScript page has the bare calls. The StreamableFile detail above is not optional: Nest serialises a bare Buffer as JSON, and a @Header decorator is fixed at class-definition time, so the content type has to travel with the file. Every call is one render; 100 a month are free, and pricing lists the tiers.