Render mockups from an Express app

Render from a route

The route takes an artwork URL and answers with the finished image, using the key and the two UUIDs an upload returned.

.env

SUDOMOCK_API_KEY=sm_your_api_key
MOCKUP_UUID=the_mockup_uuid
SMART_OBJECT_UUID=the_smart_object_uuid

server.mjs

import express from 'express'
import SudoMock, { SudoMockError } from 'sudomock'

const client = new SudoMock()
const app = express()

app.use(express.json())

app.post('/mockups/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)
  }
})

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)

The handler runs on Express 4 and 5. Mount express.json() before the route, or req.body is undefined by the time the handler reads it, and read it as req.body ?? {}, because Express 5 leaves it undefined when a request carries no JSON. Express 4 does not hand a rejected promise to the error middleware, which is why the handler calls next(error) itself. A client side failure, such as a timed out connection, reports status as 0, so the middleware answers 502 instead. Raise the express.json() limit if you post artwork inline as base64.

Get started

Learn

Resources

Render mockups from an Express app

Prerequisites

Guide

Examples

Create a mockup from a PSD

Render a PSD mockup

Retrieve the current account

Error codes

Create a webhook endpoint

Fit and blend modes

​Prerequisites

​Guide

​Examples