Calgary's Wonderland art sculpture by Jaume Plensa representing Headless CMS in this article.

Don’t lose your “head” when you first hear the term Headless CMS

CMS stands for Content Management System. A few non headless CMSs you may have heard of include WordPress and Drupal. These platforms however have evolved into much more than facilitating just the delivery of content.

So where does the “headless” come in? It’s from the separation of the “head” (front-end) from the body (back-end). This sounds a little gruesome, but bear with me. 

Essentially, a headless CMS is a back-end content delivery system that makes its content accessible via RESTful APIs.

What are the benefits?

Using a headless CMS offers various benefits, like being able to separate your content from the rest of your application. This allows you to create dynamic, flexible views. 

With headless CMSs, you can distribute content through multiple systems. Any application on any device that can connect with your API can display your up to date content. For example, if you are bundling your application in a mobile app, you can now build your application to pull your latest content changes through an API rather than you changing the content, recompiling the app and resubmitting it to the stores.

They also allow for developers to be more flexible with technology. A headless CMS allows content writers (or admins) to get in, do their job and get out! The developer can build the app or view with any technology they would like. Modern JavaScript-based stacks such as Vue.js or React complement the headless CMS nicely. You can now create fun, user-immersive blogs without hacking WordPress or installing thousands of plugins to get it to look the way you want.

Headless CMSs are easy to use for content editors. With WordPress it is very easy to input HTML or text wrong and have the whole layout of a page break. Also, to compensate, WordPress will often spew out poorly formatted HTML which can cause conflicts on different devices or browsers. With a headless CMS, a developer controls how the content is truly displayed.

What are the cons?

A lot of this flexibility comes at a price. For instance, when switching from Drupal or WordPress you will notice how many things are taken care of for you. Often this includes “hey there’s a plugin for that”. Once you have your headless CMS setup you will discover fast what feature you will have to add manually. For example if you want to leave comments on a blog post, you will have to build that feature out from scratch.

As well, you will be maintaining two separate systems. The headless CMS has its own database and admin. This can create additional costs and effort.

When creating the content some CMS providers do not provide a preview. You will not truly see what the content will look like until it is loaded into the view.

So practically, what does a headless CMS look like?

Basically, one would have to find the best headless CMS provider for themselves. At this point there are a ton of headless CMS provider options. Each one is trying to rise to the top and become the standard. 

Each one will provide some form of admin portal. Most include user roles of an “editor” and “system admin”. The system admin can set up the content architecture and add content. The editor can only add content. You would assign this role to your sole content contributors.

Depending on the provider, the content structure and application will vary. However you will be able to create content types, for example, a blog or a portfolio piece. Each one of these types will house a different structure of content. The next step is to essentially set up the database schema for each type. You can create different field and media types. For example, my content type blog will always have a title and description, so I can choose short text as the field type short text for the title and field type the long text or blog field type for the description. 

So when an editor logs in and goes to add a blog they will be presented with a text field for their title and a text area for their description. It’s as simple as that. Once the editor fills in the content and publishes it, the content is saved to the database. The view can now use the API to call all the content post types and display them in the page.

Headless CMS providers

You can use this great resource for browsing Headless CMS: https://jamstack.org/headless-cms.

The costs can really vary on each on so make sure to watch out for that. Often they will limit the amount of content types you can create. If you are creating a basic blog than there are a lot of great options.

Have any questions around app and web development, and design? Hit us up at [email protected]. Subscribe to our newsletter below in the footer and stay tuned for our answers to your questions!

Scroll to Top