Shopify + Sanity: Read about the investment and partnership –>
Skip to content
Sanity
Get started
  • Sanity Studio - Flexible editing environment
  • Content Lake - Real-time database
  • Developer experience - Tooling you love
  • Structured content - The philosophy behind Sanity
  • Review changes - View edits & rollback instantly
  • Image pipeline - On-demand transformations
  • E-commerce - Better shopping experiences
  • Marketing sites - Control your story
  • Products & services - Innovate and automate
  • Mobile apps - Content backend for every OS
  • Morning Brew - Omnichannel media distribution
  • InVision - Delivering exceptional customer experiences
  • DataStax - Personalization for global audience
  • Cloudflare - Flexible modeling for a global CDN
  • React
  • Gatsby
  • Next
  • Nuxt
  • Eleventy
  • Netlify
  • Vercel
  • Algolia
  • Documentation
  • Reference
  • Guides
  • Tools & plugins
  • Project showcase
  • Schemas & snippets
  • Technology partners
  • Get support
  • Share your work
  • Shopify Invests in Sanity: Connecting Commerce with Content
PricingContact salesLog inGet started
Updated June 2nd 2022

Headless CMS explained in 1 minute

Learn about headless Content Management Systems: what they are, how they work, and how they differ from traditional CMSes like WordPress. We explore the uses of headless content, and how to apply it to websites, apps, and more.

Knut Melvær

Knut runs developer relations at Sanity.io.

What is a Headless CMS?

A headless CMS is a content management system that separates where content is stored (the “body”) from where it is presented (the “head“). You can store the content in your headless CMS and then send it to display anywhere – offering a lot more flexibility as to how it's presented in different places.

The “head” relates to where your content ends up, and the “body” is where your content is stored and authored. This might sound a little strange at first, but the point of a headless CMS isn't that you don't want or need a head, it's that you get to pick and choose which heads (outputs) you send your content to.

Check out this video, where our CTO quickly illustrates the concept using pen and paper:

Headless CMS vs Traditional CMS

As opposed to headless, a “traditional CMS” is software that you either install and have to manage on your own, or on a managed server environment. Traditional CMSes are also called “monolithic” because they pack all the functionality and assumptions for how you want to work into a single system. Traditional CMSes often provide a “What You See Is What You Get” (WYSIWYG) content editing interface because they only have one context for presenting the content – usually a web page.

The basic architectural differences between traditional, and headless content management systems.

In the last few years, we have seen an uptick of CMSes that try to be more flexible in their ways of making content available. These are usually called “Headless” or “API-first” CMSes. Some of them market themselves as “Content infrastructure,” “Content Hubs” or even “Content as a Service.”

However, when you take a closer look, they all pretty much boil down to some database backend with a web-based user interface, and content made accessible through an API.

At Sanity we see today’s headless CMS systems as an evolutionary step that leads to an even better way of managing content – where structure is truly flexible, content is treated like data, and editors work in tailored real-time collaboration environments.

What about Decoupled CMSes?

As a response to the introduction of headless CMSes, some of the traditional CMS vendors have built APIs on top of their systems and market them as “decoupled.”

The decoupled approach promises both website rendering capabilities and the flexibility of headless. However, the catch is that decoupled CMS APIs are heavily influenced by a model built for a single website. When it boils down to it, this is a form of coupling and restricts the amount of contexts that your content can reasonably be applied to.

  • Decoupled CMSes are adding APIs on top to serve content
  • Headless CMSes are API-exclusive

Comparison: Headless CMS vs. Traditional CMS

Traditional CMSHeadless CMS
ArchitectureOne-to-oneOne-to-many
ExtensibilityMonolithicModular
Device compatibilityLimitedResponsive by design
Integration and deploymentPunctuatedContinuous
EngineeringDIYManaged
Developer experienceLegacyContemporary
SpeedHigher load timesLower load times
IterationLong cyclesRapid development

How does a Headless CMS work?

A headless CMS works by:

  1. Giving editors an interface for managing content.
  2. Providing that content via APIs for developers to query and build applications with.

Most headless CMSes are offered as a Software as a Service (SaaS), meaning that your editors will have to log into a web application and that the APIs are hosted in a cloud-based backend. Some headless CMSes will let you host the whole solution on your own server and database. In this model means you have to do your own scaling and operations.

Sanity lets you host the react-based customizable editing interface yourself, and you get the no-ops and scaling-friendly advantages of a hosted real-time backend. In many ways Sanity is a superset of a headless CMS – because it’s more flexible, offers real-time collaboration, and it treats your content (even rich text) as data. You can use it to power products of any kind.

Headless CMS Benefits

Faster editing experiences

Traditional CMS architectures have to spend resources on content editing, and content rendering. A headless CMS has an advantage over traditional alternatives because it doesn’t have to deal with the rendering side of things. That’s left to other more specialized parts of your stack.

Manage content for more channels

Truly headless content isn’t tied to a single presentation concern (e.g. website), so it can find an audience across multiple channels. You can use a headless CMS to manage content for apps and websites. You can even manage your internal/admin content in the same place and extract more value from it that way.

Developer flexibility

Because headless content is served over APIs, developers can choose their own frontend tooling. If you’d prefer to work with Javascript instead of PHP or Ruby, you can do that. You can also interchange parts of your stack, or move from one framework to another without affecting the CMS.

Easier scaling

Headless lets you manage your content from a single source of truth, change developer tools at any time, and benefit from sending your content to high-performance cloud-based hosting and build services like Vercel and Netlify.

Enhanced security

Because headless content is separated from the presentation layer it’s a smaller area of attack.

Use cases for Headless CMS

Websites & web apps

They’re a popular choice in high performing “Jamstack” sites and work with static-site-generators like Gatsby, 11ty, and Next. They can also be used for web apps and are popular with modern Javascript Frameworks such React, Vue.js, Svelte, and Angular.

Products & services

A well-designed headless CMS won’t be geared towards a page-based content structure (that should be easy to create, but optional). If this is the case, you can manage content for any product or service: voice assistants, digital kiosks, print, websites – all from the same place.

E-commerce sites

Some headless CMSes are flexible enough to be provisioned as an E-commerce back end. With Sanity you can also integrate headless content with existing E-commerce platforms and product inventory management systems like Shopify and SAP Hybris.

How do I choose the right headless CMS?

There are a lot of options out there, and it can be challenging to navigate their many features. We think it’s best to aim for a CMS that can let you grow, and be adapted as your needs evolve. Here’s a list of questions you can ask yourself in order to better evaluate the field:

  • Can I create the kinds of content structures I really need with it?
  • Do I want, or need to, look after content hosting and maintenance myself?
  • Will my content be stored in a secure and privacy compliant manner?
  • Would real-time editing and collaboration improve my workflows?
  • Will my rich text content be locked to HTML?
  • Can I scale my content ops without falling off a price cliff?
  • How does it manage files and image assets?

headlessCMS.org offers a fairly comprehensive list of headless content management systems. It’s geared towards Jamstack sites, but a few of them are like Sanity, and can be used for applications outside of the Jamstack.

Sanity: more than a headless CMS

Sanity’s features go beyond the offerings of popular headless CMSes, and the older monolithic CMSes on the market. Here’s why:

  • You get real-time collaborative editing out of the box
  • Content structures are truly flexible
  • Rich text content is HTML-free. We’re the only platform that treats content as data.
  • You get a fully open-sourced and standalone editor built in React
  • You get a full API-suite with the same backend capabilities as Sanity Studio

Sanity is the platform for structured content that lets you build better digital experiences. By treating content as data, organizations use our APIs to build optimal editing workflows and share content between systems to increase digital velocity. Our mission is to be the most versatile system for creating and distributing digital content to any device, application or channel.

Set up a Headless Project with Sanity

Page content

  • What is a Headless CMS?
  • Headless CMS vs Traditional CMS
    • What about Decoupled CMSes?
    • Comparison: Headless CMS vs. Traditional CMS
  • How does a Headless CMS work?
  • Headless CMS Benefits
    • Faster editing experiences
    • Manage content for more channels
    • Developer flexibility
    • Easier scaling
    • Enhanced security
  • Use cases for Headless CMS
    • Websites & web apps
    • Products & services
    • E-commerce sites
  • How do I choose the right headless CMS?
  • Sanity: more than a headless CMS

Platform

Structured ContentDeveloper experienceContent LakeSanity StudioSecurity & Compliance

Resources

Documentation
  • Content Modeling
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
  • React Starters
  • Next.js Starters
  • Next.js Landing Pages
  • Next.js E-commerce
  • Gatsby Starters
  • Gatsby Plugins
  • Developer Portfolio Templates
Case Studies
  • Headless CMS
  • Digital Experience Platform
  • Static Site Generator
  • Localization
  • GraphQL vs REST
  • React CMS
  • Next.JS CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS

Company

Contact SalesEnterpriseCareersTerms of Service

Stay connected

  • Github
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS

Subscribe to our newsletter

©Sanity 2022