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.
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:
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.
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.
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
| Traditional CMS | Headless CMS | |
|---|---|---|
| Architecture | One-to-one | One-to-many |
| Extensibility | Monolithic | Modular |
| Device compatibility | Limited | Responsive by design |
| Integration and deployment | Punctuated | Continuous |
| Engineering | DIY | Managed |
| Developer experience | Legacy | Contemporary |
| Speed | Higher load times | Lower load times |
| Iteration | Long cycles | Rapid development |
→ Learn about the differences between headless and traditional CMSes
A headless CMS works by giving editors an interface for managing content and 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.
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.
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.
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.
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.
Because headless content is separated from the presentation layer it’s a smaller area of attack.
→ Learn more about the benefits of using a headless CMS
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.
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.
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.
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’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.