Lovable and Notion integration: Step-by-Step Guide 2025

 

Adding Notion Client Dependency

 

• Since Lovable doesn’t have a terminal, you need to import the Notion client directly from a CDN. This approach eliminates the need for a separate installation step.
• Create a new file called notionService.ts in your project (for example, under a folder named src/integrations if available).
• At the top of this file, add the following code to import the Notion client:

import { Client } from 'https://cdn.skypack.dev/@notionhq/client';

 

Creating the Notion Service Class

 

• In the same notionService.ts file, create a class that will wrap your Notion API calls.
• This class will initialize the Notion client using your integration token and include methods to query a database or create pages.
• Replace your-notion-secret-token and your-database-id with your actual Notion integration token and database ID.
• Add the following code snippet below the import statement:

const NOTION_TOKEN = 'your-notion-secret-token';  // Replace with your actual Notion token
const DATABASE_ID = 'your-database-id';          // Replace with your actual database ID

export class NotionService {
  private client: Client;

  constructor() {
    this.client = new Client({ auth: NOTION_TOKEN });
  }

  // Method to query the Notion database
  async queryDatabase() {
    try {
      const response = await this.client.databases.query({
        databaseid: DATABASEID
      });
      return response;
    } catch (error) {
      console.error('Error querying Notion database:', error);
      throw error;
    }
  }

  // Method to create a new page in the database
  async createPage(title: string, properties: object) {
    try {
      const response = await this.client.pages.create({
        parent: { databaseid: DATABASEID },
        properties: {
          Name: {
            title: [
              {
                text: { content: title }
              }
            ]
          },
          ...properties
        }
      });
      return response;
    } catch (error) {
      console.error('Error creating a new page in Notion:', error);
      throw error;
    }
  }
}

 

Integrating NotionService into Your Lovable Project

 

• Identify the part of your Lovable project where you want Notion interactions to occur (for example, a button click handler or a lifecycle event in your main code file).
• Open your main application file (for example, app.ts or a similar file where the core logic resides).
• Import the NotionService class and use it to invoke the methods you created.
• Add the following snippet at the place where Notion functionalities are required:

import { NotionService } from './notionService';

const notion = new NotionService();

// Example function to fetch data from Notion
async function fetchNotionData() {
  try {
    const data = await notion.queryDatabase();
    console.log('Notion data:', data);
  } catch (error) {
    console.error('Error fetching data from Notion:', error);
  }
}

// Example trigger - you can hook this function to a button or an event within Lovable
fetchNotionData();

 

Configuring Your Notion Integration

 

• If Lovable supports a configuration/settings file, consider moving your NOTIONTOKEN and DATABASEID values to that file.
• Otherwise, ensure you update these constants directly in the notionService.ts file with your actual Notion credentials.
• This will allow your project to securely connect to Notion and perform the desired API operations.

 

Testing Your Integration

 

• After inserting the above snippets, save all modified files.
• Within Lovable, trigger the part of the application where you integrated the NotionService (for example, initiate the fetchNotionData function).
• Check the console output for logs confirming data retrieval or page creation from Notion.
• Any errors will be logged through the console.error statements, allowing you to troubleshoot as necessary.