Note: About third-party service integrations. This guide includes steps performed in Notion. Notion's features, behavior, and any actions not described in this article may fall outside the scope of our chat support. The Notion screens and specifications shown in this article are based on information as of April 2026. If your actual screen looks different, please refer to Notion's official documentation.
What you'll need
To connect the Notion API with Studio.Design, you'll need the following:
A Notion account and the workspace you want to connect
The Notion database (a page in table format) you want to connect
An "Internal Integration Token" (Internal Integration Secret) issued in Notion
A project on the Business plan or higher (required to use the Data Connect API feature) on Studio.Design
For detailed information on Notion API usage terms and specifications, please refer to the official Notion documentation.
Step 1. Create an integration in Notion
Set up an integration and an API key in Notion to connect with Studio.Design.
Go to Notion's internal integrations settings and click [+ New integration].
Fill in the basic information for your integration:
Integration name
Icon
Associated workspace: Select the workspace you want to connect.
Click [Create] to create the integration.
In the dialog that appears, click [Integration settings].
On the integration edit screen, copy the [Internal Integration Secret].
Note: The Internal Integration Secret is sensitive information used for API authentication. Keep it secure and don't share it with others.
Step 2. Grant the integration access to your Notion database
Allow the integration you created to access the target database.
Open the Notion database page you want to connect.
Click the three-dot menu […] in the top right.
At the bottom of the menu, click [Connections] and select the integration you created in Step 1.
Step 3. Set up the API connection in Studio.Design
Before configuring the endpoint in Studio.Design, gather the following information:
Database ID: A 32-character alphanumeric string unique to your database.
You'll use this when entering the URL during endpoint setup.
Open the target database in your browser and copy the 32-character alphanumeric string that appears after
https://www.notion.so/and before?(or, if you're using a custom workspace domain, the 32 characters that come right after the workspace name and before?).Example: For
https://www.notion.so/d982XXXXXXXXXXXXXXXXXXXXXXXXXXXX?v=..., the ID isd982XXXXXXXXXXXXXXXXXXXXXXXXXXXX.HTTP headers: When registering the endpoint, use the following as request headers:
Notion-Version: The API version you're using, such as
2022-06-28.Content-Type:
application/json
Step 4. Add API authentication in Studio.Design
Register the authentication info needed to access the Notion API from the Studio.Design design editor.
Log in to Studio.Design and open the design editor for your project.
Click the [Connections] icon in the left navigation of the editor.
Select the [API] tab.
Click the [+] or [+ Add] button under [Authentication] to create a new authentication.
In the dialog that appears, fill in the following fields:
Name: Enter any name for this authentication (e.g., Notion).
Key:
AuthorizationValue:
Bearer {Internal Integration Token}(enter the token you copied in Step 1 afterBearer)
Click [Save] to save your authentication info.
Step 5. Register the Notion endpoint
In the Studio.Design design editor, add an endpoint for your Notion database.
Open the [API] tab from the [Connections] icon on the left side of the design editor.
Click [+] or [+ Add] under [Endpoints].
On the screen that appears, configure the following:
Name: A name for the endpoint (e.g., Notion article list).
URL: Enter it in the format
https://api.notion.com/v1/databases/{DATABASE_ID}/query. Replace{DATABASE_ID}with the database ID you found in Step 3.Response type: Select [List].
Authentication: Select the Notion authentication you registered in Step 4.
Request headers: Enter the HTTP headers from Step 3.
Select
POSTas the HTTP method and click [Test connection].Confirm that the status "200 OK" is returned along with a response. If the sample data looks good, click [Save] to save the endpoint settings.
Values to enter in the request headers
Key | Value |
| The API version you're using, such as |
|
|
Step 6. Use Notion data in dynamic elements
Once the connection is set up, you can display data retrieved from the Notion API in a dynamic list. Connect data to elements from the [Data] tab in the right panel.
For detailed instructions, see the following help article:
Step 7. Bind retrieved API variable data (properties) to box elements
Connect the variable data (properties) retrieved from the API to box elements inside the list. For detailed instructions, see the following help article:
Customize how property text is displayed
You can adjust how text properties appear—for example, changing date formats or limiting the number of characters shown.
For details, see String filters for properties.
Retrieving detailed data with the Notion API
This article explains how to retrieve list data using POST /v1/databases/{database_id}/query, but the Notion API also lets you retrieve detailed data for a single page.
To retrieve detailed data, select GET as the HTTP method and register the endpoint as follows:
Placeholder parameter: Enter the following value.
Key | Value |
| The |
For the Notion integration authentication header and other request headers such as Notion-Version, use the same settings as when retrieving list data.