Top Related Projects
π Strapi is the leading open-source headless CMS. Itβs 100% JavaScript/TypeScript, fully customizable and developer-first.
Sanity Studio β Rapidly configure content workspaces powered by structured content
The Modern Data Stack π° β Directus is an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database.
The superpowered headless CMS for Node.js β built with GraphQL and React
A Git-based CMS for Static Site Generators
Quick Overview
Contentful.js is the official JavaScript SDK for Contentful's Content Delivery API and Content Preview API. It allows developers to easily integrate Contentful's headless CMS capabilities into their JavaScript applications, providing a seamless way to fetch and manage content.
Pros
- Easy to use and well-documented API
- Supports both browser and Node.js environments
- Provides rich querying capabilities for content
- Offers built-in caching mechanisms for improved performance
Cons
- Limited to read-only operations (no content management features)
- Requires a good understanding of Contentful's content model
- May have a learning curve for developers new to headless CMS concepts
- Dependency on Contentful's services and potential vendor lock-in
Code Examples
Fetching entries from Contentful:
const client = contentful.createClient({
space: 'your_space_id',
accessToken: 'your_access_token'
});
client.getEntries()
.then((response) => console.log(response.items))
.catch(console.error);
Querying content with filters:
client.getEntries({
content_type: 'blogPost',
'fields.tags': 'javascript',
order: '-sys.createdAt'
})
.then((response) => console.log(response.items))
.catch(console.error);
Retrieving a single entry by ID:
client.getEntry('entry_id')
.then((entry) => console.log(entry))
.catch(console.error);
Getting Started
-
Install the package:
npm install contentful
-
Import and initialize the client:
const contentful = require('contentful'); const client = contentful.createClient({ space: 'your_space_id', accessToken: 'your_access_token' });
-
Make your first API call:
client.getEntries() .then((response) => console.log(response.items)) .catch(console.error);
Remember to replace 'your_space_id'
and 'your_access_token'
with your actual Contentful space ID and access token.
Competitor Comparisons
π Strapi is the leading open-source headless CMS. Itβs 100% JavaScript/TypeScript, fully customizable and developer-first.
Pros of Strapi
- Open-source and self-hosted, offering full control over data and infrastructure
- Highly customizable with a plugin system and extensible architecture
- Built-in user-friendly admin panel for content management
Cons of Strapi
- Requires more setup and maintenance compared to cloud-based solutions
- May have higher hosting costs and resource requirements for large-scale applications
- Steeper learning curve for developers new to headless CMS systems
Code Comparison
Strapi (Content Type Builder API):
module.exports = ({ strapi }) => ({
async createContentType(data) {
const contentType = await strapi.contentTypes.create(data);
return contentType;
},
});
Contentful.js (Content Management API):
const contentful = require('contentful-management');
const client = contentful.createClient({
accessToken: '<access_token>'
});
client.getSpace('<space_id>')
.then((space) => space.createContentType({
name: 'Blog Post',
fields: [
{ id: 'title', name: 'Title', type: 'Text' },
{ id: 'content', name: 'Content', type: 'Text' }
]
}));
The code examples demonstrate how to create content types in both systems. Strapi uses a more straightforward API within its plugin system, while Contentful.js requires setting up a client and uses promises for API interactions.
Sanity Studio β Rapidly configure content workspaces powered by structured content
Pros of Sanity
- More flexible content modeling with customizable schemas
- Real-time collaboration features for content editors
- Powerful query language (GROQ) for complex data retrieval
Cons of Sanity
- Steeper learning curve due to more complex setup and configuration
- Potentially higher costs for larger projects or high-traffic sites
- Less extensive marketplace for pre-built integrations compared to Contentful
Code Comparison
Sanity query example:
const query = `*[_type == "movie"] {
title,
releaseDate,
"director": director->name
}`
const result = await client.fetch(query)
Contentful query example:
const entries = await client.getEntries({
content_type: 'movie',
select: 'fields.title,fields.releaseDate,fields.director.fields.name'
})
Both Sanity and Contentful.js are popular headless CMS solutions, but they differ in their approach to content management. Sanity offers more flexibility and customization options, while Contentful.js provides a simpler setup and extensive integration ecosystem. The choice between the two depends on project requirements, team expertise, and scalability needs.
The Modern Data Stack π° β Directus is an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database.
Pros of Directus
- Open-source and self-hosted, offering more control and customization
- Supports multiple database types (MySQL, PostgreSQL, SQLite, etc.)
- Includes a built-in admin panel for content management
Cons of Directus
- Requires more setup and maintenance compared to cloud-based solutions
- May have a steeper learning curve for non-technical users
- Performance can depend on your hosting infrastructure
Code Comparison
Directus (JavaScript SDK):
import { Directus } from '@directus/sdk';
const directus = new Directus('https://api.example.com');
const articles = await directus.items('articles').readMany();
Contentful.js:
import { createClient } from 'contentful';
const client = createClient({
space: 'your_space_id',
accessToken: 'your_access_token'
});
const entries = await client.getEntries({ content_type: 'article' });
Both SDKs provide similar functionality for fetching content, but Directus uses a more generic "items" approach, while Contentful.js is more content-type specific. Directus offers more flexibility in terms of data structure and storage, while Contentful.js is designed specifically for the Contentful platform and its content model.
The superpowered headless CMS for Node.js β built with GraphQL and React
Pros of Keystone
- Full-featured, customizable CMS with built-in admin UI
- Supports GraphQL API out of the box
- Flexible data modeling with custom fields and relationships
Cons of Keystone
- Steeper learning curve due to its comprehensive feature set
- Requires more setup and configuration compared to Contentful.js
- Self-hosted solution, which means more maintenance responsibility
Code Comparison
Keystone (schema definition):
const { Text, Relationship } = require('@keystonejs/fields');
module.exports = {
fields: {
title: { type: Text },
author: { type: Relationship, ref: 'User' },
},
};
Contentful.js (content retrieval):
const client = contentful.createClient({
space: 'your_space_id',
accessToken: 'your_access_token',
});
client.getEntries({ content_type: 'blogPost' })
.then((response) => console.log(response.items));
Keystone offers a more comprehensive CMS solution with built-in admin UI and GraphQL support, while Contentful.js provides a simpler, cloud-based content management approach. Keystone allows for more customization but requires more setup and maintenance. Contentful.js is easier to get started with but may have limitations for complex use cases.
A Git-based CMS for Static Site Generators
Pros of Decap CMS
- Open-source and self-hosted, offering more control and customization
- Integrates well with static site generators and Git-based workflows
- User-friendly interface for content editors, requiring less technical knowledge
Cons of Decap CMS
- Requires more setup and configuration compared to Contentful's managed service
- Limited built-in features for content modeling and localization
- Smaller ecosystem and community support
Code Comparison
Decap CMS (config.yml):
backend:
name: git-gateway
branch: main
collections:
- name: "blog"
label: "Blog"
folder: "content/blog"
create: true
fields:
- {label: "Title", name: "title", widget: "string"}
Contentful.js:
const client = contentful.createClient({
space: 'your_space_id',
accessToken: 'your_access_token'
});
client.getEntries({
content_type: 'blogPost'
}).then((response) => console.log(response.items));
The code snippets demonstrate the configuration approach for Decap CMS and the API usage for Contentful.js. Decap CMS uses a YAML configuration file to define content models, while Contentful.js relies on API calls to retrieve content from the Contentful service.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Content Delivery API
Javascript
Readme ΓΒ· Migration ΓΒ· Advanced ΓΒ· TypeScript ΓΒ· Contributing
Introduction
JavaScript library for the Contentful Content Delivery API and Content Preview API. It helps you to easily access your content stored in Contentful with your JavaScript applications.
What is Contentful?
Contentful provides content infrastructure for digital teams to power websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enables developers and content creators to ship their products faster.
Table of contents
Core Features
- Content retrieval through Content Delivery API and Content Preview API.
- Synchronization
- Localization support
- Link resolution
- Built in rate limiting with recovery procedures
- Supports Environments (since
v6.0.0
)
Supported browsers and Node.js versions
- Chrome
- Firefox
- Edge
- Safari
- node.js (LTS)
See list of min supported browser version here @contentful/browserslist-config
The default export is an es9
compliant module. In order to import the commonJS
bundle, please use:
const contentful = require('contentful/contentful.node')
Getting started
In order to get started with the Contentful JS library you'll need not only to install it, but also to get credentials which will allow you to have access to your content in Contentful.
- Installation
- Your first request
- Using this library with the Preview API
- Authentication
- Documentation & References
Installation
npm install contentful
Using it directly in the browser
For browsers, we recommend downloading the library via npm or yarn to ensure 100% availability.
If you'd like to use a standalone built file you can use the following script tag or download it from jsDelivr, under the dist
directory:
<script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"></script>
Using contentful@latest
will always get you the latest version, but you can also specify a specific version number.
<script src="https://cdn.jsdelivr.net/npm/contentful@9.0.1/dist/contentful.browser.min.js"></script>
The Contentful Delivery library will be accessible via the contentful
global variable.
Check the releases page to know which versions are available.
Your first request
The following code snippet is the most basic one you can use to get some content from Contentful with this library:
const contentful = require('contentful')
const client = contentful.createClient({
// This is the space ID. A space is like a project folder in Contentful terms
space: 'developer_bookshelf',
// This is the access token for this space. Normally you get both ID and the token in the Contentful web app
accessToken: '0b7f6x59a0',
})
// This API call will request an entry with the specified ID from the space defined at the top, using a space-specific access token
client
.getEntry('5PeGS2SoZGSa4GuiQsigQu')
.then((entry) => console.log(entry))
.catch((err) => console.log(err))
Check out this JSFiddle version of our Product Catalogue demo app.
Using this library with the Preview API
This library can also be used with the Preview API. In order to do so, you need to use the Preview API Access token, available on the same page where you get the Delivery API token, and specify the host of the preview API, such as:
const contentful = require('contentful')
const client = contentful.createClient({
space: 'developer_bookshelf',
accessToken: 'preview_0b7f6x59a0',
host: 'preview.contentful.com',
})
You can find all available methods of our client in our reference documentation.
Authentication
To get your own content from Contentful, an app should authenticate with an OAuth bearer token.
You can create API keys using the Contentful web interface. Go to the app, open the space that you want to access (top left corner lists all the spaces), and navigate to the APIs area. Open the API Keys section and create your first token. Done.
Don't forget to also get your Space ID.
For more information, check the Contentful REST API reference on Authentication.
Documentation & References
- Configuration
- Client chain modifiers
- Reference documentation
- Tutorials & other resources
- Troubleshooting
- TypeScript
- Advanced concepts
- Migration
To help you get the most out of this library, we've prepared all available client configuration options, a reference documentation, tutorials and other examples that will help you learn and understand how to use this library.
Configuration
The createClient
method supports several options you may set to achieve the expected behavior:
contentful.createClient({
...your config here...
})
The configuration options belong to two categories: request config and response config.
Request configuration options
Name | Default | Description |
---|---|---|
accessToken | Required. Your CDA access token. | |
space | Required. Your Space ID. | |
environment | 'master' | Set the environment that the API key has access to. |
host | 'cdn.contentful.com' | Set the host used to build the request URI's. |
basePath | '' | This path gets appended to the host to allow request urls like https://gateway.example.com/contentful/ for custom gateways/proxies. |
httpAgent | undefined | Custom agent to perform HTTP requests. Find further information in the axios request config documentation. |
httpsAgent | undefined | Custom agent to perform HTTPS requests. Find further information in the axios request config documentation. |
adapter | undefined | Custom adapter to handle making the requests. Find further information in the axios request config documentation. |
headers | {} | Additional headers to attach to the requests. We add/overwrite the following headers:
|
proxy | undefined | Axios proxy configuration. See the axios request config documentation for further information about the supported values.ΓΒ |
retryOnError | true | By default, this library is retrying requests which resulted in a 500 server error and 429 rate limit response. Set this to false to disable this behavior. |
application | undefined | Application name and version e.g myApp/version. |
integration | undefined | Integration name and version e.g react/version. |
timeout | 30000 | in milliseconds - connection timeout. |
retryLimit | 5 | Optional number of retries before failure. |
logHandler | function (level, data) {} | Errors and warnings will be logged by default to the node or browser console. Pass your own log handler to intercept here and handle errors, warnings and info on your own. |
requestLogger | function (config) {} | Interceptor called on every request. Takes Axios request config as an arg. |
responseLogger | function (response) {} | Interceptor called on every response. Takes Axios response object as an arg. |
Response configuration options
:warning: Response config options have been removed in
v10.0.0
in favor of the new client chain modifiers approach.
Client chain modifiers
Introduced in
v10.0.0
.
The contentful.js library returns calls to sync
, parseEntries
, getEntries
, getEntry
, getAssets
and getAsset
in different shapes, depending on the configurations listed in the respective sections below.
In order to provide type support for each configuration, we provide the possibility to chain modifiers to the Contentful client, providing the correct return types corresponding to the used modifiers.
This way, we make developing with contentful.js
much more predictable and safer.
When initialising a client, you will receive an instance of the ContentfulClientApi
shape.
Entries
Chain | Modifier |
---|---|
none (default) | Returns entries in a single locale. Resolvable linked entries will be inlined while unresolvable links will be kept as link objects. Read more on link resolution |
withAllLocales | Returns entries in all locales. |
withoutLinkResolution | All linked entries will be rendered as link objects. Read more on link resolution |
withoutUnresolvableLinks | If linked entries are not resolvable, the corresponding link objects are removed from the response. |
Example
// returns entries in one locale, resolves linked entries, removing unresolvable links
const entries = await client.withoutUnresolvableLinks.getEntries()
You can also combine client chains:
// returns entries in all locales, resolves linked entries, removing unresolvable links
const entries = await client.withoutLinkResolution.withAllLocales.getEntries()
The default behaviour doesn't change, you can still do:
// returns entries in one locale, resolves linked entries, keeping unresolvable links as link object
const entries = await client.getEntries()
The same chaining approach can be used with parseEntries
. Assuming this is the raw data we want to parse:
const localizedData = {
total: 1,
skip: 0,
limit: 100,
items: [
{
metadata: { tags: [] },
sys: {
space: {
sys: { type: 'Link', linkType: 'Space', id: 'my-space-id' },
},
id: 'my-zoo',
type: 'Entry',
createdAt: '2020-01-01T00:00:00.000Z',
updatedAt: '2020-01-01T00:00:00.000Z',
environment: {
sys: { id: 'master', type: 'Link', linkType: 'Environment' },
},
revision: 1,
contentType: { sys: { type: 'Link', linkType: 'ContentType', id: 'zoo' } },
locale: 'en-US',
},
fields: {
animal: {
'en-US': { sys: { type: 'Link', linkType: 'Entry', id: 'oink' } },
},
anotheranimal: {
'en-US': { sys: { type: 'Link', linkType: 'Entry', id: 'middle-parrot' } },
},
},
},
],
includes: {
Entry: [
{
metadata: { tags: [] },
sys: {
space: {
sys: { type: 'Link', linkType: 'Space', id: 'my-space-id' },
},
id: 'oink',
type: 'Entry',
createdAt: '2020-01-01T00:00:00.000Z',
updatedAt: '2020-02-01T00:00:00.000Z',
environment: {
sys: { id: 'master', type: 'Link', linkType: 'Environment' },
},
revision: 2,
contentType: { sys: { type: 'Link', linkType: 'ContentType', id: 'animal' } },
locale: 'en-US',
},
fields: {
name: {
'en-US': 'Pig',
de: 'Schwein',
},
friend: {
'en-US': { sys: { type: 'Link', linkType: 'Entry', id: 'groundhog' } },
},
},
},
],
},
}
It can be used to receive parsed entries with all locales:
// returns parsed entries in all locales
const entries = client.withAllLocales.parseEntries(localizedData)
Similarly, raw data without locales information can be parsed as well:
const data = {
total: 1,
skip: 0,
limit: 100,
items: [
{
metadata: { tags: [] },
sys: {
space: { sys: { type: 'Link', linkType: 'Space', id: 'my-space-id' } },
id: 'my-zoo',
type: 'Entry',
createdAt: '2020-01-01T00:00:00.000Z',
updatedAt: '2020-01-01T00:00:00.000Z',
environment: { sys: { id: 'master', type: 'Link', linkType: 'Environment' } },
revision: 1,
contentType: { sys: { type: 'Link', linkType: 'ContentType', id: 'zoo' } },
locale: 'en-US',
},
fields: {
animal: { sys: { type: 'Link', linkType: 'Entry', id: 'oink' } },
anotheranimal: { sys: { type: 'Link', linkType: 'Entry', id: 'middle-parrot' } },
},
},
],
includes: {
Entry: [
{
metadata: { tags: [] },
sys: {
space: { sys: { type: 'Link', linkType: 'Space', id: 'my-space-id' } },
id: 'oink',
type: 'Entry',
createdAt: '2020-01-01T00:00:00.000Z',
updatedAt: '2020-02-01T00:00:00.000Z',
environment: { sys: { id: 'master', type: 'Link', linkType: 'Environment' } },
revision: 2,
contentType: { sys: { type: 'Link', linkType: 'ContentType', id: 'animal' } },
locale: 'en-US',
},
fields: {
name: 'Pig',
friend: { sys: { type: 'Link', linkType: 'Entry', id: 'groundhog' } },
},
},
],
},
}
// returns parsed entries keeping unresolvable links as link object
const entries = client.withoutLinkResolution.parseEntries(data)
Assets
Chain | Modifier |
---|---|
none (default) | Returns assets in a single locale. |
withAllLocales | Returns assets in all locales. |
Example
// returns assets in all locales
const assets = await client.withAllLocales.getAssets()
The default behaviour doesn't change, you can still do:
// returns assets in one locale
const assets = await client.getAssets()
Sync
The Sync API always retrieves all localized content, therefore withAllLocales
is accepted, but ignored.
Chain | Modifier |
---|---|
none (default) | Returns content in all locales. |
withoutLinkResolution | Linked content will be rendered as link objects. Read more on link resolution |
withoutUnresolvableLinks | If linked content is not resolvable, the corresponding link objects are removed from the response. |
Example
// returns content in all locales, resolves linked entries, removing unresolvable links
const { entries, assets, deletedEntries, deletedAssets } =
await client.withoutUnresolvableLinks.sync({ initial: true })
More information on behavior of the Sync API can be found in the sync section in ADVANCED.md
Reference documentation
The JS library reference documents what objects and methods are exposed by this library, what arguments they expect and what kind of data is returned.
Most methods also have examples which show you how to use them.
Tutorials & other resources
- This library is a wrapper around our Contentful Delivery REST API. Some more specific details such as search parameters and pagination are better explained on the REST API reference, and you can also get a better understanding of how the requests look under the hood.
- Check the Contentful for JavaScript page for Tutorials, Demo Apps, and more information on other ways of using JavaScript with Contentful.
Troubleshooting
- I get the error: Unable to resolve module
http
. Our library is supplied as node and browser version. Most non-node environments, like React Native, act like a browser. To force using of the browser version, you can require it via:
const { createClient } = require('contentful/dist/contentful.browser.min.js')
- Is the library doing any caching? No, check this issue for more infos.
TypeScript
This library is 100% written in TypeScript. Type definitions are bundled. Find out more about the advantages of using this library in conjunction with TypeScript in the TYPESCRIPT document.
Advanced concepts
More information about how to use the library in advanced or special ways can be found in the ADVANCED document.
Migration
We gathered all information related to migrating from older versions of the library in our MIGRATION document.
Reach out to us
You have questions about how to use this library?
You found a bug or want to propose a feature?
You need to share confidential information or have other questions?
Get involved
We appreciate any help on our repositories. For more details about how to contribute see our CONTRIBUTING document.
License
This repository is published under the MIT license.
Code of Conduct
We want to provide a safe, inclusive, welcoming, and harassment-free space and experience for all participants, regardless of gender identity and expression, sexual orientation, disability, physical appearance, socioeconomic status, body size, ethnicity, nationality, level of experience, age, religion (or lack thereof), or other identity markers.
Top Related Projects
π Strapi is the leading open-source headless CMS. Itβs 100% JavaScript/TypeScript, fully customizable and developer-first.
Sanity Studio β Rapidly configure content workspaces powered by structured content
The Modern Data Stack π° β Directus is an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database.
The superpowered headless CMS for Node.js β built with GraphQL and React
A Git-based CMS for Static Site Generators
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot