Contentful.js
JavaScript library for Contentful's Delivery API (node & browser)
Install / Use
/learn @contentful/Contentful.jsREADME
Introduction
<a href="LICENSE"> <img src="https://img.shields.io/badge/license-MIT-brightgreen.svg" alt="MIT License" /> </a> <a href="https://github.com/contentful/contentful.js/actions?query=branch%3Amaster"> <img src="https://github.com/contentful/contentful.js/actions/workflows/main.yaml/badge.svg"> </a> <a href="https://www.npmjs.com/package/contentful"> <img src="https://img.shields.io/npm/v/contentful.svg" alt="NPM"> </a> <a href="https://www.jsdelivr.com/package/npm/contentful"> <img src="https://data.jsdelivr.com/v1/package/npm/contentful/badge" alt="jsDelivr Hits"> </a> <a href="https://npm-stat.com/charts.html?package=contentful"> <img src="https://img.shields.io/npm/dm/contentful.svg" alt="NPM downloads"> </a> <a href="https://unpkg.com/contentful/dist/contentful.browser.min.js"> <img src="https://img.badgesize.io/https://unpkg.com/contentful/dist/contentful.browser.min.js?compression=gzip" alt="GZIP bundle size"> </a>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.
<details> <summary>Table of contents</summary> <!-- TOC -->- Introduction
- Core Features
- Getting started
- Documentation & References
- Reach out to us
- 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.
