Render mockups with Adalo and SudoMock

Adalo builds mobile and web apps without code. A Custom Action sends your user’s design to the SudoMock render endpoint and returns a finished image URL your app can store or display. One setup detail decides whether it works: every value that changes has to be an Input with an Example Value, never typed into the body by hand.

Before you start

An API key from your dashboard.
An Adalo plan that includes Custom Actions.
Artwork at a URL that loads without signing in, because SudoMock fetches it.

Two ids go into every render: the mockup uuid, and the uuid of the layer you fill. Both arrive together from List PSD mockups, where each entry carries its own uuid and a smart_objects array holding the uuid of every layer you can fill. That page has the call ready to copy in eight languages. Read the pair once and keep it.

Guide

Create the Custom Action

Select a button, choose Add Action, then Custom Action, New Custom Action, and name it Render Mockup. Set the method to POST and the URL to https://api.sudomock.com/api/v1/renders. Adalo does not offer Custom Actions on a form submit button, so use a regular button.

Add the headers

Select Add Header twice. Name the first x-api-key and paste your key into it. Name the second Content-Type and set it to application/json.

Define the Inputs

In the Inputs panel, select Add Input for every value that changes per user or per record. One is enough to start: name it Design URL, type Text, and give it a real public image URL as the Example Value.

The test request runs with Example Values exactly as typed. Use plain sample data only, never a magic text token or a placeholder marker.

Build the body

Paste the body, then select the artwork URL string, keep the surrounding quotes, and insert your Design URL input with the Magic Text button. Leave the inserted token exactly as Adalo writes it.

{
  "mockup_uuid": "YOUR_MOCKUP_UUID",
  "smart_objects": [
    {
      "uuid": "YOUR_SMART_OBJECT_UUID",
      "asset": {
        "url": "https://example.com/artwork.png",
        "fit": "crop"
      }
    }
  ],
  "export_options": {
    "image_format": "webp",
    "image_size": 1920
  }
}

Run the test and save the Output

Select Run Test Request. On success, select Add Item under Outputs, add the render URL field as a Text output named Render URL, then save straight away. Each re-test clears the Outputs you added before it.

The test spends credits, exactly like a production render. The current credit weights are on pricing.

Bind the Inputs on the button

Example Values only feed the test. Open the button’s actions, select Render Mockup, and bind each Input with the Magic Text button to the record that holds the real value. In a follow up action, write Render URL onto the record. Adalo saves Custom Actions at team level, so editing this one later changes it in every app that uses it.

What comes back

The finished image URL arrives at data.print_files[0].export_path. The whole response, field by field, is on Render a PSD mockup. Adalo lists Text, Number, and Date/Time response fields, and a field nested inside an array does not always appear. If export_path is missing from the Outputs list, send the same call through Make or Zapier and hand the URL back to Adalo as one flat text value.

When a render fails

Symptom	Why it happens	Fix
`422` with literal text such as `#null` in the request	Magic text was typed into the body, so an empty field sends the placeholder itself	Define every dynamic value as an Input with an Example Value and insert it with the Magic Text button
`401` on the test request	The `x-api-key` header is missing, misspelled, or holds a partial key	Re-add the header named exactly `x-api-key` with the full key
The design image cannot be downloaded	The design URL asks for a login	Open it in a private window. It has to load without signing in
Outputs disappear after a re-test	Each re-test refreshes the response structure	Run the test again, re-add the Outputs, then save immediately
A parse error right after pasting	A line break, an unescaped quote, or a trailing comma	Keep text values on one line and remove the comma after the last field

Everything about the output image, the format, the size, which layers are filled, and the text overrides, is controlled by the request body. Every field is on the render endpoint, and every status is listed in Errors.

Overview

PSD mockups

Photo mockups

Text and fonts

Integrations

Reference

Advanced

Choosing an approach

Troubleshooting

Working with the API

Account and billing

Changes

Render mockups with Adalo and SudoMock

Before you start

Guide

What comes back

When a render fails

​Before you start

​Guide

​What comes back

​When a render fails

Before you start

Guide

What comes back

When a render fails