What is a headless CMS? Explanation, examples, applications, and code

A Headless CMS (Content Management System) is a modern content management system that separates the presentation layer (frontend) from the content management backend. Unlike traditional CMS platforms such as classic WordPress or Joomla, a headless CMS does not have a predefined user interface – it only provides a backend for managing content and an API (e.g., REST or GraphQL) to fetch and display content on any frontend.

What does the term mean?

In IT terminology, “headless” means “without a head” – that is, without a specific visual layer. The key difference:

Traditional CMS: frontend and backend are combined; website templates are part of the system.
Headless CMS: the backend (admin panel and database) is separated from the frontend, which can be built in any technology.

What does a headless CMS look like and what are its features?

A headless CMS is typically an admin panel in the browser, allowing you to create, edit, and manage content. The content can be fetched via an API, usually in JSON format.
Key features:

Provides content via API (REST, GraphQL)
Does not enforce any specific look or presentation of the content
Enables publishing content to various platforms: web, mobile, IoT, desktop apps, etc.
Great integration with modern frontend stacks (React, Vue, Angular)

Examples of headless CMS usage

Websites and applications that require multi-channel publishing (omnichannel): websites, mobile apps, smart TVs, etc.
Blogs and portals that use modern static site generators (e.g., Gatsby, Next.js)
E-commerce stores where the frontend is custom-built and content is managed centrally.

Popular headless CMS examples

Strapi – a popular open-source CMS supporting both REST and GraphQL.
Contentful – a SaaS platform, friendly to both developers and marketers.
Sanity – API-first, very flexible.
DatoCMS, Prismic, Netlify CMS, and also…
WordPress Headless – classic WordPress with themes disabled and content accessed via the REST API. This way, you can use WordPress solely as a content editing panel and build the frontend in, for example, React/Next.js.

Example code – fetching posts from headless WordPress (REST API)

// Example of a simple fetch in React
import React, { useEffect, useState } from 'react';

function BlogPosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://your-domain.com/wp-json/wp/v2/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Blog</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
            <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BlogPosts;

Summary

A headless CMS is a flexible tool that significantly simplifies building modern applications and websites. It enables content management to be completely separated from presentation, giving greater freedom to developers and making multi-channel publishing easier. Even popular systems like WordPress have a “headless” version, enabling users to take advantage of the headless architecture using REST API.

Tags: headless cms strapi