contentful vs sanity

Headless CMS Client Libraries for Frontend Applications

contentful and sanity are both JavaScript client libraries for interacting with headless Content Management Systems (CMS). They allow developers to fetch, manage, and render content in web applications without tying the frontend to a specific backend structure. contentful connects to the Contentful platform, offering a structured, entry-based content model with strong localization support. sanity connects to the Sanity.io platform, providing a flexible, document-based content lake with a powerful query language called GROQ. Both libraries handle authentication, image transformations, and real-time updates, but they differ significantly in how developers query data and structure their content schemas.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package	Downloads	Stars	Size	Issues	Publish	License
Package	Downloads	Stars	Size	Issues	Publish	License
contentful	0	1,290	1.85 MB	22	3 days ago	MIT
sanity	0	6,176	19.8 MB	159	4 days ago	MIT

Contentful vs Sanity: Client Architecture, Querying, and Data Handling

Both contentful and sanity serve as the bridge between your frontend application and a headless CMS backend. While they solve the same fundamental problem — fetching content — their approaches to querying, image handling, and schema management differ significantly. Let's break down the technical realities of working with each client.

🔍 Querying Data: REST/GraphQL vs GROQ

contentful relies on a structured REST API or GraphQL.

You fetch entries based on content types defined in the CMS UI.
Filtering is done via query parameters that map to field IDs.
Complex relationships often require multiple requests or careful includes handling.

// contentful: Fetching entries with filters
const contentful = require('contentful').createClient({
  space: 'YOUR_SPACE_ID',
  accessToken: 'YOUR_ACCESS_TOKEN'
});

const entries = await contentful.getEntries({
  content_type: 'blogPost',
  'fields.author': 'John Doe',
  include: 2 // Include linked items up to 2 levels deep
});

sanity uses GROQ (Graph-Relational Object Queries).

You write queries that look like JSON structures.
You can join data and project specific fields in a single request.
This reduces over-fetching and allows precise data shaping on the server.

// sanity: Fetching documents with GROQ
import { createClient } from '@sanity/client';

const client = createClient({
  projectId: 'YOUR_PROJECT_ID',
  dataset: 'production'
});

const query = `*[_type == "blogPost" && author->name == "John Doe"] {
  title,
  "authorName": author->name,
  body
}`;

const posts = await client.fetch(query);

🖼️ Image Handling: Parameters vs Pipeline

contentful provides image URLs with query parameters for transformations.

You append parameters like w (width) and h (height) to the asset URL.
The CDN handles resizing and formatting on the fly.
You need to manually construct these URLs or use helper methods.

// contentful: Image transformation
const entry = await contentful.getEntry('entryId');
const image = entry.fields.image;

// Constructing transformation URL manually
const imageUrl = `https://${image.fields.file.url}?w=800&h=600&fit=fill`;

// Or using the built-in helper if available in your wrapper
// image.fields.file.url + '?w=800'

sanity uses a dedicated image pipeline with a builder pattern.

The client includes tools to build image URLs safely.
It supports automatic format detection (like WebP) and focal point cropping.
This keeps image logic consistent across your application.

// sanity: Image transformation with builder
import imageUrlBuilder from '@sanity/image-url';

const builder = imageUrlBuilder(client);

function urlFor(source) {
  return builder.image(source);
}

// Usage in component
const imgUrl = urlFor(post.mainImage)
  .width(800)
  .height(600)
  .fit('crop')
  .url();

🔄 Real-Time Updates: Webhooks vs Listeners

contentful relies on webhooks for real-time updates.

The CMS sends a POST request to your server when content changes.
Your frontend does not maintain a persistent connection to the CMS.
You need to build infrastructure to catch these webhooks and revalidate caches.

// contentful: Webhook handler (Server-side)
// This runs on your backend, not in the browser
app.post('/webhook', (req, res) => {
  const { sys } = req.body;
  if (sys.type === 'Entry' && sys.operation === 'PUBLISH') {
    // Trigger revalidation of your static site or cache
    revalidatePage(`/blog/${sys.id}`);
  }
  res.status(200).send('OK');
});

sanity supports real-time listeners directly in the client.

You can subscribe to changes in the dataset from the browser.
The connection stays open, pushing updates instantly to the UI.
Great for collaborative tools or live dashboards without extra backend code.

// sanity: Real-time listener (Client-side)
const query = '*[_type == "stock"]';

const subscription = client.listen(query, {}, { includeResult: true })
  .subscribe(({ result }) => {
    console.log('Stock updated:', result);
    // Update React state directly here
  });

// Later, unsubscribe
subscription.unsubscribe();

🌐 Localization: Built-in vs Custom Fields

contentful has localization built into the core API.

Every field can have multiple locales attached.
You request a specific locale via a query parameter.
Fallback locales are handled automatically by the platform.

// contentful: Fetching specific locale
const entries = await contentful.getEntries({
  content_type: 'page',
  locale: 'de-DE' // Fetch German version
});

// Fallback is handled by Contentful settings if 'de-DE' is missing

sanity treats languages as separate documents or fields.

You define internationalization (i18n) structures in your schema.
You query for the specific language document or field explicitly.
This offers more flexibility but requires more setup in your queries.

// sanity: Fetching specific language document
const query = `*[_type == "page" && language == "de"][0] {
  title,
  content
}`;

const page = await client.fetch(query);

// Or using sanity's i18n plugin structure
// You might query a specific field path depending on schema design

🛠️ Schema Management: UI vs Code

contentful manages schemas in the web interface.

You click buttons to add fields and content types.
The schema is stored remotely and versioned by the platform.
Migration scripts are available but secondary to the UI workflow.

// contentful: Migration script (Optional, for CI/CD)
module.exports = function (migration) {
  const blog = migration.createContentType('blogPost')
    .name('Blog Post');
  
  blog.createField('title')
    .name('Title')
    .type('Symbol');
};

sanity defines schemas as code in your project.

You write JavaScript objects to define document types.
The schema lives in your repository, making it reviewable and testable.
Changes to schema are deployed alongside your application code.

// sanity: Schema definition (schema.js)
export default {
  name: 'blogPost',
  title: 'Blog Post',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string'
    }
  ]
};

🤝 Similarities: Shared Ground Between Contentful and Sanity

Despite their differences, both clients share core responsibilities in the frontend stack.

1. 🔐 Authentication Methods

Both use API keys or tokens for public content.
Both support preview tokens for draft content.
Secure server-side calls use private keys.

// contentful: Preview client
const previewClient = contentful.createClient({
  accessToken: 'PREVIEW_TOKEN',
  host: 'preview.contentful.com'
});

// sanity: Token auth
const client = createClient({
  token: process.env.SANITY_API_READ_TOKEN,
  useCdn: false
});

2. 📦 Environment Configuration

Both require project IDs, space IDs, or environment variables.
Both support switching between production and preview datasets.
Configuration is typically centralized in a utility file.

// contentful: Config
const config = {
  spaceId: process.env.CONTENTFUL_SPACE_ID,
  token: process.env.CONTENTFUL_ACCESS_TOKEN
};

// sanity: Config
const config = {
  projectId: process.env.SANITY_PROJECT_ID,
  dataset: process.env.SANITY_DATASET || 'production'
};

3. ⚡ Caching Strategies

Both encourage using a CDN for public content.
Both allow disabling cache for preview modes.
Frontend frameworks (Next.js, Remix) integrate similarly with both.

// contentful: Disabling cache for preview
const entries = await client.getEntries({
  content_type: 'post',
  query: { useInclusions: false } // Specific cache controls vary
});

// sanity: Disabling CDN cache
const data = await client.fetch(query, {}, { useCdn: false });

📊 Summary: Key Similarities

Feature	Shared by Contentful and Sanity
Auth	🔐 API Tokens & Preview Keys
Delivery	🌐 CDN-backed Asset Delivery
Integration	⚛️ React, Vue, Next.js Support
Caching	⚡ HTTP Caching & Revalidation
Rich Text	📝 Custom Block Renderers Required

🆚 Summary: Key Differences

Feature	`contentful`	`sanity`
Query Language	🔍 REST Params / GraphQL	🧩 GROQ (Custom Query Language)
Schema Definition	🖱️ Web UI (Click-based)	💻 Code (JavaScript Objects)
Real-Time	📡 Webhooks (Server-side)	📡 Listeners (Client-side)
Images	🖼️ URL Parameters	🖼️ Builder Pattern
Localization	🌍 Core API Feature	🌍 Schema/Document Pattern
Data Shape	📦 Fixed Entry Structure	📦 Flexible Document Projection

💡 The Big Picture

contentful is like a managed service hotel 🏨 — everything is prepared for you, rooms are standardized, and services are reliable. It excels when you need consistency, strong governance, and a quick setup for marketing teams. Choose this when the content model is stable and the priority is ease of use for non-developers.

sanity is like a custom-built home 🏡 — you design the rooms, lay the pipes, and decide how the electricity flows. It shines when developers need control over data shape, real-time features, or complex content relationships. Choose this when your content structure is part of your application logic and might change often.

Final Thought: Both tools will get content onto a screen. The choice comes down to whether you want to configure content in a UI (contentful) or define it in code (sanity), and whether your frontend needs simple fetching or powerful querying.

How to Choose: contentful vs sanity

contentful:
Choose contentful if your project requires a strict, pre-defined content model with robust localization and workflow features out of the box. It is ideal for enterprise marketing sites, multi-language applications, and teams that prefer a structured, API-first approach where the backend schema is managed via a UI rather than code. The learning curve is lower for standard content fetching, making it suitable for teams that want to get up and running quickly without managing custom query languages.
sanity:
Choose sanity if you need maximum flexibility in content structure and want to define schemas as code. It is perfect for applications requiring complex relationships, real-time collaborative editing, or custom query logic that goes beyond simple filtering. The GROQ query language offers powerful data shaping capabilities directly in the request, reducing the need for post-processing in your frontend. This makes it a strong fit for dynamic web apps, dashboards, and projects where content structure might evolve frequently.

Popular Comparisons

contentful

sanity

README for contentful

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)
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.

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

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.

Timeline Preview

The Timeline Preview API provides the ability to query content by future date or specific release

Example

import * as contentful from 'contentful'
const client = contentful.createClient({
  space: 'developer_bookshelf',
  accessToken: 'preview_0b7f6x59a0',
  host: 'preview.contentful.com',
  // either release or timestamp or both can be passed as a valid config
  timelinePreview: {
    release: { lte: 'black-friday' },
    timestamp: { lte: '2025-11-29T08:46:15Z' },
  },
})

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.
`withLocaleBasedPublishing`	Fetched entries & assets will be returned with only content from published locales.

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:
Jump into our community Slack channel:

You found a bug or want to propose a feature?

File an issue here on GitHub: 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:

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.

For AI Agents

If you are an AI coding agent working in this repository, read AGENTS.md first. It tells you where to find architectural context, development setup, decision records, and repo-specific rules.

Headless CMS Client Libraries for Frontend Applications

Npm Package Weekly Downloads Trend

Github Stars Ranking

Stat Detail

Contentful vs Sanity: Client Architecture, Querying, and Data Handling

🔍 Querying Data: REST/GraphQL vs GROQ

🖼️ Image Handling: Parameters vs Pipeline

🔄 Real-Time Updates: Webhooks vs Listeners

🌐 Localization: Built-in vs Custom Fields

🛠️ Schema Management: UI vs Code

🤝 Similarities: Shared Ground Between Contentful and Sanity

1. 🔐 Authentication Methods

2. 📦 Environment Configuration

3. ⚡ Caching Strategies

📊 Summary: Key Similarities

🆚 Summary: Key Differences

💡 The Big Picture

How to Choose: contentful vs sanity

Popular Comparisons

Similar Npm Packages to contentful

Similar Npm Packages to sanity

README for contentful

Content Delivery API

JavaScript

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

For AI Agents