design-api

Jul 16, 2024 — Baseline

Using our Design Generation API, you can create design and replace text, images, and other elements. This can be incredibly powerful to way to create designs in bulk or on-demand.

This API is in Beta at the moment so expect new features and changes as time goes on. We want to make this an incredibly powerful addition to our arsenal so don't hesitate to reach out if you feel like something is missing or can be improved.

Requirements

Using Design Generation API

Before you get started, you need to select a design that you want to use as the base template for your API calls. To do that, open a design in Baseline Studio, select the settings tab on the left, click on "View API Config" and copy the request body it presents to you there.

You can then modify the fields under "changes" in that body to fit your needs.

Request

Request Header parameters:

The key should be prefixed by the string literal "Token", with whitespace separating the two strings. For example:

  Authorization: Token 9944b09199c62bcf9418ad846dd0e4bbdfc6ee4b
Parameter Parameter Type Description
Authorization string API Key

Request Body parameters

Parameter Type Description Required
template String The Design ID to generate new ones based on Yes
changes Array An array containing the changes you want to make to the design. Each change is in the form of an object Yes

Changes array options

Parameter Description Type
design_name The name of the design, for use in Baseline. If empty, old design name will be used String
brand The ID of the brand you want to override the design with String
image An image you want replaced with another one String
text An image you want replaced with another one String

Design name object

Parameter Description Required
design_name Used to set a specific No
Example
  {
      "design_name": "Untitled Design", // Base64 coded binary image
  }

Image object

Parameter Description Required
id Id for the specific image layer Yes
image_url URL to an image you want to replace this image with Yes
remove_background Used to set a specific No
Example
  {
    "id": "47ad1dd7-5150-4746-9131-15548e18b32f",
    "image_url": "https://images.pexels.com/photos/5962696/pexels-photo-5962696.jpeg",
    "remove_background": 0
  },

Text object

Example
Parameter Description Required
id Id for the specific text layer Yes
text Array of text objects describing the text you want inside this layer Yes
  {
    "id": "1b237da3-62e0-485a-8496-00a505c243c2", // Id of the original image element. Don't change this
    "text": [
      {
        "type": "paragraph",
        "attrs": {
          "textAlign": "left"
        },
        "content": [
          {
            "text": "Take control via API",
            "type": "text"
          }
        ]
      }
    ]
  }

Example

A full example can look something like the following:

  {
    "template": "awy2sGpF7ysukenbyCFNgB",
    "changes": [
      {
        "brand": "3RUPBTX4bCfGTWg2QaU3zq"
      },
      {
        "id": "5616ddbb-14f4-407d-8422-0dcbcabf5f3a",
        "image_url": "https://images.pexels.com/photos/1190297/pexels-photo-1190297.jpeg",
        "removeBackground": false
      },
      {
        "id": "8b0ab6db-bc80-49f5-9358-ec28beb91137",
        "text": [
          {
            "type": "paragraph",
            "attrs": {
              "textAlign": "left"
            },
            "content": [
              {
                "text": "How to grow your Instagram followers",
                "type": "text"
              }
            ]
          }
        ],
        "color": "#000000"
      },
      {
        "id": "22bf8784-86f1-40b4-8905-be5b6c1fb1aa",
        "text": [
          {
            "type": "paragraph",
            "attrs": {
              "textAlign": "left"
            },
            "content": [
              {
                "text": "Step by step",
                "type": "text"
              }
            ]
          }
        ],
        "color": "#000000"
      }
    ]
  }


Response

Successful responses look like this:

Status Code: 200

{
    "template": "ZwRufg4Qfuty7EEZHQsofj",
    "name": "Untitled Design",
    "editor_url": "http://localhost:9090/studio/ZwRufg4Qfuty7EEZHQsofj",
    "image_url": "https://baselined.s3.eu-west-1.amazonaws.com/static/content/designs/ZwRufg4Qfuty7EEZHQsofj/ZwRufg4Qfuty7EEZHQsofj-thumbnail.png",
    "width": "1080",
    "height": "1920"
}

During the Beta period, every user is limited to 100 requests per day.

Join Our Newsletter

Don't hesitate and subscribe to our weekly newsletter to receive a small notice when we publish a new article or update our app.