contentful vs sanity vs strapi
Headless CMS Solutions Comparison
1 Year
contentfulsanitystrapi
What's Headless CMS Solutions?

Headless Content Management Systems (CMS) are designed to separate the content management backend from the frontend presentation layer. This allows developers to deliver content across multiple platforms and devices using APIs. These three packages—Contentful, Sanity, and Strapi—offer distinct features and functionalities tailored for different use cases in web development. They enable developers to create, manage, and deliver content efficiently while providing flexibility in how that content is presented and consumed.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
contentful697,0561,2121.66 MB3011 hours agoMIT
sanity158,6855,46656.2 MB4626 days agoMIT
strapi20,25965,259240 kB1,015-SEE LICENSE IN LICENSE
Feature Comparison: contentful vs sanity vs strapi

Content Modeling

  • contentful:

    Contentful provides a flexible content modeling system that allows users to define custom content types and fields. Its interface is intuitive, enabling non-technical users to create and manage content types easily. This flexibility is beneficial for complex projects with diverse content requirements.

  • sanity:

    Sanity offers a highly customizable content modeling experience through its schema definition. Developers can define content types using JavaScript, allowing for dynamic and responsive content structures. This flexibility is particularly useful for projects that evolve over time or require unique content relationships.

  • strapi:

    Strapi allows users to create custom content types through its admin panel or programmatically via its API. It provides a straightforward interface for managing content types and fields, making it user-friendly for developers and content editors alike.

API Flexibility

  • contentful:

    Contentful offers a powerful and well-documented RESTful API, along with GraphQL support. This flexibility allows developers to choose their preferred method for fetching content, making it easy to integrate with various frontend technologies and frameworks.

  • sanity:

    Sanity provides a real-time API that supports both REST and GraphQL, enabling developers to fetch content efficiently. Its GROQ query language allows for complex queries, giving developers the ability to retrieve exactly the data they need with minimal overhead.

  • strapi:

    Strapi generates RESTful and GraphQL APIs automatically based on the content types defined. This feature simplifies the development process, allowing developers to focus on building the frontend without worrying about backend API creation.

User Interface

  • contentful:

    Contentful features a clean and user-friendly interface that caters to both developers and content editors. Its dashboard is intuitive, making it easy for users to navigate and manage content without extensive training.

  • sanity:

    Sanity's user interface is highly customizable, allowing users to tailor the editing experience to their needs. The real-time editing capabilities enhance collaboration, making it easy for teams to work together on content creation and updates.

  • strapi:

    Strapi provides a straightforward admin panel that allows users to manage content types and entries easily. The interface is designed to be user-friendly, making it accessible for non-technical users while still offering powerful features for developers.

Extensibility

  • contentful:

    Contentful supports extensions through its App Framework, allowing developers to create custom applications that can be integrated into the Contentful interface. This extensibility is beneficial for teams that require specialized features or workflows.

  • sanity:

    Sanity is designed with extensibility in mind, allowing developers to create custom input components and plugins. This flexibility enables teams to build tailored solutions that meet their specific content management needs.

  • strapi:

    Strapi is open-source and highly extensible, allowing developers to create custom plugins and modify the core functionality. This makes it an excellent choice for projects that require unique features or integrations.

Community and Support

  • contentful:

    Contentful has a strong community and extensive documentation, providing users with resources for troubleshooting and best practices. Their support team is responsive, making it easier for developers to get help when needed.

  • sanity:

    Sanity has an active community and offers comprehensive documentation, tutorials, and a forum for users to seek help. The real-time collaboration features also foster community engagement, encouraging users to share their experiences and solutions.

  • strapi:

    Strapi boasts a vibrant open-source community and provides extensive documentation. Users can access a variety of tutorials and community resources, making it easier to find solutions and share knowledge.

How to Choose: contentful vs sanity vs strapi
  • contentful:

    Choose Contentful if you need a robust, enterprise-level solution with a focus on scalability and performance. It offers a powerful API, excellent documentation, and a user-friendly interface, making it suitable for complex projects that require extensive content modeling and management capabilities.

  • sanity:

    Opt for Sanity if you prioritize real-time collaboration and customization. Its flexible schema and real-time editing features make it ideal for teams that need to work together seamlessly. Sanity also offers a powerful query language (GROQ) for fetching data, which can enhance the development experience.

  • strapi:

    Select Strapi if you prefer an open-source solution that allows for complete control over your content management. Strapi is highly customizable, supports RESTful and GraphQL APIs out of the box, and can be self-hosted, making it suitable for developers looking for flexibility and ownership.

README for contentful

Contentful Logo

Content Delivery API

Javascript

Readme · Migration · Advanced · TypeScript · Contributing

Join Contentful Community Slack

Introduction

MIT License Build Status NPM jsDelivr Hits NPM downloads GZIP bundle size

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

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

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.

Documentation & References

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:

  • Content-Type: application/vnd.contentful.delivery.v1+json
  • X-Contentful-User-Agent: sdk contentful.js/1.2.3; platform node.js/1.2.3; os macOS/1.2.3 (Automatically generated)
| | 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?

  • Reach out to our community forum: Contentful Community Forum
  • Jump into our community Slack channel: Contentful Community Slack

You found a bug or want to propose a feature?

  • File an issue here on GitHub: File an issue Make sure to remove any credential from your code before sharing it.

You need to share confidential information or have other questions?

  • File a support ticket at our Contentful Customer Support: File support ticket

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.

Read our full Code of Conduct.