Connect Contentful to your Lovable app in minutes using the native Contentful shared connector. Go to Settings → Connectors → Shared connectors, enable Contentful, paste your Space ID and Content Delivery API key, then describe the content you want in the chat. Lovable's AI generates all the fetch logic automatically — no manual coding required. Ideal for dynamic pages, product catalogs, and blog feeds.
Why connect Contentful to your Lovable app?
Most founders building with Lovable hit the same wall: they need content that changes regularly — blog posts, product descriptions, team bios, pricing tables — but editing that content directly in Lovable means burning credits and waiting for AI rebuilds every time a sentence changes. Contentful solves this by separating your content from your code. You manage all your structured content in Contentful's web editor, and your Lovable app fetches and displays it automatically via the Content Delivery API.
The native Contentful connector makes this setup beginner-friendly. Unlike manually wiring a headless CMS (which involves writing fetch functions, handling pagination, mapping response schemas, and managing errors), the shared connector gives Lovable's AI complete knowledge of your Contentful configuration. Tell the AI what content type you want to display — say, a grid of blog post cards — and it generates correct, production-ready React components that pull directly from your Contentful space.
This integration is particularly powerful for apps with content that needs to be managed by non-technical team members. A marketing manager can update a Contentful entry and the change appears in the live Lovable app with zero code changes. For product catalogs, landing page copy, help center articles, or any content that evolves faster than your codebase, this is the right architecture.
Integration method
Contentful is one of Lovable's 17 shared connectors, configured once in Settings → Connectors and available to every project in your workspace with full AI-assisted code generation.
Prerequisites
- A Lovable account with an active workspace (free tier works)
- A Contentful account — free tier supports 1 space, 25,000 API calls/month, and up to 5,000 records
- At least one Content Type defined in your Contentful space (e.g., 'Blog Post', 'Product', 'FAQ')
- At least one published entry in that Content Type so you can verify data loads correctly
- Your Contentful Space ID and Content Delivery API key (found in Settings → API keys inside Contentful)
Step-by-step guide
Find your Contentful Space ID and Content Delivery API key
Find your Contentful Space ID and Content Delivery API key
Before configuring the connector in Lovable, you need two pieces of information from Contentful: your Space ID and your Content Delivery API key. Log into your Contentful account at app.contentful.com and select the space you want to connect. In the top navigation, click Settings, then select API keys from the dropdown menu. If you already have an API key listed, click on it to open the details. If not, click Add API key in the top-right corner to create one — give it a descriptive name like 'Lovable Production'. On the API key detail page, you will see two values you need. The first is the Space ID, displayed near the top of the page — it looks like a short alphanumeric string, for example 'abc12def3456'. The second is the Content Delivery API access token, listed under the 'Content Delivery API - access token' section. This is a long token string. The Content Preview API token listed below it is for draft content only and is not what you need here. Copy both values and keep them accessible — you will paste them into Lovable in the next step. Note that the Content Delivery API key is safe for client-side use (it only provides read access to published content), but Lovable's connector will store it server-side anyway as a best practice.
Expected result: You have your Contentful Space ID (short alphanumeric string) and Content Delivery API access token (long string) copied and ready to paste into Lovable.
Enable the Contentful shared connector in Lovable
Enable the Contentful shared connector in Lovable
Open your Lovable workspace and navigate to Settings using the gear icon in the sidebar or top-right area of the interface. Inside Settings, look for the Connectors section in the left navigation panel. Click on Connectors to expand the options, then select Shared connectors. You will see the list of all 17 available shared connectors for your workspace. Scroll through the list until you find Contentful — it is listed under the CMS category. Click on the Contentful tile or the Enable / Configure button next to it. A configuration panel will slide open asking for your credentials. In the Space ID field, paste the Space ID you copied from Contentful. In the Content Delivery API key field (sometimes labeled 'Access Token' or 'API Key'), paste your Content Delivery API access token. Once both fields are filled in, click Save or Connect. Lovable will validate the credentials by making a test request to the Contentful Content Delivery API. If the connection succeeds, you will see a green checkmark or 'Connected' status next to the Contentful connector. If you see an error, double-check that you copied the Content Delivery API token (not the Content Preview API token) and that the Space ID has no extra spaces. The connection is now workspace-wide — every project you open in this workspace will have access to the Contentful connector.
Expected result: The Contentful connector shows a 'Connected' status in Settings → Connectors → Shared connectors, with a green indicator confirming your credentials were accepted.
Tell Lovable what content to fetch from Contentful
Tell Lovable what content to fetch from Contentful
With the connector active, open the project you want to add Contentful content to and use Lovable's chat prompt to describe exactly what you want. The key to getting accurate results is being specific about your Contentful Content Type name (exactly as it appears in Contentful, case-sensitive) and how you want the content displayed on screen. For example, if you have a Content Type called 'Blog Post' with fields named 'title', 'slug', 'excerpt', 'heroImage', and 'publishedDate', describe that structure in your prompt. Lovable's AI, equipped with the Contentful connector context, will generate a React component that fetches entries using the Contentful Content Delivery API, maps the response fields to your component props, handles loading and error states, and renders the UI you described. You do not need to write any fetch logic, handle API pagination manually, or configure CORS — the connector handles all of that. If your content type has linked entries (for example, a 'Blog Post' that references an 'Author' entry), mention that in your prompt too. Lovable can generate code that resolves linked entries so you can display author names, profile images, and bios alongside each post.
Add a blog feed page that fetches all published entries from my Contentful space using the Content Type 'Blog Post'. Each post has fields: title (short text), slug (short text), excerpt (short text), heroImage (media), and publishedDate (date). Display them as a responsive grid of cards — each card showing the hero image, title, publish date, and excerpt, with a Read More link. Show a loading skeleton while content fetches and a friendly error message if the fetch fails.
Paste this in Lovable chat
Expected result: Lovable generates a blog feed page component that fetches entries from your Contentful space and renders them as cards. You can see the component in the preview with your actual Contentful content populating the cards.
Build a dynamic detail page powered by Contentful
Build a dynamic detail page powered by Contentful
A content feed is just the starting point — most apps also need individual detail pages where users can read a full blog post, view a complete product listing, or see a full FAQ entry. Because Lovable has the Contentful connector context, you can extend your app to include these detail pages with a single follow-up prompt, and the AI will generate the correct routing, the Contentful API call to fetch a single entry by slug, and the detailed layout. The typical pattern is: the feed page lists all entries with their slugs, each card links to a detail route like /blog/:slug, and the detail page component fetches the specific Contentful entry by that slug using the Contentful Content Delivery API's search-by-field functionality. Lovable handles the React Router setup, the conditional fetch call, the rich text rendering (if your Contentful entry uses a Rich Text field), and the loading/error states for the detail page. If your Contentful entry includes a Rich Text field (which renders as a complex JSON structure rather than plain text), mention this explicitly in your prompt. Lovable can include the @contentful/rich-text-react-renderer package and generate the correct rendering code. This is important — Raw Rich Text fields will not display correctly if Lovable does not know to use the dedicated renderer.
Add a dynamic blog post detail page at the route /blog/:slug. It should fetch the single Contentful entry where the slug field matches the URL parameter, then display the full post with: hero image at the top, title as an H1, publish date formatted as 'March 15, 2026', and the body content which is a Contentful Rich Text field — render it using @contentful/rich-text-react-renderer. Add a Back to Blog link at the top. Handle loading and error states gracefully.
Paste this in Lovable chat
Expected result: A working detail page renders at /blog/[your-slug] showing the full content from Contentful including the rich text body. Clicking a card on the feed page navigates to the correct detail page.
Test with live Contentful content and publish
Test with live Contentful content and publish
Before publishing your app, verify that the Contentful integration is working correctly with real content. In the Lovable preview pane, navigate to the pages that display Contentful data. You should see your actual published Contentful entries loading — if you see placeholder data or empty states, the most common cause is that no entries have been published in Contentful (draft entries are not returned by the Content Delivery API — only published entries are). To confirm the integration is working end-to-end, go to your Contentful space, open one of the entries you are displaying in Lovable, make a small change to the text (for example, add a word to the title), and publish the entry. Refresh the Lovable preview. The updated content should appear within a few seconds, confirming the live data fetch is working correctly. Once you are satisfied with how the content renders, click the Publish icon in the top-right corner of the Lovable editor to deploy the app. Content updates you make in Contentful will appear in the live app automatically without any redeployment needed — this is the core benefit of the headless CMS architecture. For teams with multiple content editors, you can also explore adding Contentful webhooks in a future iteration to trigger cache invalidation or instant preview refreshes when content is published.
Check that all Contentful API calls are using the Content Delivery API endpoint (not the Preview API), that we handle the case where no entries are returned gracefully, and that images from Contentful are displayed using the image URL from the entry's media field. Also make sure the app shows a clear 'Content not found' message on the detail page if a slug does not match any Contentful entry.
Paste this in Lovable chat
Expected result: The published Lovable app displays live Contentful content, updates automatically when you publish changes in Contentful, and handles edge cases (no entries, invalid slugs, failed fetches) with appropriate user-facing messages.
Common use cases
Tell Lovable what content to fetch from Contentful
Use Contentful with Lovable to tell lovable what content to fetch from contentful. This is one of the most common use cases when integrating Contentful into your Lovable application.
Add a blog feed page that fetches all published entries from my Contentful space using the Content Type 'Blog Post'. Each post has fields: title (short text), slug (short text), excerpt (short text), heroImage (media), and publishedDate (date). Display them as a responsive grid of cards — each card showing the hero image, title, publish date, and excerpt, with a Read More link. Show a loading skeleton while content fetches and a friendly error message if the fetch fails.
Copy this prompt to try it in Lovable
Build a dynamic detail page powered by Contentful
Take your Contentful integration further by build a dynamic detail page powered by contentful. This builds on the basic setup to create a more complete experience.
Add a dynamic blog post detail page at the route /blog/:slug. It should fetch the single Contentful entry where the slug field matches the URL parameter, then display the full post with: hero image at the top, title as an H1, publish date formatted as 'March 15, 2026', and the body content which is a Contentful Rich Text field — render it using @contentful/rich-text-react-renderer. Add a Back to Blog link at the top. Handle loading and error states gracefully.
Copy this prompt to try it in Lovable
Test with live Contentful content and publish
Prepare your Contentful integration for production by test with live contentful content and publish. Ensures your integration works reliably for real users.
Check that all Contentful API calls are using the Content Delivery API endpoint (not the Preview API), that we handle the case where no entries are returned gracefully, and that images from Contentful are displayed using the image URL from the entry's media field. Also make sure the app shows a clear 'Content not found' message on the detail page if a slug does not match any Contentful entry.
Copy this prompt to try it in Lovable
Troubleshooting
Connector shows 'Connection failed' or 'Invalid credentials' after saving
Cause: The most common cause is pasting the Content Preview API token instead of the Content Delivery API token. These are two separate tokens on the same API keys page in Contentful, and they look identical in format. A wrong Space ID (extra space, wrong case, or wrong space selected) is the second most common cause.
Solution: Go back to Contentful → Settings → API keys and open your API key entry. Confirm you are copying the value under 'Content Delivery API - access token' (NOT 'Content Preview API - access token'). Also double-check the Space ID at the top of the same page — it should be a short string like 'abc12def3456' with no extra whitespace. Return to Lovable → Settings → Connectors → Contentful, clear both fields, and re-enter the values carefully.
The page loads but shows no content — cards are empty or the feed is blank
Cause: Contentful's Content Delivery API only returns published entries. If your entries are in 'Draft' status, they will not appear. Additionally, if the Content Type ID in your Lovable prompt does not match the exact API identifier of the content type in Contentful (which may differ from the display name), the API returns zero results.
Solution: In Contentful, open the entry you expect to see and check its status in the top-right corner — it must say 'Published' (green), not 'Draft' or 'Changed'. To verify your Content Type's API identifier, go to Content model in Contentful, open the content type, and look at the API Identifier field — it is often a camelCase version of the display name (e.g., 'blogPost' rather than 'Blog Post'). Update your Lovable prompt to use the exact API Identifier, then ask Lovable to update the fetch query.
Rich text content displays as '[object Object]' or raw JSON instead of formatted text
Cause: Contentful Rich Text fields return a complex JSON document structure (not a plain string), which cannot be rendered directly. If Lovable was not told the field is Rich Text, it may generate code that tries to render the raw value.
Solution: In Lovable's chat, tell the AI: 'The body field is a Contentful Rich Text field — update the component to import documentToReactComponents from @contentful/rich-text-react-renderer and use it to render the body content instead of displaying it directly.' Lovable will update the component to install and use the correct renderer package, which converts the Contentful document structure into proper HTML elements.
Best practices
- Use Contentful's Content Type API Identifier (camelCase) in your Lovable prompts, not the human-readable display name — they often differ and using the wrong one returns zero results with no error.
- Keep your Content Delivery API key read-only and never give it write permissions — the Content Delivery API is read-only by design, so this is enforced by Contentful, but avoid accidentally using a Content Management API key which has write access.
- Structure your Contentful Content Types with SEO fields (meta title, meta description, canonical URL) from day one — it is much easier to add these fields before building the Lovable pages than to retrofit them later.
- For image-heavy apps, use Contentful's built-in image transformation API in your URLs (e.g., append ?w=800&fm=webp&q=80) to serve optimized images — mention this optimization to Lovable when building image components.
- Always include a fallback UI for when Contentful content fails to load — a network blip or Contentful API outage should show a friendly error state, not a broken page. Ask Lovable to add error boundaries around Contentful-powered sections.
- Organize your Contentful entries with clear slug conventions (kebab-case, no special characters) before connecting to Lovable — changing slug formats later can break all your detail page routes.
- For apps with large content libraries (500+ entries), ask Lovable to implement pagination using Contentful's skip and limit query parameters — fetching all entries at once will slow page load and can hit the API's per-request limit of 1,000 entries.
- Use Contentful's Environments feature (available on paid plans) to maintain a separate 'staging' environment for testing content changes before they go live — connect your Lovable development project to the staging environment and the production project to the master environment.
Alternatives
Choose Firecrawl if you need to pull in content from existing websites you do not control — Firecrawl scrapes and structures arbitrary web content, while Contentful requires you to manage and publish content yourself.
Choose WordPress if your team already manages a WordPress site and wants to use its existing content via the REST API or WPGraphQL — WordPress is better for teams with existing CMS workflows, while Contentful is cleaner for greenfield structured content.
Choose Ghost if your primary use case is a publication or newsletter — Ghost has a native members and subscriptions model built in, making it a better fit than Contentful for content monetization scenarios.
Frequently asked questions
Does the Contentful connector work on Lovable's free tier?
Yes. The Contentful shared connector is available on all Lovable plans, including the free tier. You can configure it in Settings → Connectors and use it across all your workspace projects. Lovable's free tier gives you 5 daily credits (max 30/month), so each prompt that generates Contentful-powered components uses less than 1 credit. Contentful itself also has a free tier supporting 1 space, 25,000 API calls per month, and up to 5,000 records — more than enough to build and test a complete app.
Do I need to redeploy my Lovable app every time I update content in Contentful?
No — this is one of the main benefits of the headless CMS architecture. Your Lovable app fetches content from Contentful's API at runtime, so when you publish a change in Contentful, it appears in your live app automatically without any redeployment. There is typically a short propagation delay of a few seconds due to Contentful's CDN caching, but no action is required on the Lovable side.
Can I use the Contentful Preview API to show draft content in Lovable?
Yes, but it requires a separate configuration. The standard connector uses the Content Delivery API which only shows published content. To display draft content (useful for content previews before publishing), you would need to prompt Lovable to add a preview mode that uses the Content Preview API endpoint and your Preview API token. This is a more advanced setup — ask Lovable: 'Add a preview mode that uses the Contentful Preview API endpoint (preview.contentful.com) and preview token for draft content, activated by a ?preview=true URL parameter.'
What happens if I have multiple Contentful spaces — can I connect more than one?
The standard Contentful shared connector connects to a single space. If you need content from multiple Contentful spaces, the recommended approach is to use one primary space with the connector and prompt Lovable to make direct API calls for secondary spaces, storing the additional Space ID and token in Cloud → Secrets. For complex cases with multiple content environments, RapidDev's team can help architect a clean multi-space data layer.
Is the Content Delivery API key secure when stored in Lovable?
Yes. Lovable stores the Content Delivery API key in its encrypted secrets store, not in your project's frontend code. The Content Delivery API key itself is read-only by design — it can only fetch published content from your space and cannot create, update, or delete any content. Even if it were exposed, an attacker could only read your public content, which is the same content visible to all users of your app anyway. Never use a Content Management API key in Lovable — that key has write access and should be treated as a sensitive secret.
Can Lovable write content back to Contentful, for example to capture user submissions?
Not through the shared connector, which uses the read-only Content Delivery API. Writing to Contentful requires the Content Management API, which is a separate, write-enabled API with different authentication. If you need to write to Contentful from user actions — for example, collecting form submissions as Contentful entries — you would need a separate Edge Function that uses the Content Management API token stored securely in Cloud → Secrets. This is an advanced pattern; for simple form data collection, Lovable's built-in Supabase database is a much easier alternative.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation