MySQL

How to integrate MySQL with Webflow

You can enhance Webflow CMS' capabilities by integrating it with MySQL. MySQL databases handle millions of records with the querying power and flexibility that enterprise sites require.

Webflow doesn't connect directly to MySQL. Integration requires middleware through automation platforms (Zapier, Make, n8n, Albato) for visual workflows, backend-as-a-service platforms (Xano, BuildShip) for dynamic content, or custom API development for full control over security and business logic.

Use automation platforms

Automation platforms like Zapier, Make, and n8n connect Webflow forms and CMS collections to MySQL databases through visual workflow builders. These platforms handle authentication, data transformation, and error handling through pre-built modules without code. Zapier supports MySQL operations including Create Row, Update Row, Find Row, and Custom SQL Query actions.

Make provides Execute Query, Select Rows, Insert Row, Update Row, and Delete Row operations with stored procedure support. n8n offers Delete, Execute SQL, Insert, Update, and Upsert operations. Implementation requires attention to platform constraints. Zapier's free plans poll for new submissions approximately every 15 minutes rather than in real-time. Databases must be accessible from the platforms' static IP addresses. Webflow's API rate limits (60-120 requests per minute depending on plan) require proper request queuing for bulk synchronization.

Zapier's MySQL-Webflow integration documentation shows you create workflows by selecting triggers such as "New Row" in MySQL or "New Form Submission" in Webflow, and actions such as "Create Item" in Webflow CMS or "Insert Row" in MySQL. Zapier uses polling-based architecture (checking for new events approximately every 15 minutes on free plans) or receives webhooks from supported platforms. Once triggered, Zapier executes your defined workflow automatically, transforming and transferring data between systems. Rate limits apply based on your subscription tier. The platform respects Webflow's API rate limits of 60-120 requests per minute depending on your plan.

This integration enables the following actions:

• Form submission storage with Zapier MySQL integration: Webflow form submissions trigger MySQL create row operations through visual Zapier workflows, storing data in database tables without coding
• Bidirectional CMS synchronization using Make's Webflow modules with MySQL operations: Webflow collection item created/changed/deleted events trigger MySQL updates, and MySQL changes propagate back to Webflow through webhook-based synchronization
• Database-to-CMS content publishing through n8n's webhook-based architecture: MySQL changes trigger n8n workflows that automatically create or update Webflow collection items using real-time webhooks rather than polling
• Scheduled data synchronization with Albato's integration builder: Periodic synchronization between MySQL and Webflow systems with visual mapping of fields and configurable refresh intervals, available with 7-day free trial

Rate limits apply based on platform subscription tiers. Free plans typically check for new data every 15 minutes. Paid plans offer faster polling intervals or real-time webhook processing. The Webflow API rate limits specify 60 requests per minute for Starter and Basic plans, and 120 requests per minute for CMS, eCommerce, and Business plans.

Use backend-as-a-service platforms

Backend-as-a-service (BaaS) platforms provide low-code solutions that connect MySQL databases to Webflow sites without custom server-side development. Xano's Webflow connection documentation represents the most comprehensively documented BaaS solution for this integration pattern.

Xano provides three distinct integration methods without coding requirements:

Xano Webflow Connector (easiest for CMS sync)

Install Xano's Webflow Connector through Xano's integration marketplace. Create API endpoints in Xano's visual builder. Map Webflow CMS fields to MySQL tables visually. Webflow CMS collections automatically sync to MySQL backend with no custom code required.

Webflow forms to MySQL (minimal code required)

Build forms directly in Webflow. Create API endpoints in Xano using visual interface. Add minimal JavaScript to submit form data to Xano's API using copy-paste code snippets. Xano handles all MySQL operations visually through its backend builder. This method works well for lead capture and contact form submissions.

Dynamic data display (real-time content)

Create Xano API endpoints that query MySQL data visually. Use Webflow's custom code embed element on pages. Insert provided JavaScript to fetch data from Xano. Display live MySQL data on Webflow pages without CMS limitations. This approach works for real-time product catalogs and dynamic content at scale.

BuildShip's Webflow and MySQL integration page describes BuildShip as a node-based workflow platform with these capabilities:

• Visual node builder: Drag-and-drop nodes for database operations (insert, update, query, delete)
• MySQL operations: Execute queries, retrieve data, and modify records visually
• Webflow integration: Trigger workflows on Webflow events and update CMS collections
• Real-time capabilities: Webhook-based architecture for instant synchronization
• No custom code: Complete workflow automation through visual interface

BaaS platforms provide several advantages over direct API integration. Visual backend builders define data structures and API endpoints without writing code. Pre-built integrations eliminate custom authentication complexity. Automatic data transformation handles MySQL-to-Webflow type conversions automatically. Managed hosting eliminates server management and scaling concerns. Webhook and API-driven architectures enable instant data flow. Built-in security includes credential management, SSL/TLS encryption, and secure API endpoints.

Start with Xano's Webflow connection page and the Webflow Connector for immediate CMS synchronization, or use BuildShip's integration for more complex multi-step workflows. Both platforms eliminate backend development while providing enterprise-grade MySQL connectivity and data management capabilities.

Backend-as-a-service platforms like Xano function as visual middleware layers for integrating MySQL databases with Webflow sites. These platforms provide visual API builders that handle MySQL operations and expose endpoints to Webflow while you configure backend logic through visual interfaces. The architecture works through three primary methods. The Xano Webflow Connector enables CMS synchronization. API endpoints process Webflow form submissions. Dynamic data display through embedded code fetches Webflow API data.

Xano's Webflow connection guide documents three implementation methods. The Webflow Connector handles CMS synchronization. Form submission handlers write to databases. API endpoints serve dynamic content to Webflow pages. You build database queries visually, create API endpoints with visual configuration, and connect Webflow through minimal JavaScript code snippets.

Implementation patterns include:

• Dynamic content display using Xano's backend-as-a-service platform: Create Xano API endpoints that query MySQL databases, then display results on Webflow pages through embedded JavaScript
• Form processing with database storage through custom API endpoints: Forms submit to Xano endpoints configured visually through Xano's interface, which validates and stores data in MySQL
• User authentication and session management with Xano middleware: Xano backend handles MySQL user lookups and authentication logic while Webflow displays protected content
• Real-time inventory updates for e-commerce: Xano API endpoints query MySQL for current stock levels and pricing, with results dynamically displayed on Webflow product pages

This approach requires understanding how to embed JavaScript in Webflow using the custom code embed element. You add fetch() calls to external API endpoints that connect to your MySQL database and return JSON data. A separate backend service or middleware platform handles the MySQL connections, query execution, and data transformation. Webflow cannot directly execute server-side database operations. The fetch() calls then update page elements with the returned data on the client side.

Build with Webflow and MySQL APIs

Custom API integration provides complete control over data synchronization, security, and business logic by building middleware applications that use MySQL connector libraries and call Webflow's REST API endpoints directly. This approach requires implementing Bearer token authentication (OAuth 2.0 recommended for production), managing API rate limits (60-120 requests per minute depending on plan), and building backend services that handle MySQL connections securely using prepared statements to prevent SQL injection. You implement bi-directional synchronization by storing Webflow item IDs in MySQL tables, using timestamps to track synchronization state, and implementing exponential backoff retry logic for rate limit handling. This method suits production applications requiring high-volume data processing, complex transformations, or enterprise security requirements such as PCI DSS compliance or multi-tenant data isolation.

The architecture follows this pattern. MySQL database triggers or scheduled jobs detect changes. Middleware applications query MySQL for updated records. Transformation logic maps database columns to Webflow field schemas. API calls create or update CMS collection items. For reverse synchronization, Webflow webhooks notify your middleware when CMS changes occur.

Synchronizing MySQL data to Webflow CMS

Reading data from MySQL and creating Webflow CMS items requires the Webflow CMS Collections API and a MySQL connector library. Your middleware application queries MySQL for records needing synchronization, transforms data to match Webflow's field structure, and makes POST requests to create items or PATCH requests to update existing items.

The MySQL Connector/Python documentation shows you establish database connections with credentials and execute parameterized queries to prevent SQL injection. Parameterized queries use placeholder syntax (like %s for Python) to safely separate SQL commands from user input. This is the recommended approach according to the OWASP SQL Injection Prevention Cheat Sheet:

import mysql.connector
import requests

# Connect to MySQL
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()

# Create Webflow items
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']
           }
       }
   )

   # Items are created in draft state and must be published separately
   if response.status_code == 201:
       item_id = response.json()['id']
       # Publish the item to make it live
       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 IDs in your MySQL tables to enable updates. Add columns like webflow_item_id and last_synced to track synchronization state. Webflow's CMS API bulk operations update shows the API supports bulk operations with a maximum of 100 items per request for creating or updating items, enabling higher throughput synchronization.

Capturing Webflow events in MySQL

Webflow webhooks send HTTP POST requests when CMS items change, forms submit, or e-commerce orders complete. Your middleware receives these webhook payloads and writes data to MySQL tables. The Webflow webhooks documentation shows you register webhook endpoints through the API and handle events like collection_item_created, collection_item_changed, collection_item_deleted, and form_submission.

Your webhook handler extracts data from the payload, validates it, and executes INSERT or UPDATE statements:

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

// Create connection pool (critical for serverless deployments per Vercel research)
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
});

// Webhook signature validation (per Webflow security documentation)
const crypto = require('crypto');

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 {
       // Validate webhook signature (required security check)
       const signature = req.headers['x-webflow-signature'];
       const timestamp = req.headers['x-webflow-timestamp'];

       if (!validateWebflowSignature(req.rawBody, signature, process.env.WEBFLOW_WEBHOOK_SECRET)) {
           return res.status(401).json({ error: 'Invalid signature' });
       }

       const { triggerType, payload } = req.body;

       // Get connection from pool
       const connection = await pool.getConnection();

       try {
           if (triggerType === 'collection_item_created') {
               // Use parameterized query to prevent SQL injection (OWASP required standard)
               await connection.execute(
                   'INSERT INTO cms_items (webflow_id, name, created_at) VALUES (?, ?, ?)',
                   [payload.itemId, payload.fieldData.name, new Date()]
               );

               // Store Webflow item ID for future updates
               await connection.execute(
                   'UPDATE products SET webflow_item_id = ? WHERE external_id = ?',
                   [payload.itemId, payload.fieldData.externalId]
               );
           }

           // Return success response
           return res.status(200).json({ success: true, itemId: payload.itemId });

       } finally {
           // Always release connection back to pool
           connection.release();
       }

   } catch (error) {
       console.error('Webhook processing error:', {
           triggerType: req.body?.triggerType,
           itemId: req.body?.payload?.itemId,
           error: error.message
       });

       // Return appropriate error status
       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 that check for existing records before inserting. The Webflow webhooks documentation notes Webflow retries failed webhook deliveries, so your handler must handle duplicate events gracefully. Store webhook signatures for validation and log all incoming events for debugging failed synchronizations.

Using Change Data Capture for enterprise-scale sync

Note: This method requires significant DevOps infrastructure and is designed for large enterprises syncing thousands of records per minute. Most Webflow projects should use automation platforms or backend-as-a-service solutions instead.

Change Data Capture (CDC) tools like Debezium read MySQL's binary log to capture every database modification in real-time. This approach works without triggers or polling queries. The Debezium MySQL Connector documentation shows Debezium connects to MySQL as a replication client via the binary log and emits structured change data capture events with before/after state information for every INSERT, UPDATE, and DELETE operation.

Configure MySQL with row-based binary logging using the MySQL replication formats guide:

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



Debezium publishes change events to Kafka topics. Your stream processor consumes these events, applies Debezium transformations (specifically the ExtractChangedRecordState transform documented in Debezium's transformation reference) to extract the changed record, and calls the Webflow API. This architecture scales to high-volume scenarios and provides guaranteed delivery through Kafka's durability.

The MySQL to Webflow synchronization architecture using Debezium separates database operations from synchronization concerns. Rather than using database triggers that write directly to external APIs (which creates performance overhead and tight coupling), Debezium asynchronously reads MySQL's binary log in ROW format to capture row-level changes. Application code writes to MySQL normally while the Debezium MySQL connector automatically detects these changes, transforms them into Webflow API payloads, and sends them to the CMS API. This architecture removes performance impact on write operations and reduces coupling between your application and Webflow by moving change detection outside the database transaction path.

What you can build

Integrating MySQL with Webflow through middleware platforms and backend-as-a-service solutions enables database-driven websites, real-time product catalogs, automated lead management systems, and complex user portals that exceed Webflow's native CMS limitations.

• E-commerce product catalogs with real-time inventory: Build online stores that display current stock levels, pricing, and product details from MySQL databases holding thousands of SKUs, automatically updating Webflow collection pages as inventory changes
• Membership portals with personalized content: Create member-only websites where MySQL stores user profiles, preferences, and access permissions, then dynamically shows relevant content based on who's logged in
• Lead management systems with automated workflows: Capture form submissions from Webflow landing pages directly into MySQL databases, triggering automated email sequences, sales notifications, and CRM record creation
• Multi-site content distribution networks: Maintain a single MySQL content database that publishes to multiple Webflow sites, managing blog posts, product updates, and marketing content from one centralized source