Skip to main content

Data Connect API (API Integration)

Learn how to pull data from external services with public APIs and display it in Studio.Design's dynamic elements, like dynamic lists and pages. Covers supported APIs, setup steps, data binding, and key things to keep in mind.

Available on: Business plan and above

With API integration, you can pull data from external services that publish APIs and display it through Studio.Design's dynamic elements, including dynamic pages, dynamic modals, and dynamic lists.

Note: About data already connected through API integration (Beta)

With the official API feature launching on April 17, 2026, new use of API integration (Beta) has ended.
Data that's already connected can still be used on all plans, but continued use in the future isn't guaranteed.

It also isn't supported on the new publishing infrastructure.

Available plans

This feature is available on the Business plan and above. The limitations for each plan are as follows.

API data from list endpoints can be connected to dynamic lists, and API data from detail endpoints can be connected to dynamic pages and dynamic modals.

Plan

List endpoint

Detail endpoint

Business

Up to 1

Not available

Business Plus

Unlimited

Unlimited

Enterprise

Unlimited

Unlimited

Integration requirements

Supported HTTP methods

The following HTTP methods are supported:

  • GET

  • POST

Note:

  • Whether you use GET or POST, you can only retrieve data from external services.

  • You can't create, update, or delete data on the external service from Studio.Design (PUT, PATCH, DELETE, etc.).

Endpoint structure

Studio.Design's Data Connect API supports the following endpoint structures:

  • List endpoint

  • Detail endpoint (with a parameter included in the URL path)

    The :id part above matches the path parameter name of the dynamic page in Studio.Design. (Example: /contents/:id)

Response data format

  • The supported REST API response format is JSON.

  • For list data, the endpoint needs to return either an array-type field (list format) or an object that contains an array.

    If the response doesn't include an array-type field, the data won't appear in a dynamic list even if you set the endpoint as a list data source.

  • In Studio.Design, dynamic lists are linked to the array-type field in the response as their data source.

  • For detail data, the response needs to be returned as a single object.

Authentication methods

  • Studio.Design supports authentication methods that use HTTP headers, such as API key authentication and Basic authentication.

  • Credentials are sent from the Studio.Design proxy and aren't shown directly in the published site's source code.

  • IP restrictions or CORS settings on the external service aren't required, but the endpoint URL must be reachable from Studio.Design.

Retrieving API data

Note:

  • The steps in this article include actions performed on external services. Questions about settings or behavior on external services may not be covered by Studio.Design's chat support. For details, please contact the service you're using.

  • Some Enterprise plans include detailed implementation support. Feel free to reach out through our contact form.

Step 1. Prepare the API endpoint (URL) and access keys on the external service

  1. Enable the REST API in the service you want to use, such as Notion, microCMS, or Airtable.

  2. Check the endpoint URLs you'll use for list data and detail data, and review the response structure.

  3. Note down the credentials needed for authentication (such as your API key or token) and the header name (such as Authorization or X-MICROCMS-API-KEY).

  4. When connecting a detail endpoint, check the external service's documentation to see how path parameters (placeholder parameters) are written.

    Example:

    • Example from the external service's documentation

      /api/example/{example_id}

    • Example endpoint path entered in Studio.Design

      /api/example/:example_id

      Parts like {example_id} or :id are parameters (variables) used to include the ID for each item.

      For detail APIs, this parameter receives the value from the "ID field for each item" in the response.

      json// Example list API response { "contents": [ { "id": "ID to include in the URL", "title": "...", ... } ] }

      In this case, specify the detail endpoint path as follows. Replace the placeholder notation used in the external service's documentation (such as {example_id}) with the format :(colon)+field name in Studio.Design.

      • In the documentation: /api/example/{id}

      • Enter in Studio.Design: /api/example/:id

Step 2. Add API credentials in Studio.Design

  1. Open the Design Editor in Studio.Design.

  2. In the navigation on the left side of the editor, select the [Connect] icon.

  3. Select the [API] tab.

  4. Click the [+] next to [Authentication] or the [+ Add] button to add API credentials.

    • Name: Set a name for the credentials.

    • Key: Enter the authentication header key (e.g., Authorization, X-API-Key).

    • Value: Enter the value for the authentication header key.

  5. Click [Save] to save the credentials.

  6. Once saved, click the gray area outside the authentication dialog to return to the screen.

Step 3. Create an endpoint in Studio.Design

  1. Open the Design Editor in Studio.Design.

  2. In the navigation on the left side of the editor, select the [Connect] icon.

  3. Select the [API] tab.

  4. Click the [+] next to [Endpoint] or the [+ Add] button to add an endpoint.

  5. Configure the endpoint on the screen that appears. Use the external service's endpoint URL, placeholder parameters, and other information you noted in Step 1.

    • Name: Set a name for the endpoint. (e.g., Blog list, Blog detail)

    • URL: Enter the endpoint URL for the API you want to use.

      id is a placeholder parameter (variable).

      Set it in a format such as :id or :article_id, matching the ID field name for items you identified in Step 1.

    • Response type: Choose [List] (list format) or [Detail] (article details).

    • Authentication: Select the credentials you added in Step 2. If you haven't added any yet, add them by clicking [+ New].

    • Request header (optional): Enter any required headers (Authorization, X-MICROCMS-API-KEY, etc.).

    • Placeholder parameters: Specify the path parameter name used when configuring detail data.

    • Key: Use the same name as :id or :credential_id you entered in the URL field.

    • Value: Enter the actual variable. The detail data for the variable you specify here will be displayed in the Design Editor. You can't switch which detail data is displayed in the editor.

  6. Once you've entered all the information, choose either [GET] or [POST] as the HTTP method in the top right of the screen, then click the [Check connection] button.

  7. If the check succeeds, a sample of the retrieved API data will appear on the right side of the screen.

  8. Click [Save] to complete the integration. Once saved, the changes are immediately reflected on the published site.

Create an API list

You can connect retrieved API list data to a dynamic list to display it in a list format. An API list can display up to 50 items.

Select the list you want to connect the API data to.

  1. Open the [Data] tab in the right panel. If the panel is closed, open the right panel first.

  2. Click [Connect data] for the list.

  3. From the list of available data sources, select the API data you want to connect.

Create an API article page

You can connect retrieved API detail data to a dynamic page to display article details.

  1. Add a dynamic page, then select your API data from the [Connect data] menu.

  2. The default dynamic page only contains a text box connected to the title property. Add box elements as needed for the properties you want to display on the page.

Connecting variable data (properties) retrieved through the API to boxes

Here's how to connect variable data (properties) retrieved through API integration to boxes.

  1. Select a box element inside a list item.

    Select the box element inside the API list that you want to connect variable data (properties) to.

    The type of box you use depends on the kind of data you're connecting.

  2. Open the [Data] tab in the right panel. If the panel is closed, open the right panel first.

  3. From [List item], use the connector to link the property to the element.

    For image boxes and text boxes, you can also link them by selecting the variable data (property) from the element's settings panel.

    In each tab's settings field, select the variable data (property) you want to connect from the property list.

    • Image box: [URL] field

    • Text box: [Text] field

Changing how property text is displayed

You can change how variable data (properties) connected to a text box is displayed.

You can adjust the display of text properties, such as changing the date format or limiting the number of characters shown.

For details, see Property string filters.

How to connect with popular external services

For detailed steps on integrating with microCMS and Notion, see the following help articles.

Related Articles
Connecting External Apps (Apps Integration)
Connect microCMS with the API
Notion API Integration
Page type: Dynamic Modal
Connect Panel
Did this answer your question?