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

• Introduction
• Core Features
• Supported browsers and Node.js versions
• Getting started
• Installation
  • Using in Legacy Environments Without ESM/Import Support
  • Using it directly in the browser
• Your first request
• Using this library with the Preview API
• Authentication
• Cursor-based Pagination
• Documentation \& References
• Configuration
  • Request configuration options
  • Response configuration options
• Timeline Preview
  • Example
• Client chain modifiers
  • Entries
  • Example
  • Assets
  • Example
  • Sync
  • Example
• Reference documentation
• Tutorials \& other resources
• Troubleshooting
• TypeScript
• Advanced concepts
• Migration
• 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
• License
• Code of Conduct

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)
• React Native (Metro bundler)

For the minimum supported browser versions, refer to the package.json of this library.

To ensure compatibility across various JavaScript environments, this library is built as an ECMAScript Module (ESM) by default, using the "type": "module" declaration in package.json.

We also offer a bundle for the legacy CommonJS (CJS) require syntax, allowing usage in environments that do not support ESM.

Additionally, there is a bundle available for direct usage within browsers.

For more details on the different variants of this library, see Installation.

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
• Cursor-based pagination
• Documentation & References

Installation

npm install contentful

In a modern environment, you can import this library using:

import * as contentful from 'contentful'

Using in Legacy Environments Without ESM/Import Support

Typically, your system will default to our CommonJS export when you use the require syntax:

const contentful = require('contentful')

If this does not work, you can directly require the CJS-compatible code:

const contentful = require('contentful/dist/contentful.cjs')

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:

import * as contentful from '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:

import * as contentful from '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.

Cursor-based Pagination

Cursor-based pagination is supported on collection endpoints for entries and assets:

const response = await client.getEntriesWithCursor({ limit: 10 })
console.log(response.items) // Array of items
console.log(response.pages?.next) // Cursor for next page

Use the value from response.pages.next to fetch the next page or response.pages.prev to fetch the previous page.

const nextPageResponse = await client.getEntriesWithCursor({
  limit: 10,
  pageNext: response.pages?.next,
})

console.log(nextPageResponse.items) // Array of items
console.log(nextPageResponse.pages?.next) // Cursor for next page
console.log(nextPageResponse.pages?.prev) // Cursor for prev page

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