Skip to content
Hybrid Mode Addon for Cockpit CMS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Cockpit Hybrid Mode Addon

This addon provides the ability to use Cockpit in an "non headless" mode! Cockpit is by nature an headless CMS, providing a rich UI to manage contents and an API to fetch them, that means the need of a frontend that can consume, transform and display the page contents. That is the current trend of the CMS's, so why reverting that?

Mostly for fun and to confirm how flexible Cockpit can be. But also because that can help the guys that don't want to deal with javascript frontends or static website generators.

Please note that the addon is the result of a Proof of Concept and therefore wasn't tested, it's possible that it doesn't work properly in some scenarios.


The concept is quite simple, in Cockpit we can bind routes to a Controller, so we can make a strategy to have routes that correspond to a collection, e.g.:

  • Basic Page page/*
  • Blog Post blog/*
  • Events event/*

Using the BetterSlugs addon we can define a slug field that will match the above routes, so a blog entry will be /blog/<blog-title>

And implement our own controller that will get the page path, find the matching entry using the slug as filter, and finally render the entry. Twig engine is used for rendering the pages, so we have all flexibility that we need to manipulate the markup. The example theme is using Boostrap 4 native. Its possible to preprocess the results using the following hooks:

  • theme_hbmode_process_entry($app, &$entry) The entry array can be manipulated before being rendered.
  • theme_hbmode_process_header($app, &$vars) The header variables can be changed, in the example theme the navigation menu is build using a collection.
  • theme_hbmode_process_footer($app, &$vars) The footer variables (e.g. copyright, etc..) can be changed.


  1. Install the BetterSlugs addon -
  2. Download and unpack addon to <cockpit-folder>/addons/HBmode folder.
  3. Inside <cockpit-folder>/addons/HBmode install dependencies by running: $ composer install
  4. Copy the example theme (hbmode) from the install folder to storage/themes/
  5. Copy the example collection files from the install folder to storage/collections/
  6. Import the collections entries from the install folder storage/collections/*.json files Step 5 and 6 are only required in way to work with the example theme.

If using the Helpers addon the steps 4, 5 and 6 can be simplified by running on the cockpit root folder:

$ ./cp install --name HBMode


add to config/config.yaml:

  theme: hbmode
    collection: basic_page
    slug: /page/homepage
        collection: blog_post
        route: /blog/*
        template: blog.html.twig
        collection: basic_page
        route: /page/*
        template: page.html.twig

The theme element defines the active theme (themes must be inside the /storage/themes folder). The homepage element defines the collection and corresponding slug that will be used to serve the homepage. The routes will define the pattern and template used for our collections, so we can have different templates.


Play with the theme and change according to your needs. Twig templates are cached, caches are removed when cleaning the global cockpit cache.


  • Public pages only work when user is logged out of cockpit
  • Just text and image/assets are being handled
  • Security?! This is mostly a Proof of Concept, security or performaace are not being addressed.
  • Depending on the needs, the theme may need to be adjusted
  • Not handling layouts, blocks or more dynamic contents.
  • Excluding the homepage all slugs need to have a prefix (e.g. page, blog)


  • Rethink how to deal with complex fields like layout grid
  • Handle of custom components
  • Handle authentication (right now pages cannot be previewed)
  • Have non prefixed slugs working
  • Load CSS and JS from the theme info.yaml file
  • Code refactoring
  • ...


HBMode Addon Demo

Copyright and license

Copyright 2019 pauloamgomes under the MIT license.

You can’t perform that action at this time.