> ## Documentation Index
> Fetch the complete documentation index at: https://sudomock.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> The base URL is https://api.sudomock.com.
> Authenticate every request with the x-api-key header. Keys begin with sm_.
> A render returns the finished image at data.print_files[0].export_path. A request sent with is_async true returns a job_id to poll at GET /api/v1/jobs/{job_id}.
> Prefer the official SDKs over hand-written HTTP calls: npm install sudomock for Node, pip install sudomock for Python.

# Render mockups with Adalo and SudoMock

> Call the SudoMock render API from an Adalo Custom Action.

[Adalo](https://www.adalo.com) 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](https://sudomock.com/dashboard/api-keys).
* 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](/docs/api-reference/psd-mockups/retrieve-a-list-of-psd-mockups.md),
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

**1. 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.

**2. 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`.

**3. 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.

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

**4. 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.

```json theme={"theme":{"light":"github-light","dark":"vesper"}}
{
  "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
  }
}
```

**5. 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.

> [!NOTE]
>
> The test spends credits, exactly like a production render. The current
> credit weights are on [pricing](https://sudomock.com/pricing).

**6. 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](/docs/api-reference/psd-mockups/render-a-psd-mockup.md).

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](/docs/integrations/make.md) or
[Zapier](/docs/integrations/zapier.md) 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](/docs/api-reference/psd-mockups/render-a-psd-mockup.md),
and every status is listed in [Errors](/docs/errors.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.