MySQL

How to integrate MySQL with Webflow

Every MySQL Webflow integration requires middleware handling database connections and data transformation. Three approaches exist:

• Automation platforms (Zapier, Make, Albato): visual workflows for non-technical teams  
• BaaS platforms (Xano, BuildShip): dynamic, database-driven pages with real-time updates  
• Custom APIs: complex business logic, high-volume sync, enterprise security (SQL injection prevention via prepared statements)

The Webflow CMS API provides REST endpoints for collections. MySQL connectivity requires MySQL Connector/Python, Connector/J for Java, or the X DevAPI.

Use automation platforms

Zapier, Make, and n8n connect Webflow forms and CMS collections to MySQL without code, handling authentication, data transformation, and error handling.

The platform capabilities include:

• Zapier: Create Row, Update Row, Find Row, Custom SQL Query  
• Make: Execute Query, Select/Insert/Update/Delete Rows, stored procedures  
• n8n: Delete, Execute SQL, Insert, Update, Upsert

Select triggers (New Row, New Form Submission) and actions (Create Item, Insert Row). Paid plans offer faster polling or real-time webhooks.

The integration patterns include:

• Form storage: Form submissions → MySQL rows via Zapier  
• Bidirectional sync: CMS events ↔ MySQL via Make's Webflow modules and MySQL operations  
• Database-to-CMS publishing: MySQL changes → Webflow items via n8n webhooks  
• Scheduled sync: Periodic sync via Albato

Use backend-as-a-service (BaaS) platforms

BaaS platforms provide low-code MySQL-Webflow integration. Here are three methods that exist:

1. Xano Webflow App: CMS sync via visual field mapping  
2. Form submissions: JavaScript submitting to Xano API endpoints  
3. Dynamic display: Custom code embed with fetch() calls to Xano APIs

The BaaS advantages include the following:

• Pre-built Webflow authentication  
• Automatic data transformation  
• Managed hosting and scaling  
• Built-in credential management and SSL/TLS

Build with Webflow and MySQL APIs

Custom middleware provides complete control: Bearer token authentication, rate limit management, and secure MySQL connections using prepared statements.

Implement bi-directional sync by storing Webflow item IDs in MySQL, tracking timestamps, and using exponential backoff for retries. Webflow webhooks notify middleware of CMS changes.

Synchronizing MySQL data to Webflow CMS

Use the Webflow CMS Collections API with MySQL connectors and use the parameterized queries (%s placeholders).

import mysql.connector
import requests

connection = mysql.connector.connect(
    host='localhost', user='username', password='password', database='products_db'
)

cursor = connection.cursor(dictionary=True)
cursor.execute("SELECT * FROM products WHERE synced = 0")
products = cursor.fetchall()

for product in products:
    response = requests.post(
        f"https://api.webflow.com/v2/collections/{collection_id}/items",
        headers={'Authorization': f'Bearer {webflow_token}', 'Content-Type': 'application/json'},
        json={'fieldData': {'name': product['name'], 'price': product['price'], 'slug': product['slug']}}
    )
    if response.status_code == 201:
        item_id = response.json()['id']
        requests.post(
            f"https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}/publish",
            headers={'Authorization': f'Bearer {webflow_token}', 'Content-Type': 'application/json'}
        )

Store webflow_item_id and last_synced columns for updates. Bulk operations support up to 100 items/request.

Capturing Webflow events in MySQL

Webflow webhooks send POST requests for collection_item_created, collection_item_changed, collection_item_deleted, and form_submission events.

const mysql = require('mysql2/promise');
const crypto = require('crypto');

const pool = mysql.createPool({
    host: process.env.DB_HOST, user: process.env.DB_USER,
    password: process.env.DB_PASSWORD, database: process.env.DB_NAME,
    waitForConnections: true, connectionLimit: 5, queueLimit: 0
});

function validateWebflowSignature(body, signature, secret) {
    const hash = crypto.createHmac('sha256', secret).update(body).digest('base64');
    return hash === signature;
}

app.post('/webhooks/webflow', async (req, res) => {
    try {
        if (!validateWebflowSignature(req.rawBody, req.headers['x-webflow-signature'], process.env.WEBFLOW_WEBHOOK_SECRET)) {
            return res.status(401).json({ error: 'Invalid signature' });
        }
        const { triggerType, payload } = req.body;
        const connection = await pool.getConnection();
        try {
            if (triggerType === 'collection_item_created') {
                await connection.execute(
                    'INSERT INTO cms_items (webflow_id, name, created_at) VALUES (?, ?, ?)',
                    [payload.itemId, payload.fieldData.name, new Date()]
                );
            }
            return res.status(200).json({ success: true, itemId: payload.itemId });
        } finally { connection.release(); }
    } catch (error) {
        if (error.code === 'ER_DUP_ENTRY') return res.status(409).json({ error: 'Item already exists' });
        return res.status(500).json({ error: 'Internal server error' });
    }
});

Implement idempotent handlers — Webflow retries failed deliveries.

Using Change Data Capture for production sync

Debezium reads MySQL's binary log for real-time CDC without triggers or polling. Configure row-based logging per MySQL replication formats:

SET GLOBAL binlog_format = 'ROW';
SET GLOBAL binlog_row_image = 'FULL';

Debezium publishes to Kafka topics; stream processors consume events and call the Webflow API for scalable, guaranteed delivery.

What you can build

MySQL-Webflow integration enables database-driven sites exceeding Webflow CMS limits. All require middleware (Zapier, Make, n8n, Xano, BuildShip).

• E-commerce catalogs: Real-time inventory, pricing, product details from MySQL with thousands of SKUs  
• Membership portals: User profiles, preferences, access permissions with dynamic content  
• Lead management: Form submissions → MySQL → automated emails, sales notifications, CRM records  
• Multi-site distribution: Single MySQL database publishing to multiple Webflow sites