Render mockups from an Express app

This page puts a rendered mockup behind an Express route. You upload a PSD once, then every request that arrives with an artwork URL comes back with a finished image URL.

Hand this to a coding agent before it writes SudoMock calls in Express.

Open in Cursor

Prerequisites

Node 20 or later, with Express 4 or 5. The files below are ESM, so set "type": "module" in your package.json. A CommonJS project can reach the same client with const { SudoMock } = require('sudomock').
An API key. Create one, then export it. Keys begin with sm_ and travel in the x-api-key header.
A PSD reachable over HTTPS. Preparing a PSD covers what to check before the first upload.
Render with Node.js if you want the same two calls without a framework around them.

Guide

Install

npm install express sudomock

pnpm add express sudomock

yarn add express sudomock

Put the key in the environment rather than in the code. The client reads SUDOMOCK_API_KEY when you construct it with no argument.

export SUDOMOCK_API_KEY=sm_your_api_key

Confirm it answers before you write a route:

curl "https://api.sudomock.com/api/v1/me" \
  -H "x-api-key: $SUDOMOCK_API_KEY"

Upload the template once

Uploading returns the layers you can address later, each with its own UUID. This belongs in a setup script, not in the path that serves requests.

upload.js

import SudoMock from 'sudomock'

const client = new SudoMock()

const mockup = await client.uploads.create({
  psdFileUrl: 'https://example.com/heavyweight-tee.psd',
  psdName: 'Heavyweight tee front',
})

console.log('mockup', mockup.uuid)

for (const layer of mockup.smartObjects) {
  console.log('smart object', layer.uuid, layer.name)
}

Run it, then keep the two UUIDs it prints:

node upload.js
export MOCKUP_UUID=the_mockup_uuid
export SMART_OBJECT_UUID=the_smart_object_uuid

A template you uploaded last month renders today without being sent again. One upload serves every render after it.

Add the render route

Keep the render in its own router, so the server file stays about wiring. The handler reads the artwork URL, answers 400 when it is missing, and hands anything the API raises to the error middleware. It reads the body through ?? {}, because Express 5 leaves req.body undefined when a request arrives without JSON, and the check answers 400 either way.

routes/mockups.js

import { Router } from 'express'
import SudoMock from 'sudomock'

const client = new SudoMock()
const router = Router()

router.post('/render', async (req, res, next) => {
  const { artworkUrl } = req.body ?? {}

  if (typeof artworkUrl !== 'string') {
    res.status(400).json({ error: 'artworkUrl is required' })
    return
  }

  try {
    const render = await client.renders.create({
      mockupId: process.env.MOCKUP_UUID,
      smartObjects: [
        {
          uuid: process.env.SMART_OBJECT_UUID,
          asset: { url: artworkUrl },
        },
      ],
      exportOptions: {
        imageFormat: 'webp',
        imageSize: 2048,
      },
    })

    res.json({ url: render.url })
  } catch (error) {
    next(error)
  }
})

export default router

Now mount it. express.json() has to run before the route, or req.body is undefined by the time the handler reads it.

server.js

import express from 'express'
import { SudoMockError } from 'sudomock'
import mockups from './routes/mockups.js'

const app = express()

app.use(express.json())
app.use('/mockups', mockups)

app.use((error, req, res, next) => {
  if (error instanceof SudoMockError) {
    res.status(error.status || 502).json({ code: error.code })
    return
  }

  next(error)
})

app.listen(3000)

express.json() accepts 100kb by default, which is room enough for an artwork URL. Raise its limit if you accept artwork inline as base64 instead.

Answer the failures in one place

Everything the client raises is a SudoMockError carrying status and code, so a single middleware covers every route that renders. It is the last thing mounted and it takes four arguments, which is how Express tells an error handler from an ordinary one.Express 4 does not hand a rejected promise to that middleware, which is why the handler calls next(error) itself. Express 5 forwards it, and the explicit call is correct on both.A client side failure, such as a timed out connection, reports status as 0. Sending that straight back would answer with a status no client understands, so the middleware falls back to 502.Start the server and send it an artwork:

node server.js

curl -X POST http://localhost:3000/mockups/render \
  -H "Content-Type: application/json" \
  -d '{"artworkUrl":"https://example.com/artwork.png"}'

The answer carries url, the finished image. How the artwork meets the smart object is set by asset.fit, described in Fit and blend modes.

A render resolved in the handler holds the HTTP request open until the image is ready. Pass isAsync as true and the call resolves with a job instead, so the route can answer at once and let a webhook deliver the finished image.

Error codes lists every code, its status, and whether retrying it can help.

Next steps

Webhooks

Give a background render its own Express route to report back to.

SDK reference

Every resource on the client, in Node and in Python.

Get started

Learn

Resources

Render mockups from an Express app

Prerequisites

Guide

Next steps

Webhooks

SDK reference

​Prerequisites

​Guide

​Next steps

Webhooks

SDK reference

Prerequisites

Guide

Next steps