Blog single

Headless TYPO3 : What It Is and How to Use It?

Headless TYPO3 CMS has been trending and buzzing today. The future of CMS is quickly moving away from Traditional CMS to Headless CMS. Are you excited to know about TYPO3 Headless CMS from beginner to intermediate level skills? I’m sure this article will help you.

TYPO3 Headless is one such approach that is gaining much popularity because of its innovative ability to deliver outstanding digital experiences. 

Do you know?
According to Contentstack Headless CMS adoption rate is expected
to double in the next year.

With interactive and unique front-end designs and fast-loading websites. With the commitment of TYPO3 and its API-first architecture, content can be used and displayed anywhere.

Read on to learn more about TYPO3 Headless CMS. Trust me it’s interesting! Grab a cup of coffee and read on!

What is a Headless CMS?

When you load a page on a TYPO3 site, the server runs code that builds front-end developed code. That document is then sent to your browser. And then so TYPO3 and web apps that work in the same way are called server-side apps.

Basically, a headless approach is becoming very valuable in our multi-device world. Headless content management means the CMS is responsible solely for content input, editing, and sorting on the back end. A headless system should be highly accessible, and however, it is irrespective of front-end visual impact.

So, how does content in a headless system make it out into the world? 
Well, the content in the database is accessed through RESTful API calls. This means it can be viewed wherever it is called to, without templates or plugins. This can be used to create a traditional browser-based website or almost anything else in the IoT. 

So what is TYPO3 Headless?

Headless TYPO3 is an approach to building TYPO3 websites, in which TYPO3 serves as the backend content repository. The frontend is built in different technologies and communicates with TYPO3 via an API.

Explaining in detail, we can say that TYPO3 serves as the backend system. The frontend, which the client sees, is separate from TYPO3. That is where the headless name comes from - TYPO3 does not have the top layer anymore that is the head ;) but only exposes the APIs which the frontend uses as content sources. 

What are the advantages of adapting TYPO3 Headless?

  • More consumers of content

These days brands communicate with their customers not only through their websites but via multiple channels. CMS, therefore, is not used only to send content to web browsers. It pushes content to various other places. Apart from serving content for a frontend website, Headless TYPO3 can serve content via an API to be consumed by various other mediums, in which the brand wants to be present:

  1. mobile applications
  2. IoT
  3. kiosk displays
  4. etc.
  • Microsite manager

Sometimes a company needs to build multiple site variances (eg. one for each brand, event, promotion, country). In such a case, it might be easier to create one content engine to deliver content to all the microsites. 

  • Need for an elegant UI

TYPO3 is an amazing platform for content creation, data storage, etc, but it is written in PHP which is a server-side rendering engine. Javascript allows us to create fantastic interactions which are easy to use for visitors and are fast. Libraries like Angular, React or Vue help developers quickly create complicated frontend applications. 

  • Better Media Delivery

Improved Image, video, or content representation on different screens!

  • Live Blogging

Update stories in real-time with write-once publish anywhere concept.

  • Multi-site & Multi-lingual Support

Supports over 51+ international languages.

  • User-friendly interface

The most user-friendly open-source interface on the market.

  • Quick & Easy

Detach content from the web interface, the perfect option for non-tech people.

  • Adaptable

Independence to scale at speed without affecting content or the design.

  • Free & Open-Source

Completely free, simple with no feature limitations or licenses, for personal or commercial use.

  • Live Preview

See how your content looks before you publish it. Live. As you create it

TYPO3 As Headless CMS

Headless TYPO3 is an open-source initiative to build a professional publishing platform built with TYPO3 powered by a modern JS technology stack. This concept has been designed for teams who need power, flexibility, and performance with a write-once publish anywhere content storing mechanism.
 

TYPO3 can serve as the best fit for Headless CMS. You must be wondering why so?

The reason for this is because TYPO3 has out-of-box functionalities that have most of the required website necessities. It is one of the most mature CMSs and is compatible to work well with other fantastic APIs to build a perfect TYPO3 Headless website.

TYPO3 community is working very heavily to allow TYPO3 to be a great API-driven CMS. In 2019 a “TYPO3 Headless initiative” was launched. Its aim was to coordinate the development effort to allow TYPO3 to be a fully headless CMS.

The ultimate goal of TYPO3 Headless, To prepare a number of APIs to pass from TYPO3 to your favorite JavaScript frameworks like ReactJs, VueJs, AngularJs, etc.

As of writing this, enormous progress has been made in allowing TYPO3 to serve and receive content via APIs. 

That’s all we know about TYPO3 Headless CMS. Let’s check it’s how it works in TYPO3.

How to use TYPO3 as a Headless CMS: An Example

TYPO3 has been ahead of time and many thanks to Macopedia for sponsoring and working for the TYPO3 Headless initiative.
Basically, to use the Headless concept for the TYPO3 website, it is possible through TYPO3 Extension "headless" an extension with JSON content API for the TYPO3 PWA solution.

What Does TYPO3 Headless Extension do?

The headless extension provides a JSON API that can serve as an endpoint for any kind of application. It’s using the standard TYPO3 features to render the page-tree structure and page-content into a JSON format. The JSON response object and the content elements are customizable with TypoScript.

Headless permits you to deliver JSON from TYPO3 content. You can modify the yielded output by evolving types, names, and nesting of fields.

Let’s check out its key features,

  • JSON API for content elements
  • JSON API for navigation page-tree structure
  • Taking into account all language and translation configuration (e.g. fallback)
  • Easily extensible with custom fields or custom CE’s
  • Support for EXT:felogin and EXT:form
  • Support for EXT:news (see additional extension EXT:headless_news)
  • Support for (EXT:solr)
  • Support for EXT:powermail (EXT:powermail)
  • Support for EXT:gridelements (EXT:gridelements)

 

TYPO3 Headless Setup

To install TYPO3 Headless extension for your TYPO3 website, download TYPO3 headless extension,

Next step, you can install the extension manually using the extension manager with key headless.

Or with Composer,

composer require friendsoftypo3/headless

The next step is that you should include an extension TypoScript template, and you are ready to go. 

Please note that don't use fluid-styled content on the same page tree together with ext:headless.

And you’re done! Check out the output

In headless extension, we implemented a new JSON Content Object, which allows you to specify what fields you want to output, and how they will look. First of all, let's take a look at a simple example

lib.page = JSON
lib.page {
  fields {
    header = TEXT
    header {
      field = header
    }
  }
}

Output

{
    "header" : "headerFieldValue"
}

in addition, keyword fields allow you to nest multiple times fields in json, e.g.

lib.page = JSON
lib.page {
  fields {
    data {
      fields {
        foo = TEXT
        foo {
          field = bar
        }
        foo1 = TEXT
        foo1 {
          field = bar1
        }
      }
    }

  }
}

Output

{
    "data": [
        {
            "foo": "bar",
            "foo1": "bar1"
        }
    ]
}

Why Headless TYPO3 with JSON?

The current Ext:headless extension is powered with JSON:API module. It has massively improved the REST experience with TYPO3, making it an incredibly versatile system far superior to practically any CMS on the market.

  • JSON:API module exposes all entities in TYPO3 allowing for easy interactions, but it does so in a very elegant fashion:
  • It is compliant with the JSON:API standard (https://jsonapi.org/) making it easy for anyone wanting to integrate with a TYPO3 website easy to understand the data structures without the need for a lot of custom documentation
  • It allows querying for lists and filter by entity properties  and fields also following the JSON: API standard
  • The core JSON: API functionality is further extended by the JSON: API Extras module, which allows for additional configurability of the endpoints.

The above features effectively turn TYPO3 into a super robust backend for frontend applications.

And Summing Up!

Headless TYPO3 is an interesting approach to build feature-rich interactive websites or build content hubs that power various content-consuming websites and media. It is however not without disadvantages and careful consideration should be made before choosing this path.

Hopefully, this article gave you sufficient information to choose from. If not, we are always happy to consult your TYPO3 Headless project.

Write comment

Name*

URL

Comment*

    No comments

How do you stay on top of your TYPO3 game?

A good way to start is to sign up to our newsletter for monthly dose of TYPO3.