Render mockups in Cloudflare Workers

Build a Cloudflare Worker that renders SudoMock mockups.

Prerequisites

An API key, carried in the x-api-key header that Authentication describes.
A PSD reachable over HTTPS, prepared as Preparing a PSD describes.
A Cloudflare Worker with a bundling setup, from npm create cloudflare.

Guide

Install

Create the project with C3, Cloudflare’s generator, and choose the Hello World template.

npm create cloudflare

pnpm create cloudflare

yarn create cloudflare

Store the API key

A secret stays with the deployed Worker, so the key never reaches your repository. For wrangler dev, put the same name in a .dev.vars file you do not commit.

npx wrangler secret put SUDOMOCK_API_KEY

Render from the Worker

The Worker reads the key from env, posts one render and hands back the finished image. Both UUIDs come from a single upload you run once, which Create a mockup from a PSD walks through, and neither of them is secret.

src/index.js

const MOCKUP_UUID = "8f2c1d90-6b4e-4a37-9e55-0d1c7a3f21b8";
const SMART_OBJECT = "b41a7e52-93c8-4d61-8f07-2ae5c9d04713";

export default {
  async fetch(request, env) {
    const { artwork_url } = await request.json();

    const response = await fetch(
      "https://api.sudomock.com/api/v1/renders",
      {
        method: "POST",
        headers: {
          "x-api-key": env.SUDOMOCK_API_KEY,
          "content-type": "application/json",
        },
        body: JSON.stringify({
          mockup_uuid: MOCKUP_UUID,
          smart_objects: [
            {
              uuid: SMART_OBJECT,
              asset: { url: artwork_url, fit: "crop" },
            },
          ],
        }),
      },
    );

    const render = await response.json();

    if (!response.ok) {
      return Response.json(render, { status: response.status });
    }

    return Response.json({
      image: render.data.print_files[0].export_path,
    });
  },
};

A failure arrives as a JSON body carrying error_code, a readable message and a details.suggestion, which the Worker hands back with the status it arrived on. Errors lists the codes.

Deploy

Deploy, then POST an artwork URL to the address wrangler prints. The answer carries the finished image.

npx wrangler deploy

Next steps

Create a mockup from a PSD

The upload that hands you both UUIDs.

Render a PSD mockup

Every field the render body accepts.

Retrieve a single job

Poll a render sent with is_async.

Errors

Every error code, and which are worth retrying.

Webhooks

Let a queued render call a second route.

Fit and blend modes

What fit and blending_mode change.

Get started

Learn

Resources

Render mockups in Cloudflare Workers

Prerequisites

Guide

Next steps

Create a mockup from a PSD

Render a PSD mockup

Retrieve a single job

Errors

Webhooks

Fit and blend modes

​Prerequisites

​Guide

​Next steps

Create a mockup from a PSD

Render a PSD mockup

Retrieve a single job

Errors

Webhooks

Fit and blend modes

Prerequisites

Guide

Next steps