This extension provides way to output content from TYPO3 in JSON format.




Installs: 369

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 55


v3.2.3 2022-12-04 14:39 UTC

This package is auto-updated.

Last update: 2024-02-26 12:29:53 UTC


TYPO3 10 TYPO3 11 CI Status Latest Stable Version Total Downloads License Contributor Covenant Coverage Status


Headless allows you to render JSON from TYPO3 content. You can customize output by changing types, names and nesting of fields.

This extension provides backend part (JSON API) for TYPO3 PWA solution. Second part is a JavaScript application nuxt-typo3 which consumes JSON API and renders the content using Vue.js and Nuxt. See frontend documentation here:

If you have any questions just drop a line in #initiative-headless-pwa Slack channel.

Read online:


  • JSON API for content elements
  • JSON API for page and meta data
  • JSON API for navigation, layouts
  • taking into account all language and translation configuration (e.g. fallback)
  • easily extendable with custom fields or custom content elements
  • custom data processors directly for headless usage
  • support for EXT:form
  • support for EXT:felogin
  • support for EXT:redirects
  • support for EXT:seo
  • [BETA] backend module for simulating page preview (with specific page type, lang, usergroup)

Additional extensions and integrations

Requirements and compatibility

With the release of TYPO3 v11.5 LTS we have to move support for TYPO3 v9 and v10 to another branch as changes between those two versions are incompatible. Version 3.x and master branch will support TYPO3 v11, and headless version 2.x keep support for v9 and v10.

Headless version 3.x

PHP 7.2 PHP 7.3 PHP 7.4 PHP 8.0
TYPO3 v9.5 no no no no
TYPO3 v10.4 no no no no
TYPO3 v11.5 no no yes yes

Headless version 2.x

PHP 7.2 PHP 7.3 PHP 7.4 PHP 8.0
TYPO3 v9.5 yes yes yes no
TYPO3 v10.4 yes yes yes no
TYPO3 v11.5 no no no no

Quickstart / Demo

If you want to take a look at working demo including frontend, backend and demo data, use our DDEV based demo project here:


Install extension using composer
composer require friendsoftypo3/headless

Then, you should include extension typoscript template, and you are ready to go. Also, please remember to don't use fluid styled content on the same page tree together with ext:headless.


Extension documentation

JSON Content Object

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


    "header" : "headerFieldValue"

in addition, keyword fields allow you to nest multiple times fields in json, e.g. = JSON {
  fields {
    data {
      fields {
        foo = TEXT
        foo {
          field = bar

        foo1 = TEXT
        foo1 {
          field = bar1


    "data": [
            "foo": "bar",
            "foo1": "bar1"

INT, FLOAT & BOOL Content Objects for use in JSON Content Object

We introduce new simple content objects to improve JSON API response for frontend developers. We can set correct property types, so frontend does not have to deal with string values for fields with numeric values or field that should be true/false. = JSON {
  fields {
    data {
      fields {
        foo = INT
        foo {
          # db value of foo_field = 1
          field = foo_field
        bar = BOOL
        bar {
          # db value of bar_field = 0
          field = bar_field


    "data": [
            "foo": 1,
            "bar": false


You can override every field in output using typoscript. This extension allows you to use standard typoscript objects such as TEXT, COA, CASE.

Page response

n headless v3.0 we introduce a new, smaller, faster and more flat page response. If you want to keep compatibility with your frontend application, you can load a deprecated typoscript template for version 2.x and keep the old structure of the response running.

New response (version 3.x) ⬇️


Old response (version 2.x) ⬇️



You can use Data Processors just like in FLUIDTEMPLATE Content Object, e.g.

lib.languages = JSON
lib.languages {
  dataProcessing {
    10 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
    10 {
      languages = auto
      as = languages

Built in data processors

We provide multiple data processorors for headless usage


This processor should be used to process files (standard or media files). Also, it allows you to proccess images.


Should be used along with FilesProcessor (chained). Used for processing mutliple media files.


Used for navigation. Works just like standard menu processor.


Used for proecessing flexforms.


Render your all headless sites configuration for your frontend application.


Development for this extension is happening as part of the TYPO3 PWA initiative, see If you have any questions, join #initiative-pwa Slack channel.


A special thanks goes to company, which is sponsoring development of this solution.

Developers involved in the project

  • Łukasz Uznański (Macopedia)
  • Adam Marcinkowski (Macopedia)
  • Vaclav Janoch (ITplusX)