PostgreSQL

How to integrate PostgreSQL with Webflow

Integrating PostgreSQL with Webflow lets you build data-driven websites that display and update database records through visual interfaces. Connect patient portals to healthcare databases, build financial dashboards with audit trails, or create manufacturing monitoring interfaces.

Integrate PostgreSQL with Webflow through native CSV imports, third-party apps, and APIs.

Import data with CSV files

Webflow's native CSV import capability works for migrating PostgreSQL data into CMS collections. Export database tables as CSV files, then use the CMS panel to map columns to collection fields with preview before import. Use this method for one-time migrations or periodic manual updates when real-time synchronization isn't required.

Here are some things you can do with Webflow’s CSV import:

• Upload CSV files up to 4MB directly through the CMS panel interface
• Map columns to CMS fields including plain text, rich text with HTML, images, videos, links, dates, and reference fields
• Create new fields during import without pre-configuring collection structure
• Update existing items by matching against unique identifiers with automatic backup creation
• Import multi-reference relationships using semicolon-separated values in CSV cells

Webflow creates automatic backups before each import operation, and you can preview all items before executing the import to verify field mapping accuracy. For multi-reference fields, format CSV values with semicolons like value1;value2;value3 to create multiple relationships.

Note: This approach requires exporting PostgreSQL data to CSV format using database tools before each import operation. No real-time synchronization occurs, making it suitable for reference data, product catalogs, or content that changes infrequently.

Use third-party apps from Webflow's App marketplace

Webflow's marketplace includes apps that connect PostgreSQL to your sites through visual builders and managed infrastructure.

Install Xano for managed PostgreSQL hosting

Xano provides a no-code backend with native PostgreSQL database hosting.

Install the Xano app from the Webflow App marketplace, then use the visual API builder to create REST endpoints that execute PostgreSQL queries. Configure OAuth2 authentication for user-specific data access, build database relationships with foreign keys and joins, and transform results before sending to Webflow CMS or page elements.

Xano handles database backups, scaling, and security while giving you a visual interface for query building.

Install BuildShip for PostgreSQL workflow automation

The BuildShip app connects your existing PostgreSQL instance to Webflow through serverless workflows.

Configure PostgreSQL connection parameters (host, port, database, username, SSL settings), then build workflows with query execution nodes that run SELECT, INSERT, UPDATE, and DELETE operations.

Set up Webflow trigger nodes to execute PostgreSQL operations when CMS items change or forms submit, and use response transformers to format database results for collection field structures.

Use automation tools

Automation apps like Zapier connects PostgreSQL triggers to Webflow actions through multi-step workflows.

For example, the New Row trigger detects newly inserted PostgreSQL records with 15-minute polling intervals, while the New or Updated Row trigger monitors both inserts and updates. Create Live Item and Update Item actions sync records to Webflow CMS collections.

Make.com and n8n provide similar automation capabilities with visual workflow builders.

Build custom database connections

For PostgreSQL databases hosted through platforms with built-in Webflow integration capabilities, you can connect through their management interfaces without direct API programming.

Supabase has a PostgreSQL-compatible database with that connects to Webflow with the following steps:

1. Create Supabase project with automatic PostgreSQL database provisioning
2. Design database tables through the visual table editor with column types and constraints
3. Configure Row Level Security policies for data access control
4. Generate API keys from project settings with read or read-write permissions
5. Install Supabase JavaScript client in Webflow using custom code in head and body tags
6. Write fetch scripts in page-specific Code Embed elements to query database tables
7. Bind database results to Webflow elements dynamically with JavaScript DOM manipulation

This method displays live PostgreSQL data on published Webflow pages through client-side JavaScript. The database remains separate from Webflow's CMS, making it suitable for applications requiring complex queries, user authentication, or real-time subscriptions.

Supabase has a PostgreSQL-compatible database with auto-generated REST APIs, real-time subscriptions, and authentication services. Data updates immediately reflect on Webflow pages without manual synchronization steps.

Build with Webflow and PostgreSQL APIs

Direct API integration gives you complete control over data synchronization, custom business logic, and real-time operations. Build middleware services that connect Webflow's APIs to PostgreSQL databases using standard programming languages and database drivers.

Set up authentication and connections

Before syncing data, configure authentication for both Webflow's API and your PostgreSQL database. Choose the authentication method based on whether you're building a single-site integration or a multi-site application.

Here’s how site tokens work for single-site integrations:

1. Navigate to Site Settings > Apps & Integrations > API Access
2. Click Generate API Token and select required scopes: sites:read, cms:read, cms:write
3. Copy the generated token (tokens expire after 365 days of inactivity)
4. Include in API requests as header: Authorization: Bearer YOUR_SITE_TOKEN

For multi-site applications, implement OAuth 2.0 authorization flow with proper redirect handling and token refresh logic.

PostgreSQL recommends connection pooling libraries for production applications. Popular community-maintained client libraries like node-postgres for Node.js and psycopg for Python have production-ready connection pooling.

Here's an example using node-postgres:

import { Pool } from 'pg'

const pool = new Pool({
  host: 'your-db-host.com',
  user: 'database-user',
  database: 'your_database',
  password: 'your-password',
  port: 5432,
  max: 20,
  idleTimeoutMillis: 30000,
  connectionTimeoutMillis: 2000,
  ssl: { rejectUnauthorized: false }
})

This integration requires SSL/TLS for production connections with minimum sslmode=require configuration. Include SSL parameters in connection strings for secure communication.

Sync PostgreSQL records to Webflow CMS

Build services that query PostgreSQL tables and create or update corresponding Webflow CMS items. This pattern works when PostgreSQL serves as the source of truth and Webflow displays database content through the CMS.

Use the Webflow Collections API to manage CMS items programmatically:

• GET /v2/sites/{site_id}/collections lists all collections with their field schemas and identifiers
• GET /v2/collections/{collection_id}/items retrieves existing items with pagination support (maximum 100 per request)
• POST /v2/collections/{collection_id}/items creates new items with field data matching collection schema
• PATCH /v2/collections/{collection_id}/items/{item_id} updates existing item fields by item identifier

Query PostgreSQL tables, transform results to match Webflow field structures, then use the Collections API to sync data. Handle pagination when retrieving large item sets from Webflow or processing many database rows.

To register webhooks to receive notifications when CMS content changes:

• POST /v2/sites/{site_id}/webhooks creates webhook subscriptions for events like cms_item_created, cms_item_updated, cms_item_deleted
• Webhook payloads include item data and identifiers for processing database updates
• Signature verification validates webhook authenticity using provided signing secrets

Build HTTP endpoints that receive webhook payloads, then execute corresponding PostgreSQL operations to maintain database consistency when Webflow content changes.

What you can build

Integrating PostgreSQL with Webflow lets you create data-driven websites that display complex relational data through visual interfaces while maintaining database control for business logic.

• Healthcare patient portals: Build appointment booking interfaces and medical record viewers that connect to HIPAA-compliant PostgreSQL databases storing patient information, displaying personalized dashboards with treatment histories and upcoming appointments.
• Financial service dashboards: Create risk monitoring interfaces and compliance reporting pages that query PostgreSQL databases with audit trails, showing real-time portfolio performance metrics and regulatory status updates.
• Manufacturing monitoring systems: Display production metrics and quality control interfaces that pull from PostgreSQL databases storing IoT sensor data, showing live equipment status, defect rates, and supply chain logistics.
• Enterprise content platforms: Build searchable knowledge bases and documentation sites that sync PostgreSQL records to Webflow CMS, creating author profiles, article categories, and version histories with complex relational structures.