Contentful integration
Contentful is an API-first headless CMS: published content comes from the Content Delivery API and drafts from the Preview API. We connect it to Astro and Next.js with the official contentful SDK, with draft preview and rebuild-on-publish. Webflow has no native Contentful app and Framer only has a third-party sync, so Contentful fits best behind a coded site.
| Complexity | High |
|---|---|
| Method |
|
| Typical setup | 3 to 6 days |
| What we do | We map content types to page sections, wire the SDK and Draft Mode preview, and set up rebuild-on-publish. |
| Category | CMS |
Setup by platform
How we set up Contentful
Framer
- Native
A third-party plugin (Contentful CMS Sync) imports chosen content types into Framer managed collections and maps rich text, assets and references. It is a one-way import.
Webflow
- API
- Zapier or Make
Webflow lists no native Contentful app. We sync entries into Webflow CMS through the Webflow Data API, or use Zapier or n8n for simple flows. A client-side Code Embed only works with a public, read-only delivery token.
Astro
- API
We use the contentful SDK with the rich text renderer, Delivery API in production and Preview API in development. A Contentful webhook calls the host’s build hook so publishing rebuilds the static site.
Next.js
- API
The contentful SDK with Next.js Draft Mode: a route handler switches to the preview token for editors, and @contentful/live-preview adds live updates and inspector mode while Draft Mode is on.
Use cases
What teams use it for
Multi-brand content hub
One model feeds many sites, regions or products, with roles and workflows for big teams.
Publish-triggered rebuilds
Editors hit publish and the static site rebuilds itself, so pages stay fast without manual deploys.
Preview before publish
Editors open drafts in the real design from the sidebar, on Vercel or Netlify previews.
Before you add it
What to watch out for
Security
Two tokens, two jobs
The preview token reads drafts, so it stays in a server environment variable and is only used in Draft Mode. Only the delivery token can ever be public.
Performance
Ask the Images API for modern formats
Contentful’s Images API converts to WebP or AVIF with the fm parameter. We set sizes and formats per breakpoint instead of loading originals.
Limits
Rebuild time grows with content
A static site with thousands of entries takes longer to rebuild on each publish. Past a certain size we render some routes on demand instead.
FAQ
Questions about Contentful
Is there an official Contentful app for Webflow?
No. Webflow’s own integrations page lists Code Embed, automation tools and direct API connections as the routes. For a Contentful-first setup we recommend Astro or Next.js.
How does a static site update when an editor publishes?
Add your host’s build hook as a Contentful webhook, or use Contentful’s Netlify app, which can deploy automatically when chosen content types are published.
Contentful or Sanity?
Both work well with Astro and Next.js. Contentful suits larger teams that want strict roles and a marketplace of apps; Sanity suits teams that want a customisable editor and live preview with less setup. We help you choose during discovery.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call