Technology

Advanced Contentful Editor

A quick introduction on a dedicated App built on top of Contentful to improve the overall experience and to optimize the usage of that great tool.
3 minute read
By Thomas Rabaix

Experience! This is an important word that requires good thinking and wise knowledge to deliver expected behaviours and unique features. We like to take incremental steps to improve processes or workflows for our clients.

Today, it is about improving the default Contentful editor. Contentful is a Headless CMS, we like the solution, it just works - fire and forgets. But like any solution, nothing is perfect. The main complaint we have is with the lack of customisation of the back office UI. Don’t get this wrong, this is a pain point of any (headless) CMS. The good news is that Contentful provides a way to create dedicated editors. So …

Advanced Editor for Contentful

We have created an editor to improve the input form experience. You can organise inputs group into tabs, add collapsible sections, and hide/show inputs based on selected field values. The solution is easy to install thanks to Contentful extension’s entry points.

We have compiled a few examples…

Contentful Editor Tabs

Tab edition

Contentful Editor HideShow

Hide / Show based on the value

These small grouping options make the form organisation a lot clearer for the end-user, but also have a nice effect on optimising Contentful usage.

Optimizing the Contentful usage

It is now possible to have conditional fields so entity managing complex page layouts like an Article or a Page.

Let’s image a generic Fragment content type which acts as a placeholder for different possible options to render information. Instead of having 10 content types for each module that can be displayed on a page, you can have one content type and different form rendering based on the type. This is very helpful to optimise Contentful usage.

If we mixed this with the Rich Text editor, it is now very easy to create pages with custom and re-usable fragments on a page with an improved user experience. The other nice effect of this, is when a user wants to change the visual representation of a fragment, let’s say from Hero banner to Large text, the user does not have to recreate a new entry, just click on edit to change the type, adjust text and save.

Contentful Editor Fragment

Fragment integration

The current editor is in closed beta if you want to know more please feel free to contact us.

Thomas Rabaix
CTO London, Ekino.
15 years of experience in large project developments, open source solutions, consultancy and team management.