Render mockups in Cloudflare Workers

A Worker already carries everything a render needs: fetch, URL, and a place to keep a secret. This page builds one with two routes, the first registering a Photoshop template and the second rendering artwork onto it.

Build a Cloudflare Worker that renders SudoMock mockups.

Open in Cursor

Prerequisites

An API key from API keys. Keys begin with sm_ and travel in the x-api-key header, as Authentication describes.
A PSD reachable over HTTPS. Preparing a PSD covers what the file needs before it is uploaded.
A Cloudflare account, and Node on your machine. Wrangler arrives with the project you create in the first step.

Guide

Install

Create the project with C3, Cloudflare’s project generator.

npm create cloudflare@latest -- sudomock-worker

pnpm create cloudflare@latest sudomock-worker

yarn create cloudflare sudomock-worker

Choose the Hello World template. The code below is JavaScript and lives in src/index.js.

Store the API key

A secret is set once and stays with the deployed Worker, so it never reaches your repository.

npx wrangler secret put SUDOMOCK_API_KEY

For wrangler dev, put the same name in a .dev.vars file and add that file to .gitignore.

.dev.vars

SUDOMOCK_API_KEY=sm_your_api_key

The two UUIDs a render addresses are not secret, so they belong in the configuration next to everything else.

wrangler.toml

name = "sudomock-worker"
main = "src/index.js"
compatibility_date = "2026-09-23"

[vars]
MOCKUP_UUID = "c315f78f-d2c7-4541-b240-a9372842de94"
SMART_OBJECT_UUID = "223e4567-e89b-12d3-a456-426614174001"

The key spends credits. Keep it in a secret, never in [vars] and never in a file you commit.

Render from the Worker

One helper sets the header and raises anything that is not a success. The two routes then read as the two calls they are.

src/index.js

const API = "https://api.sudomock.com";

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (request.method !== "POST") {
      return json({ error: "Use POST" }, 405);
    }

    try {
      if (url.pathname === "/templates") {
        const input = await request.json();
        const upload = await call(env, "/api/v1/psd/upload", {
          psd_file_url: input.psd_file_url,
          psd_name: input.psd_name,
        });

        return json({
          mockup_uuid: upload.data.uuid,
          smart_object: upload.data.smart_objects[0].uuid,
        });
      }

      if (url.pathname === "/renders") {
        const input = await request.json();
        const render = await call(env, "/api/v1/renders", {
          mockup_uuid: env.MOCKUP_UUID,
          smart_objects: [
            {
              uuid: env.SMART_OBJECT_UUID,
              asset: { url: input.artwork_url, fit: "crop" },
            },
          ],
          export_options: {
            image_format: "webp",
            image_size: 1920,
          },
        });

        return json({
          image: render.data.print_files[0].export_path,
        });
      }
    } catch (failure) {
      return json(
        failure.body ?? { error: "Bad request" },
        failure.status ?? 400,
      );
    }

    return json({ error: "Unknown route" }, 404);
  },
};

async function call(env, path, body) {
  const response = await fetch(API + path, {
    method: "POST",
    headers: {
      "x-api-key": env.SUDOMOCK_API_KEY,
      "content-type": "application/json",
    },
    body: JSON.stringify(body),
  });

  const payload = await response.json();

  if (!response.ok) {
    throw Object.assign(new Error("SudoMock call failed"), {
      status: response.status,
      body: payload,
    });
  }

  return payload;
}

function json(body, status = 200) {
  return new Response(JSON.stringify(body), {
    status,
    headers: { "content-type": "application/json" },
  });
}

Run it locally, POST a PSD URL to /templates, and move the two UUIDs it answers with into wrangler.toml. From then on /renders takes an artwork URL and nothing else.

npx wrangler dev

Read what comes back

A render answers with the finished image at data.print_files[0].export_path, which the Worker above hands back under a single key.

200

{
  "image": "https://cdn.sudomock.com/renders/c315f78f.webp"
}

A render failure carries error_code, a readable message and a details.suggestion. The helper passes that body through with the status it arrived on, so the caller sees the same reason the API gave. Branch on error_code and keep a default case, so an unfamiliar code degrades into a readable failure rather than a crash. Errors lists the codes and says which statuses are worth retrying.Waiting on the API costs the Worker network time rather than compute, so a long render does not press against a CPU ceiling. What it does hold is the caller’s connection. When that is the wrong trade, send is_async as true. The call answers 202 with a job_id straight away, which you either poll at GET /api/v1/jobs/{job_id} or let a webhook hand to a second route on the same Worker.Each API call is one subrequest, and Workers caps subrequests per invocation. A queue of renders belongs behind is_async rather than a loop inside one request.

Next steps

Webhooks

Let a queued render call a Worker route instead of being polled.

Errors

Every error code, and which statuses are worth retrying.

Fit and blend modes

What fit and blending_mode do to the finished image.

Get started

Learn

Resources

Render mockups in Cloudflare Workers

Prerequisites

Guide

Next steps

Webhooks

Errors

Fit and blend modes

​Prerequisites

​Guide

​Next steps

Webhooks

Errors

Fit and blend modes

Prerequisites

Guide

Next steps