Neon

Webflow's CMS handles content well up to its item limits. What it does not do is run SQL queries, JOIN across tables, enforce row-level security, or filter complex datasets with thousands of records. When a project needs structured data at scale, like searchable directories, user-specific records, and full-text search, the CMS cannot handle it alone.

Neon adds a fully managed PostgreSQL database that scales compute automatically and pauses when idle. A serverless function or automation tool sits between Webflow and Neon, reading from or writing to the database on demand. Data flows into Webflow CMS collections through the API, or renders directly on pages through client-side fetch calls.

This integration applies to agencies building data-heavy client sites, SaaS teams pairing a Webflow marketing site with an application database, and developers adding search, authentication, or structured content pipelines to Webflow pages.

How to integrate Neon with Webflow

What is Neon? Neon is a serverless Postgres database service that separates compute from storage, enabling autoscaling, scale-to-zero billing, instant database branching, and pooled connection support. It runs standard PostgreSQL and works with Postgres drivers, ORMs, and standard tooling.

Teams reach for Neon and Webflow together when they need relational data beyond what the CMS supports — complex filtering across large datasets, user-specific records, or structured content pipelines that push data into Webflow from an external source.

The Neon-Webflow integration supports three approaches:

• Code Embed elements with the Neon Data API let you fetch and render Neon data on Webflow pages using JavaScript, without server infrastructure.  
• Zapier, n8n, and other automation tools move data between Webflow forms, CMS collections, and Neon tables through visual workflow builders.  
• The Webflow and Neon APIs with serverless functions give full control over data sync, form storage, webhook-driven updates, and custom query logic, but require backend development.

Most production integrations combine methods. For example, using the APIs for CMS sync and an automation tool for form submissions.

Add Neon data to Webflow pages with Code Embed elements

The Neon Data API provides an HTTP interface for querying your Postgres database from a browser or edge runtime. Use a Code Embed element in Webflow to fetch data from Neon and render it on the page. This works for displaying live metrics, search results, or filtered content that exceeds CMS limits. The Data API uses a PostgREST-compatible surface and is currently in beta.

This method suits browser-side reads and carefully controlled client-side writes:

• Display data from Neon tables using raw HTTP requests or a PostgREST-compatible client  
• Insert records from Webflow form submissions by intercepting the submit event and posting to the Data API  
• Filter and sort results using standard HTTP query parameters  
• Authenticate requests with JWTs that enforce PostgreSQL row-level security

Two security constraints apply here. Never place Neon connection strings in Code Embed elements or in custom code added to page head or body sections — that code runs in the browser and is visible to all visitors. And when using the Data API from client-side code, row-level security must be configured in Neon so that JWT-authenticated requests only return data the user is authorized to see.

Fetch and render Neon data in a Code Embed

Add a Code Embed element to your Webflow page and write a fetch() call targeting your Neon Data API endpoint. The endpoint is specific to each branch and is available in the Neon Console after enabling the Data API. Pass a JWT in the Authorization header, parse the returned JSON, and inject values into DOM elements on the page.

// Example: Fetch posts from Neon Data API
const response = await fetch('https://<data-api-url>/posts', {
 headers: { 'Authorization': 'Bearer <jwt>' }
});
const data = await response.json();
// Render data into Webflow page elements



If you use a PostgREST-compatible client, the same query can be expressed with methods like client.from('posts').select('*'). This pattern suits read-heavy use cases such as directories, dashboards, or filtered listings. Route write operations that require server-side credentials through a serverless function instead.

Route form submissions through a serverless function

For form data that needs to reach Neon securely, deploy a serverless function on Vercel, Netlify, or Cloudflare Workers. The function holds the Neon connection string as an environment variable and uses the @neondatabase/serverless driver to execute SQL.

import { neon } from '@neondatabase/serverless';

export async function POST(req) {
 const sql = neon(process.env.DATABASE_URL);
 const body = await req.json();
 await sql`
   INSERT INTO form_submissions (name, email, message)
   VALUES (${body.name}, ${body.email}, ${body.message})
 `;
 return new Response('OK', { status: 200 });
}



In Webflow, add a Code Embed with JavaScript that intercepts the form submission and sends a fetch() POST to your function's URL. Use the pooled connection string — the hostname contains -pooler — for serverless deployments. Neon's built-in PgBouncer handles high connection concurrency. If your deployment environment has its own connection method guidance, follow that platform's documentation.

Connect with Zapier, n8n, or other automation tools

Automation platforms bridge Webflow and Neon without requiring custom code. They work well for capturing form submissions, syncing CMS content on a schedule, and triggering database writes from Webflow events. Zapier and n8n both have native connectors for Webflow and PostgreSQL, making them the most direct options. Note that Zapier's PostgreSQL connector requires a paid plan, as Zapier classifies it as a Premium app.

Some common patterns using automation tools:

• Capture Webflow form submissions and write them to a Neon table using Zapier's New Form Submission trigger paired with the PostgreSQL Create Row action  
• Sync Neon query results into Webflow CMS collections using n8n's Postgres node to run a SELECT, then the Webflow node to create or update items  
• Push Webflow e-commerce orders into Neon for reporting using the New Order trigger and a PostgreSQL insert action  
• Poll for updated Neon rows and update corresponding Webflow CMS items using n8n's scheduled workflow execution

These workflows suit scheduled sync and event-driven automation rather than live page rendering. n8n includes both the Webflow and Postgres nodes across all tiers and charges based on workflow executions rather than per connector. No official Webflow and PostgreSQL templates exist on either platform at the time of writing — workflows require building from scratch.

Set up Zapier for Webflow form data to Neon

Create a new Zap with the Webflow trigger set to New Form Submission. Authenticate with your Webflow site token. For the action step, select PostgreSQL and enter your Neon connection details: host, port 5432, database name, username, password, and SSL mode set to require. Map form field values to table columns.

This pattern writes data into Neon but does not display Neon data on your Webflow site. To push Neon data back into Webflow CMS collections, create a separate Zap or n8n workflow that queries Neon on a schedule and calls the Webflow Create Item or Update Live Item action.

Set up n8n for two-way Neon and Webflow sync

n8n's Postgres node authenticates with standard Postgres credentials from your Neon project dashboard. The Webflow node connects via API token. Build a workflow that runs a Postgres SELECT query, iterates over results, and creates or updates Webflow CMS items for each row. Reverse the flow to pull Webflow CMS changes into Neon using the Webflow trigger node.

n8n can run self-hosted or as a cloud service, giving more control over execution frequency and data handling than Zapier's polling-based approach.

Build with the Webflow and Neon APIs

Direct integration using the Webflow API and the Neon serverless driver — deployed inside a serverless function — gives full control over CMS content sync, form data storage, webhook-driven updates, and custom query logic. This approach requires deploying middleware on Vercel, Cloudflare Workers, or Netlify, and a developer to build and maintain it.

Common use cases for this path include syncing Neon data into Webflow CMS collections, storing Webflow form submissions in Neon via webhooks, reacting to CMS changes by subscribing to collection_item_created and collection_item_changed events, running complex SQL queries and pushing results back to Webflow collections, and provisioning database branches for staging environments using the Neon Management API.

All Webflow API requests authenticate with a Bearer token scoped to a specific site or workspace. All Neon driver calls use a connection string stored as an environment variable in your serverless function's deployment platform.

Sync Neon data to Webflow CMS collections

Discover the target collection's ID and schema using GET /v2/sites/:site_id/collections. Query your Neon database using the @neondatabase/serverless driver.

import { neon } from '@neondatabase/serverless';
const sql = neon(process.env.DATABASE_URL);
const rows = await sql`SELECT * FROM products WHERE updated_at > ${lastSyncTimestamp}`;



For each row, create or update a Webflow CMS item by calling POST /v2/collections/:collection_id/items with a fieldData object that maps Neon columns to Webflow collection fields. After creating items, publish them with POST /v2/collections/:collection_id/items/publish.

{
 "fieldData": {
   "name": "Product Name",
   "slug": "product-name",
   "description": "Value from Neon"
 }
}



The Webflow API returns paginated responses. Implement offset-based pagination by incrementing offset by limit until offset >= total. Add delays between batches and implement retry logic with exponential backoff on 429 responses.

Store Webflow form submissions in Neon

Register a webhook to receive form submissions by calling POST /v2/sites/:site_id/webhooks with triggerType set to form_submission and url set to your serverless function endpoint.

import { neon } from '@neondatabase/serverless';

export async function POST(req) {
 const sql = neon(process.env.DATABASE_URL);
 const body = await req.json();
 await sql`
   INSERT INTO form_submissions (site_id, form_name, data, submitted_at)
   VALUES (${body.siteId}, ${body.formName}, ${JSON.stringify(body.data)}, NOW())
 `;
 return new Response('OK', { status: 200 });
}



Deploy this function on Cloudflare Workers, Vercel, or Netlify — each platform stores DATABASE_URL as an environment variable. Refer to the Neon guides for Cloudflare Workers, Vercel, and Netlify Functions for platform-specific setup steps.

Keep Neon in sync with Webflow CMS changes

Subscribe to CMS mutation events by registering webhooks for collection_item_created and collection_item_changed. Your serverless function receives webhook payloads containing the item ID, collection ID, and site ID.

await sql`
 INSERT INTO cms_sync_log (webflow_item_id, collection_id, site_id, event_type, received_at)
 VALUES (${event.itemId}, ${event.collectionId}, ${event.siteId}, ${event.triggerType}, NOW())
 ON CONFLICT (webflow_item_id) DO UPDATE
 SET event_type = EXCLUDED.event_type,
     received_at = EXCLUDED.received_at
`;



Webflow supports up to 75 webhook registrations per trigger type per site. For high-traffic sync scenarios, use the CDN-cached read endpoint at api-cdn.webflow.com to fetch published item details after receiving a change event.

What you can build with the Neon Webflow integration

Integrating Neon with Webflow lets you store and query relational data at scale without replacing your Webflow frontend or manually managing a database server.

• Financial data platform with advanced filtering: Build a searchable directory of thousands of company records with filters for industry, revenue range, and growth metrics — with combobox filters, range sliders, and a serverless function handling SQL JOINs and aggregations behind the Webflow frontend.  
• Programmatic SEO content pipeline: Maintain a Neon database as the single source of truth for structured listing data — job postings, product comparisons, or location pages — and use a scheduled serverless function to push records into Webflow CMS collections via the Items API, generating published pages without manual CMS entry.  
• AI-powered search: Store vector embeddings alongside relational data using Neon's pgvector extension. A Code Embed search input sends queries to a serverless function that runs vector similarity search in Neon and returns ranked results, without a separate search service.  
• Form data warehouse with reporting: Capture every Webflow form submission into a Neon table using a webhook-triggered serverless function. Query submission data with SQL for conversion analysis, export to BI tools, or sync aggregated metrics back into a Webflow CMS Collection List for display on a dashboard page.

For any of these use cases, start with the Neon serverless driver documentation and the Webflow CMS API reference to map your data model to both systems.