Are you always in search of the latest tools to power your digital presence? Are you wondering what exactly a headless CMS is and how it might be beneficial to your business or website?
New online businesses have no shortage of options when it comes to building a website and getting their content out into the world. There are website builders like Squarespace and Shopify, content management systems (CMS) like WordPress and Content Hub, and plenty of resources for building from scratch.
What about a business that wants to distribute its content beyond just its website? In this post, we’ll introduce the concept of a headless CMS, an alternative to the traditional CMSs that we all know. We’ll unpack what makes them different, explain how they’re set up, and provide some recommendations for headless CMS software you can try.
What Is a Traditional CMS?
When we talk about content management systems, we’re usually referring to traditional CMSs. A traditional CMS (also referred to as a coupled CMS) is a software tool consisting of two sub-systems: one for the storage and management of content (called the “back-end” system), and one for delivering this content to end-users (called the “front-end” system).
Traditional CMSs provide website owners with everything they need to manage and publish digital content, including back-end tools to organize digital assets on the web server, and front-end formatting tools like WYSIWYG editors to handle its presentation on a web page.
Traditional CMSs are typically built for managing website content specifically. The CMSs you’ve likely heard of — WordPress, Content Hub, Drupal, etc. — are all coupled. Broadly speaking, these CMSs have databases where the content is stored, a way to create, view, and edit this content, and interface tools to turn this content into web pages.
Traditional is the predominant CMS architecture, but it’s not the only one. Enter the headless CMS.
What Is a Headless CMS?
A headless CMS is a content management system that exclusively handles back-end content management. Unlike a traditional CMS, a headless CMS does not dictate how this content is presented to end-users.
In place of a front-end system, a headless CMS shares its stored resources via an application programming interface (API). The API is essentially a set of protocols that any software tool can use to retrieve content from the inside the CMS. Headless CMSs most often use REST APIs in their builds.
After editors add content to the headless CMS, an external publishing tool can use the API to access content and present it on any channel, be it a website or otherwise. For this reason, headless CMSs are front-end agnostic systems.
Here’s a visual breakdown of the differences between a traditional and a headless CMS architecture:
So, why the name? If we imagine the front-end display as the “head” and the content stored as the “body”, a “headless” display removes the head and leaves just the body.
A tad morbid, sure. But also very useful, as we’ll see next.
Why Use a Headless CMS?
At first, the idea of a headless CMS might seem counterintuitive. Why remove the tools that make it easier to publish content to your website?
But, that’s the thing — today’s internet comprises much more than websites and web pages, and businesses are taking advantage. Mobile apps, advertisements, digital assistants, wearables like smartwatches, refrigerators, and any other device with an internet connection are all capable of presenting content. With a traditional website-oriented CMS, multi-channel distribution is at best laborious and at worst impossible.
Indeed, a headless CMS isn’t much without a means to display the content itself. However, the benefit of a headless architecture is that it gives developers the flexibility to apply their own custom front-end solutions to raw content, rather than adapting a traditional CMS to fit their needs. As long as the front-end delivery system knows how to use the CMS’s API, it can take content from the CMS and format it however necessary. Put another way, developers can attach as many “heads” (display channels) to the “body” (CMS) as they please, which can be a powerful thing.
Take a news organization, for example. Aside from publishing stories to its website, this organization might want to share information via a mobile app, an Amazon Alexa integration, online display ads, and/or digital billboards. In lieu of using a different CMS for each distribution channel and storing content in several places, the news site can store content inside one headless CMS and use external front-end software to present the content.
A headless CMS also makes it easier to manage large volumes of digital assets. Content can be created completely independent of its presentation, which helps editors to keep tabs on their assets without needing to add any front-end code (e.g. HTML).
Likewise, front-end developers don’t have to worry about the specifics of the content management software. They just need to fetch the right data via the CMS API, then use other software to present it properly by channel.
What Is a Decoupled CMS?
Headless and traditional content management systems are often compared to another architecture, the decoupled CMS.
A decoupled CMS is similar to a headless CMS in that it separates, or decouples, the back-end from the front-end and makes content available via an API. However, a decoupled CMS also comes with some tools for front-end presentation, such as code templates.
The decoupled CMS approach makes it possible to build basic front-end displays (like a website) with your content, but it also makes content accessible for other channels. Therefore, decoupled CMSs are something of a compromise between a traditional and a headless CMS architecture, a balance between website-oriented and front-end agnostic.
Traditional CMS vs. Headless CMS vs. Decoupled CMS: Which Is Best?
Each of the CMS approaches we’ve discussed serves a different purpose, and no one approach is perfect across all business types. Your CMS of choice will depend on your technical experience and resources, content strategy, budget, and timeline.
To point you in the right direction, here’s a quick rundown to determine which CMS type you should try:
Use a traditional CMS if:
- You want a business website, a blog, or a personal website or portfolio, and you need it launched as soon as possible.
- You want to easily and quickly be able to modify your website content.
- You’re in charge of a website, but not adept at coding and you don’t have a developer team to back you up.
- Your content is limited to mainly text, images, and embeds.
Consider a headless CMS if:
- You’re part of a larger company with many assets that need to be handled from one place and distributed across several channels.
- You need a highly flexible tool to translate your raw content into many displays.
- You have enough time to find or build the right publishing tools to complete your tech stack.
- You have a developer team that can connect the headless API with publishing tools.
Consider a decoupled CMS if:
- You want a compromise between traditional and headless: a flexible API for accessing your content from any client, plus some front-end tools to help developers and non-developers present this content.
- You have the time, and developer resources to manage your front-end and make the most out of your API setup.
If headless sounds like a good fit for your content distribution strategy, see below for our list of recommended headless CMS services.
Best Headless CMSs
- Hubspot
- Sanity
- Contentful
- Butter CMS
- Strapi
- Directus
1. Hubspot
Hubspot’s CMS is designed for inexperienced and/or experienced individuals and teams who need to create and manage content. It offers a website-building tool with drag-and-drop design elements so that you can craft pages quickly without coding.
The software has a comprehensive set of marketing tools, A/B testing, personalization, analytics, and more. Hubspot’s CMS integrates with its popular suite of marketing tools, including CRM, email autoresponders, social media management, and so on.
Pricing is free for basic users, then starts at $18 per month for the Starter plan and goes up as you get to the Enterprise plan. It should be noted that Hubspot is not a strictly headless CMS, as it does have a traditional web platform.
Image Source
2. Sanity
Sanity is a cloud-based headless CMS solution that allows for real-time collaboration between members of your content team. Within the Sanity Studio editor, creators and marketers can leave comments and drop suggestions in any piece of content, as well as keep track of changes in the content log.
Developers can take advantage of sanity’s highly-customizable environment. Sanity is built on the React JavaScript library, and programmers can tailor the open-source Sanity Studio to their preference.
Sanity’s pricing plans comprise a basic free version, a mid-tier option for teams starting at $199 per month, and a custom enterprise solution.
3. Contentful
Contentful is a cloud-based headless CMS aimed at enterprises and is regarded as one of the best SaaS CMSs on the market. It’s used by top brands like Audible, Lyft, and Spotify.
This tool is designed to combine the flexibility that developers need with the content management and interface that marketers expect. On the development side, Contenful’s API integrates with any tech stack, so your tech team can choose their preferred tools for content presentation. Content creators will appreciate the easy-to-use management tools, integrations with cloud storage platforms like Dropbox, and a rich content editing interface.
Contentful is priced on three tiers. The Community plan is free and meant for teams of five or fewer with limited assets. The Team plan starts at $489 per month, allowing for more users, customer support, and managed assets. Finally, Enterprise is Contentful’s custom solution, with no limits on API calls or users.
4. Butter CMS
Butter CMS is both a headless CMS and a blog engine targeted at ecommerce sites, agencies, software teams, and blogs. This tool packs extensive content modeling features for marketers, including SEO tools, and a WYSIWYG editor, and support for images (plus image editing) and audio content.
As expected, Butter’s multiple content APIs let developers sync with any tech stack. Butter even incorporates Amazon CloudFront’s CDN for faster delivery from its content APIs.
Pricing starts at $49 per month for the Blog plan (which also includes migration from WordPress). Businesses should consider the Startup plan tier ($124 per month) and up.
5. Strapi
Strapi is a leading open-source headless CMS — seriously, the whole thing is available on GitHub. It’s also self-hosted, an alternative to cloud-based solutions we’ve seen thus far. Businesses who wish to keep their content on their own systems may see this as an advantage.
Since it’s open-source, developers can customize any aspect of the program as required. However, it also means a more intensive setup process to get things going. Pricing starts at $29 per month, and there’s a free plan too.
6. Directus
Directus is another open-source tool for headless content management, best for projects in need of a relatively lightweight and highly customizable solution. Its free CMS, Directus Open-Source, sets up an API that lets you easily query your content database with your front-end tools.
There are also two paid cloud-based products, On-Demand Cloud ($99 per month per project) and Enterprise Cloud. These tools handle the content storing, so you don't have to create a SQL database yourself. Plus, they offer intuitive content editors and management controls, and a global CDN.
A Different Way to Distribute Content
Ten to 15 years ago, businesses could get by with an appealing website to distribute their content online. Today, the bar is much higher. Content distribution can take the form of websites, apps, wearables, and virtually any other technology that exists or will exist.
So, if you’re building or redesigning your site and feel limited by the traditional CMS approach, consider a headless CMS or a decoupled CMS — they’re certainly more work to set up and coordinate, but you’ll ultimately have greater control over where your content ends up and how it looks when it gets there.
.png)
