JSDeveloper guide

Generate product mockups with Node.js

Generate product mockups with Node.js using native fetch and a single POST. Send your PSD template id and a design URL to the SudoMock render endpoint and get back a finished image URL. Start with 500 one-time renders, then choose a published monthly volume plan.

Your PSD renders with its Smart Objects, blend modes, smart filters, and perspective warp intact, plus editable text layers. One template becomes thousands of on-product variations from a Node script, a queue worker, or a serverless function.

Start Free, 500 CreditsRead the API Docs
2,000+open-licensed font families25parallel renders on Scale500free renders, no card5Krenders on Starter

Set your API key (Node 18+ has fetch built in)

Grab an API key from your dashboard, then keep it in an environment variable. Every request authenticates with the x-api-key header.

Set your API key (Node 18+ has fetch built in)
1# Node 18 and newer include fetch, so there is nothing to install.
2export SUDOMOCK_API_KEY="sm_your_api_key"

Render your first mockup

One POST to the render endpoint composites your design into the PSD template and returns a finished image URL. Smart Objects, blend modes, smart filters, and perspective warp all render from your real file, so the output matches the template you built.

Render, Node.js
1const API_BASE = "https://api.sudomock.com/api/v1";
2const API_KEY = process.env.SUDOMOCK_API_KEY;
3

4const res = await fetch(`${API_BASE}/renders`, {
5  method: "POST",
6  headers: {
7    "Content-Type": "application/json",
8    "x-api-key": API_KEY,
9  },
10  body: JSON.stringify({
11    mockup_uuid: "c315f78f-d2c7-4541-b240-a9372842de94",
12    smart_objects: [
13      {
14        uuid: "128394ee-6758-4f2f-aa36-e2b19b152bd9",
15        asset: { url: "https://your-domain.com/design.png", fit: "cover" },
16      },
17    ],
18    export_options: { image_format: "webp", image_size: 1920, quality: 90 },
19  }),
20});
21

22const { data } = await res.json();
23console.log("Mockup ready:", data.print_files[0].export_path);

How it works

  1. 1Upload a PSD once to get its mockup id and the ids of its Smart Objects and text layers.
  2. 2Call the render endpoint with fetch, one request per design variation.
  3. 3Read data.print_files[0].export_path from the JSON response and store the finished image URL.

Personalize text layers from Node.js

SudoMock renders the text layers in your PSD, so you can swap the wording, font, size, and color at render time and get back an image that keeps the look the designer built.

  • 2,000+ open-licensed font families, free for commercial use
  • Custom TTF and OTF font upload, up to 5 MB each, on Pro and Scale
  • Styled segments: mixed-style layers stay editable run by run
  • Box text: area text wraps inside its box and clips exactly as designed
Text layers, Node.js
1// Swap the wording, font, size, and color on a named text layer.
2const res = await fetch(`${API_BASE}/renders`, {
3  method: "POST",
4  headers: {
5    "Content-Type": "application/json",
6    "x-api-key": API_KEY,
7  },
8  body: JSON.stringify({
9    mockup_uuid: "c315f78f-d2c7-4541-b240-a9372842de94",
10    text_layers: [
11      {
12        uuid: "b7f2c1a0-9e34-4d21-8f0a-1c2b3d4e5f60",
13        text: "SUMMER SALE",
14        font: "Poppins-Bold",
15        font_size: 96,
16        color: "#C0392B",
17      },
18    ],
19  }),
20});
21

22const { data } = await res.json();
23console.log(data.print_files[0].export_path);

Edit one mixed-style layer, run by run

When a single layer mixes styles, like a thin first name next to a bold surname, send a segments array with only the runs you want to change. Every run keeps its own font, size, and color, and any run you leave out stays as designed. This bundle of catalog, custom upload, per-segment styling, and box wrap over the API is what sets the text layers apart.

Styled segments request
1{
2  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
3  "text_layers": [
4    {
5      "uuid": "b7f2c1a0-9e34-4d21-8f0a-1c2b3d4e5f60",
6      "segments": [
7        { "index": 0, "text": "Jane " },
8        { "index": 1, "text": "SMITH" }
9      ]
10    }
11  ]
12}

Full field reference and the fallback behavior when a font is not in your catalog live in the text layers documentation.

Frequently asked questions

How do I generate a product mockup in Node.js?

On Node 18 or newer, use the built-in fetch to POST your PSD template id and a design URL to https://api.sudomock.com/api/v1/renders with your API key in the x-api-key header. The response returns a finished mockup image URL at data.print_files[0].export_path.

Should I call the mockup API from the browser or the server?

Call it from the server. Your SudoMock API key is a secret, so keep the render request in a Node backend, an API route, or a serverless function, and never ship the key to client-side JavaScript.

Can I personalize text and fonts from Node.js?

Yes. Add a text_layers array to the render body to change wording, font, size, and color on named layers. The catalog includes 2,000+ open-licensed font families, and mixed-style layers stay editable segment by segment.

Render your first Node.js mockup in minutes

Get 500 one-time API credits to test. No credit card required. See pricing for published monthly volumes and annual billing.

Start Free, 500 CreditsAll Integrations