Cosmic Blog Headless CMS: Everything You Need to Know

Headless CMS: Everything You Need to Know

by Disha Sharma on August 12, 2020

headless cms

Quite a few businesses — right from startups to enterprises — now consider headless content management systems for running their content channels. They don't simply default to WordPress or other traditional CMSes anymore.

Many even switch to headless CMSes from their current legacy content management systems. 

The biggest motivation for these businesses considering (or switching to) a headless CMS is the freedom it gives them for delivering bespoke content experiences. 

Also, SaaS headless CMS solutions take care of the entire content infrastructure as well for a simple monthly fee. This frees up resources that would have otherwise been spent on its maintenance, security, and scalability.

So let's see what a headless CMS is in detail, the many benefits it brings to businesses, and if you should consider it for managing your digital content. Here are jump links to the different sections we're covering in this primer on a headless CMS:

  1. "Headed" and headless CMSes
  2. What is a headless CMS? And how does it work?
  3. Headless CMS vs. traditional CMS
  4. Headless CMS vs. decoupled CMS
  5. Headless CMS - the benefits
  6. Headless CMS - the limitations
  7. Headless CMS examples
  8. A sneak peek into a headless CMS (Cosmic)
  9. Wrapping it up…


"Headed" and headless CMSes

Traditional content management systems come with a "head" and a "body." 

The head is the theme or the presentation layer that displays the content.

And the body is the content management system's back end where content ops like creation and storage happen.

In contrast with a traditional CMS, a headless CMS comes with just the body and no head — hence, "headless."

So essentially, a headless CMS only takes care of your content creation and storage. And in place of the head, a headless CMS gives you APIs that you can use to deliver your content to any head like your website, web or mobile app, Shopify shop, etc.


So what really is a headless CMS? And how does it work?

A headless CMS is a CMS that comes without a presentation layer (the head). It works as a single source of your content that you can use to deliver bespoke content experiences to any channel, platform, or device. For example: Desktop, mobile, and emerging tech experiences.

Headless CMS Explained Devices

Here's an example to put this into perspective:

Suppose you're a travel service like Bookabus.

Now, just imagine a few ways your potential leads could interact with you. 

  • Some might land on your website through a search engine and look for a trip's cost.

  • A few might use a voice assistant like Google Assistant to fetch the same information.

  • And others might use a connected kiosk to evaluate your services.

It's also possible that many of your website users download your app and then use it to continue their buying journey with you, making your app yet another channel. 

What you have here are different users using different channels to access your content, often in multi-channel buying journeys.

Naturally, to offer consistent experiences to all your leads, you should be able to fetch the sought information (the info on pricing, in this case), and deliver it instantly to whatever channel they might be engaging with.

Here's where a headless CMS comes in.

If you go with a headless CMS for such a business, you can simply create a content property called "pricing," and deliver it (along with relevant messaging about the service)  each time users seek it via APIs — irrespective of the channel, device, or platform they might be engaging with.

You might be able to achieve somewhat similar results using traditional or decoupled CMSes, but you'd need to create and maintain backend content management and delivery systems for each channel. 

For example, you can't push your WordPress website's data to your native Android app without building an entire infrastructure for it. With a headless CMS though, you'll have the content infrastructure in place. All you'd need would be a mobile app solution with support for content via APIs.

Now what you just read is an "EXTREME" multi-channel example of a headless CMS in action.

And very few businesses would need such an implementation.

Most that go with a headless CMS use it just for delivering great website content experiences. Yeah, just that. 

Before we get to the benefits of a headless CMS that explain why businesses are ditching traditional and decoupled CMSes, let's see how it compares with them.


Headless CMS vs. traditional CMS

A traditional CMS like WordPress, Magento, or Drupal — that works as a coupled CMS by default; also called a legacy CMS — is mainly designed for serving web content.

In a traditional CMS, you get a database, a back end, and a front end — all tightly coupled together. 

Headless CMS vs. traditional CMS


As soon as you hit publish, such a CMS pushes your content to your template which is the default head or the front end. 

Now let's see how a headless CMS stacks up against this.

In a headless CMS, you get no front end. Just a dashboard for creating your content and APIs (RESTful or GraphQL) for delivering it to your blog, mobile app, etc.

A headless CMS


Because a front end doesn't exist in it, a headless CMS is also sometimes referred to as a back end-only content management system.

So why are businesses going with headless CMSes? 

Well, they do so for three reasons:

The first one is that while traditional CMSes are great for businesses that mainly only sell via their websites, they DON'T let you do all.things.content.

For example, if you look at the content channel for a business website, you'll find everything from blog posts to landing pages and case studies in it. Most CMSes aren't designed to support all these content types right-out-the-box.

Sure, you could use page builders and style your posts to look like case studies or landing pages to look like sales or product pages… but this won't come anywhere close to what the powerful content modeling features in headless CMSes make possible. Also, beyond a point, your customizations will start to bloat your content infrastructure and things will begin to break down or you'll just hit the wall. 

[A traditional CMS] won't come anywhere close to what the powerful content modeling features in headless CMSes make possible.

The second reason is that when you go with the self-hosted option with a traditional CMS, security, scalability, and maintenance of your entire content infrastructure become huge problems. You'll need developers on your team to make sure your website's up and speedy and safe.

If you go with a "managed" plan — that manages all this for you — you'll have to shell out about $200/mo for a good service… but still be tied to the limited content capabilities the underlying CMS supports.

And finally, if you want to build a modern website that's optimized for performance, for example, a frontend powered by Jamstack, you can't use coupled CMSes (without first decoupling it). 

With a hosted headless CMS like Comic, you get to break free from all these limitations coupled CMSes come with. Before we see how, let's see how headless CMSes and decoupled CMSes — two terms often incorrectly used interchangeably — differ.


Headless CMS vs. decoupled CMS

A decoupled CMS is a traditional CMS with its default head (or its in-built templating system) separated from the content creation and storage part (the back end). 

Unlike a traditional CMS that forces you to use a particular templating system for the front end, you can use APIs with decoupled CMSes to connect them with custom heads or front ends for your web, mobile, and other channels.

Headless CMS vs. decoupled CMS

So if you wanted to use a decoupled traditional CMS (say, WordPress) with a custom-built head (a frontend powered by Jamstack, for example), you could use the REST API to do so. 

It's easy to confuse a decoupled CMS with a headless CMS because both let you use custom front ends, and consume APIs. But they're two fundamentally different architectures.

A headless CMS has no head AT ALL…  so you can use it with a 100 percent custom front end. 

Whereas a decoupled CMS has more like a "separated head" that allows for some flexibility in what you can achieve at the front end but you're still tied to the legacy CMS.

Also, you'll encounter the same security and scalability issues here as you would in coupled traditional CMS implementations. Not to forget having to maintain an entire content infrastructure and the limited content production possibilities.

You'll [still] encounter the same security and scalability issues here as you would in coupled traditional CMS implementations.

With that clear, let's look at the different benefits headless CMSes bring to businesses.


Headless CMS - the benefits

A headless CMS comes with many benefits over traditional and decoupled CMSes. 

Here are a few key ones.

Freedom from having to maintain a CMS infrastructure. With a hosted headless CMS like Cosmic, you don't have to worry about maintaining, securing, or scaling your content infrastructure. This is all done for you. 

Freedom to offer any kind of content experiences: Powerful content modeling features let you create any kind of content super-fast. Think articles, help center resources, product pages, landing pages, etc. So there's no need for you to invest in a help center theme or a landing page builder and then get them all to work together. Produce all the content/collateral you need right inside your CMS. 

Power to choose any stack for your website. If you want to use Jamstack for your website's front end architecture (for improved security, performance, and reliability), a headless CMS is a natural choice for you. Coupled CMSes don't support Jamstack's way of working (i.e., delivering files/experiences directly from a CDN, so they load blazing-fast).

Unparalleled scalability: If you need to serve millions of content-driven web/mobile experiences a month, you'll encounter scalability issues with traditional CMSes, because the underlying CMS technology will decide how much you can do. You need to work on everything right from database loading and managing HTTP requests to serving media resources for scaling a traditional CMS. But a headless content management system can be easily scaled, without impacting the rest of your infrastructure.

Improved security: With a headless CMS, there's just one end point connecting your tech stack with your content ops… so the attack surface area is very small compared to that of traditional CMSes. Not just that, when you use WordPress (self-hosted), you're responsible for maintaining the security of your installation. Whereas with a SaaS headless CMS solution like Cosmic, the responsibility lies with the provider.

Multi-channel publishing: Headless CMSes realize the "create-once-publish-everywhere" idea. Once your content is inside your headless CMS, you can use APIs to deliver it to all the channels you use.

Powerful editorial features: Facilitating faster and more streamlined content production is a key functionality a headless CMS is expected to deliver. And for that, user-friendly headless CMSes like Cosmic offer creator-friendly dashboards, roles and permissions (so you can control access to your repository and even to each piece of content and copy), versioning (just in case you need a backup) and more. 

Asset library: Your headless CMS also doubles up as your asset library. So if you've any files — a content style guide, for example —  just drop them into your central bucket and your repository will have it, accessible to all the authorized parties.

Support for the RESTful API: RESTful API is one of the most popular ways to get digital properties or technologies in a tech stack to talk to each other. Because headless CMSes like Cosmic support the RESTful API natively,  they can communicate data via the RESTful API seamlessly with all the platforms, devices, or channels a tech stack supports.

Support for the GraphQL API: Touted a more optimized alternative to RESTful API, GraphQL API, is another way to get a tech stack to communicate. Again, because headless CMSes support GraphQL API, they can easily communicate with all the different technologies powering the custom front and back ends in headless or decoupled architectures. 

Client SDKs: In addition to support for APIs, headless CMSes like Cosmic also come packed with SDKs. So if you wanted to use Cosmic with React-powered native apps, our NPM module would give you a headstart, as another abstraction layer vs. connecting to the APIs directly.

Support for personalization: In personalization, you have multiple (personalized) versions of the same content or copy. Because content production lies at the heart of headless CMSes, you can use them to deliver API-based personalizations on the fly. The data that a headless CMS needs for serving personalized experiences can be easily communicated via APIs by your digital experience solutions. You could also directly custom code basic personalizations via frameworks like Angular. 

Support for localization: You can deliver your "heads" in any language with localization support that's available right out-of-the-box in headless CMSes like Cosmic. 

Microservices-friendly: Microservices-based architectures enable development teams to develop their solution as "a suite of apps" instead of "an app." If an app in such a suite can do better with another technology, switching only needs work on that one. That's why many businesses are re-engineering their solutions to be microservices-based. A headless CMS fits into this architecture nicely where it can deliver content as just another microservice in the stack.

Although a headless CMS has many benefits, its implementation logistics may be problematic in some situations.


Headless CMS - the limitations

Here are three of the top concerns businesses considering a headless CMS may face.

Development resources: You would need at least one developer on your team if you want to go with a headless CMS. And that's because you need to develop the head(s). Depending on how many channels you want to deliver your content to, this might translate to significant development resources. For example, using a headless CMS for creating a bespoke eCommerce website might not cost you a lot… but using it with a full-blown headless commerce setup might. Maintenance (of the heads), too, is needed. 

Preview: When you go with a headless CMS, starting with content creation is as easy as one-two-three. But as soon as you're done with creating your content, you'll not know what your content will look like as there's no default head you can preview your content on. For example, if you want to use a headless CMS to run your blog, you'll have to design and develop your blog's interface and connect it to your headless CMS to be able to preview and publish your posts. 

Costs: Many companies switch to a headless CMS from free, open-source CMSes like WordPress and Drupal. Naturally, the SaaS pricing plan that comes with a headless CMS has to compete with the "free" CMS. So that becomes an issue. (That said, traditional or free CMSes too aren't free in the real sense. Sure, you aren't paying any fee for using the platform but you do need to invest heavily in developing and maintaining your CMS. With a headless CMS, this is all taken care of for you.)

With that, let's now look at a few interesting implementations of a headless CMS.


Headless CMS examples

MoveSpring

A headless CMS example

MoveSpring lets companies like Amazon, Best Buy, Uber, Deloitte, Lyft, and others make fitness a part of their culture by making moving fun. 

Like most businesses, even MoveSpring went with WordPress as its content management system.

However, it soon realized that matching the look and feel of its communications (blog and other collateral like help centers and more) with the rest of its website was proving to be quite a challenge with WordPress. 

MoveSpring also had (dynamic) content types that it needed its non-tech team members (like salespeople and success managers) to be able to upload on their own.

And it wanted to switch to React/GraphQL for running its blog too.

This need for driving better content experiences for its creators and users pushed MoveSpring to a headless CMS (Cosmic). A blog using a technology of their choice, easy content creation, and full control on how its content showed are some of the things MoveSpring accomplished with the switch.


Tripwire Interactive

A headless CMS in action

With an average play time of over 40 hours, per player, per game, Tripwire Interactive is the place to be for gamers.

When the team upgraded to a modern React stack for its website, they needed a CMS that could match their desired content velocity. 

Every game needed a new landing page with marketing copy. Plus, the team needed a host of other content types including blog posts, press releases, and more. 

The Tripwire Interactive team also wanted to ensure that its marketing team didn't depend on its developers for posting their stuff.

To get the best of both, the team went with a headless CMS with an easy content creation dashboard:

"Cosmic JS allowed us to easily integrate a secure and fast back-end API into our React app. Cosmic fit our needs with its simple web-based dashboard so that members of our marketing team can create, edit, and delete new content on the fly. Our team has been enjoying the ease of use with the new system." — Owen Liversidge, Lead Developer

Derive Systems

A headless CMS implementation

Derive Systems personalizes more than 300 million driving experiences for its users helping them drive more safely and efficiently.

The team at Derive Systems was looking for a CMS that would let its content team produce different kinds of content types quickly. It was also looking to give its developers the flexibility they needed for delivering beautiful content experiences on their user-facing channels.

To empower both — its content creators and developers — Derive Systems chose to go with a headless CMS (Cosmic). Using Cosmic's content modeling tools, its content team has been quickly building the different content formats it needs and delivering them seamlessly via Cosmic's GraphQL API.


A sneak peek into a headless CMS (Cosmic)

When you log into a headless CMS for the first time, you'll most probably be asked to create a "Bucket."

This Bucket is your content repository where your content ops happen.

If you log into Comic — our headless CMS — for the first time, we'll ask you to create a Bucket. 

Once you do that, you'll need to create your Object Types

Object Types are basically your content types. 

Think pages, posts, help center resources, etc. 

Let's create an Object Type "Page" for this walkthrough:

Now, every Object Type needs a content model. 

A content model is nothing but the different data types/properties an Object Type will support and its basic structure.

For our "Page" Object Type, we could go with a simple 3-Metafield content model like:

  1. A title

  2. A meta-description

  3. An HTML text area

Here's how our content model would look like:

Once the content model is defined for an Object Type, you're ready to add an Object.

So now we're ready to add an actual page for our "Page" Object Type:

Clicking the Add Object button loads the page content model we just defined, and now we just need to paste our content into this:

And done!

And that's exactly how you keep adding diverse but consistent and structured content and collateral to your CMS without waiting on developers to custom code stuff for you.


Wrapping it up… 

Headless CMSes may not be mainstream — yet. 

But many businesses that feel boxed in by their current traditional CMSes are looking to explore them. 

And you can easily get why… 

With a headless CMS, you don't have to maintain a content infrastructure. It's done for you.

You also get improved security and unparalleled scalability. 

And, of course, total control on how and where your content and other collateral appear. 

Other than the freedom from maintaining, securing, and scaling an entire content infrastructure, the multi-channel support that headless CMSes offer (right-out-of-the-box) is another feature that drives businesses to it. This can be useful to you for when you're ready to ship, say, a native mobile app.

But in general, ANY business that wants to modernize its content process and deliver great content experiences, even if it’s just for its website (at least, for now....!), is ready for a headless CMS.

And that's because the biggest benefit of going with a headless CMS remains the freedom it offers from having to run and maintain the content infrastructure while offering infinite content/collateral production possibilities.

P.S Would like to take a headless CMS for a spin? Check out Cosmic. We have pre-made apps that you can use and launch things like a simple blog or store within an hour!

Photo by Halacious on Unsplash

You may also like


In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Jamie Introcaso, an experienced Software Developer residing in Charlotte, North Carolina. Jamie is an active member of the Cosmic JS Community and recently wrote a blog detailing his migration from WordPress to Cosmic JS. With more community projects on the way, we're excited to interview one of our own for this Spotlight. 😎 Follow Jamie on his Cosmic-powered website, Twitter and LinkedIn and enjoy the conversation.

In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Jacob Knaack, a Web Developer and Technical Communicator residing in Seattle, Washington. Jacob is a Front End Developer at restack, a development studio that finely crafts websites and apps. Jacob is also a frequent contributor to the Cosmic Community, having recently built both the Progressive Apollo Blog as well as the Gatsby Documentation Website. Follow Jacob on LinkedIn and GitHub and enjoy the conversation.

Looking to shortlist some headless content management systems? Our comprehensive list will help you narrow down the growing headless CMS landscape.

What is headless commerce? What does a headless commerce architecture look like? And how do you build one? And do you need to in the first place? Get all your headless commerce questions answered right here.

At Cosmic, it's our mission to help teams of developers and content creators build great content-powered apps together. We're happy to announce the new Additional Users Add-On to offer a flexible pricing option for growing teams.

In this episode of the Cosmic JS Developer Spotlight Series, we chatted with Lydia Hallie, remote software developer and active contributor on Dev.to. She has been getting a lot of attention for her easy-to-follow (and beautifully visual!) educational resources for JavaScript. Follow Lydia on Twitter, GitHub, LinkedIn, and enjoy the conversation.

Ready to Get Started?

No payment info required.
Start Now   Contact Sales