Integrate the Notion API with Your Website

Published On -

yawhuat AI Automation, API Integrations, Engineering Lab, News, Web System Engineering

Many developers and website owners have asked me how to integrate the Notion API with a website. One of the main reasons is simple: many of us want to use Notion as a lightweight Content Management System (CMS).

Instead of managing website content directly inside your website’s backend, you can manage your information in Notion and retrieve it dynamically through the Notion API.

In this tutorial, I will show you how to create and structure a database in Notion, connect it to your website using the Notion API, retrieve the database records, and finally display the information on your website.

This approach allows Notion to become more than just a note-taking or collaboration platform. It can serve as a central content and data management layer for your websites and applications.

Why Store Your Website Information in Notion?

There are several reasons why you may want to use Notion as part of your website architecture.

1. Moving Towards a Headless CMS Architecture

You may be moving towards a headless CMS architecture, where your content management system is separated from your website’s frontend.

In this setup, Notion manages the content while your website—whether built with Next.js, React, PHP, or another technology—retrieves and displays that content through the API.

2. Centralize Content Across Multiple Websites

If you manage several websites, blogs, or digital platforms, maintaining content separately can become difficult.

Notion can act as a centralized content management hub.

You can maintain information from one location and allow multiple websites or applications to retrieve the required data through the Notion API.

This can make content management considerably easier, especially for businesses operating multiple websites.

3. Build Structured and Relational Data

Notion databases support properties and relationships between different sets of information.

This means you are not limited to storing simple articles or text content.

You can create structured databases for:

  1. Blog posts
  2. Products and services
  3. Team members
  4. Projects and portfolios
  5. Case studies
  6. FAQs
  7. Documentation
  8. Events
  9. Customer-facing resources

By combining Notion databases, relations and the Notion API, you can use Notion as the data layer behind surprisingly sophisticated websites and applications.

In the next section, we will create our first Notion database and prepare it for API access.

Step 1:

Creating database for student is really simple. Just chat with the AI and it will spin out a live database in seconds.

 

Step 2:

Let me share with you the server.js code so that you will have a better context. I am using visual studio Code. You may need some technical knowledge to install Express.JS and install some dependencies.

Here is my package.json

{
  “type”: “module”,
  “dependencies”: {
    “@notionhq/client”: “^5.26.0”,
    “cors”: “^2.8.6”,
    “dotenv”: “^17.4.2”,
    “express”: “^5.2.1”
  }
}

server.js 

import express from “express”;
import cors from “cors”;
import dotenv from “dotenv”;
import { Client } from “@notionhq/client”;
dotenv.config();
const app = express();
app.use(express.static(“.”));
const allowedOrigin = process.env.CLIENT_ORIGIN;
app.use(cors(allowedOrigin ? { origin: allowedOrigin } : undefined));
const notionApiKey = process.env.NOTION_API_KEY;
const configuredDataSourceId = process.env.SCHOOL_STUDENTS_DATA_SOURCE_ID;
const configuredDatabaseId = process.env.SCHOOL_STUDENTS_DATABASE_ID;
if (!notionApiKey) {
  throw new Error(“Missing required environment variable: NOTION_API_KEY”);
}
if (!configuredDataSourceId && !configuredDatabaseId) {
  throw new Error(
    “Set SCHOOL_STUDENTS_DATA_SOURCE_ID or SCHOOL_STUDENTS_DATABASE_ID”,
  );
}
const notion = new Client({
  auth: notionApiKey,
});
let studentsDataSourceIdPromise;
function getStudentsDataSourceId() {
  if (configuredDataSourceId) return Promise.resolve(configuredDataSourceId);
  studentsDataSourceIdPromise ??= notion.databases
    .retrieve({ database_id: configuredDatabaseId })
    .then((database) => {
      const dataSourceId = database.data_sources?.[0]?.id;
      if (!dataSourceId) {
        throw new Error(“The configured Notion database has no data source”);
      }
      return dataSourceId;
    });
  return studentsDataSourceIdPromise;
}
app.get(“/api/students”, async (req, res) => {
  try {
    const studentsDataSourceId = await getStudentsDataSourceId();
    const results = [];
    let startCursor;
    do {
      const response = await notion.dataSources.query({
        data_source_id: studentsDataSourceId,
        start_cursor: startCursor,
        page_size: 100,
        sorts: [
          {
            property: “Name”,
            direction: “ascending”,
          },
        ],
      });
      results.push(…response.results);
      startCursor = response.has_more ? response.next_cursor : undefined;
    } while (startCursor);
    const students = results.filter((page) => page.properties).map((page) => {
      const props = page.properties;
      return {
        id: page.id,
        name: props.Name?.title?.[0]?.plain_text || “”,
        studentId: props[“Student ID”]?.rich_text?.[0]?.plain_text || “”,
        year: props.Year?.select?.name || “”,
        dateOfBirth: props[“Date Of Birth”]?.date?.start || “”,
        phoneNumber: props[“Phone Number”]?.phone_number || “”,
        email: props.Email?.email || “”,
        nationality: props.Nationality?.select?.name || “”,
        age: props.Age?.formula?.number ?? null,
      };
    });
    res.json(students);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: “Failed to load students” });
  }
});
const port = Number(process.env.PORT) || 3000;
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

At Terminal

node server.js in terminal

Lets try to get the JSON file via Express.js Terminal by typing in browser
http://localhost:3000/api/students

 

Step 3:

Create your HTML File (index.html).  I don’t think you need to write any HTML code. Just use Codex or Claude to create by using this prompt

‘@index.html Please create date table using Tailwind CSS. Make it look professional. ‘

If you are keen to learn more about how notion can assist you in automating your task? or enhancing your web integration. Do not forget to call Nova.