Headless CMS explained in 5 minutes

This article will cover the basics of what a headless CMS actually is. You will learn about the main differences between a headless CMS (eg. Storyblok, Contentful, Prismic, …) - and more traditional CMS like Typo3 and Wordpress.

What is a headless CMS?

A headless CMS is a back-end only content management system (CMS) built from the ground up as a content repository that makes content accessible via a RESTful API for display on any device.

The term “headless” comes from the concept of chopping the “head” (the front end, i.e. the website) off the “body” (the back end, i.e. the content repository).

A headless CMS remains with an interface to add content and a RESTful API (JSON, XML) to deliver content wherever you need it. Due to this approach, a headless CMS does not care about how and where your content gets displayed. A headless CMS has only one focus: storing and delivering structured content.

The counterpart of a headless CMS is often called monolithic, regular or coupled CMS and we’re going to use those terms later on.

Regular CMS

Let’s have a look at WordPress and their feature set:

  1. A database for the content to read and write to.
  2. An admin interface to let editors manage the content.
  3. An integration of reading and writing.
  4. The actual front-end that combines the data from the database with HTML.

To convert that into a headless CMS we simply remove the feature four from the stack. The head of that CMS - the actual website - was simply chopped off. What still stays is an application that allows content management (Admin UI) and reading (API: combined Integrations). Et voilà: you now have got yourself a headless CMS.

Storyblok: Headless CMS

Other than by using a regular/monolithic CMS, one website can’t be built only with a headless CMS. A headless CMS separated the head from its stack and therefore lacks this point by design. Therefore, the developer must craft the website by his- or herself and use the Content Delivery API of the headless CMS to load the content.

Creating the whole website on their own seems like a big task on the list, but by decoupling the CMS from the front-end a developer can choose any technology he is already familiar with and does not need to learn the technology for that specific CMS. Another big bonus is the fact that one developer can also focus on their own work without handling the bugs of an already existing stack of technology - therefore it is easier to optimize pages for googles pagespeed and even relaunch parts of the website without needing to care about the content.

Do I need a headless CMS?

The answer to this question is quite simple, but it won’t help you much: It depends on your requirements. There are use cases where one CMS outstands the other and vice versa. To help you decide, let’s have a look at the benefits really quick:

Traditional CMSHeadless CMS
platform independencex
free technology choicex
cross-platform supportx
developers firstx
traditional plugin apocalypsex
localization
code simplicityx

Use cases for Headless CMS

  • Build a website with a technology you are familiar with.
  • Websites, Web apps that use JavaScript frameworks (VueJs, React, Angular)
  • Websites created with static site generators (Jekyll, Middleman, …)
  • Native Mobile Apps (iOS, Android, Windows Phone)
  • Enrich product information on ecommerce sites.

Point is: It is not limited to websites

A headless CMS can deliver your content through an API directly to where you need it. Because of the headless approach the content can be used on an iOS app, Android app as well as any platform and technology you can think of (yes and even a Windows Phone App) and is therefore a powerful option for mobile and web developers.

Headless CMS Options

In an earlier article we wrote about that WordPress and Drupal already trying to work their way into going headless - or at least offering an API approach. Both of these options try to make the CMS work in a way that they were not initially designed for. Here are some headless CMS options you might like to have a look at to find your best fit: Storyblok, Contentful, Prismic. There are also other options out there, but looking at the feature set and concepts - those are the platforms you should have a look at.

Storyblok: Headless CMS

Storyblok: Headless CMS

Storyblok is a headless CMS as a Service. You can access your data which is a nested JSON tree using our Content Delivery API or simply opt-in our Cloud Rendering Service combined with developer-friendly frontend editing capabilities to any template engine, framework or system of your choice.

Storyblok has its main focus on the API including the overall performance, querying capabilities, nested components, documentation, consistent support, and upgrades. So it is not only a CMS for editors. Storyblok also provides clean and structured JSON for developer mixed with services like:

and an opt-in head to also allow users to simply bootstrap a company page or a portfolio without the need to fallback to WordPress or Drupal for those use cases.

Summary

As you see there is no 100% right way and CMS for every use case - but we think that chopping off the presentation layer of your content and make it accessible for more than just one platform if needed is the approach we should aim for!

We would love to see you give Storyblok a try, it’s quick, easy, and comes with a free plan!


More to read...

About the author

Dominik Angerer

A web performance specialist and perfectionist. After working for big agencies as a full stack developer he founded Storyblok. He is also an active contributor to the open source community and one of the organizers of Stahlstadt.js.