Can you have true WYSIWYG editing with MACH?

The editing experience when you use a headless CMS varies a lot depending on which CMS you use. By design a headless CMS is not tightly integrated between the code that renders your pages and the code that edits your pages. This means a smooth user experience for editors is a challenge. Lets see how different systems try to overcome this situation.

Form based editors

When editing a page you will generally be presented with a semantic structure that is predetermined during development time. Different sections will have names and descriptions that might help you work out where on the page that content will be displayed. You will need to use your imagination and memory to determine how content within this form will be transformed into the final rendered page.

Examples of such CMSs are Strapi and Contentful.

Pros:

  • Frontend development could be easier because coders don't have to consider different layout possibilities. They can hard code layouts.

Cons:

  • Less flexible layouts.
  • Editors need more training and knowledge to understand which field maps to which content on the page.
  • Slower content creation since longer to switch back and forth to see the results of the changes particularly to change styles

Live Preview based editors

Live preview editors still only let you edit text and content in a form, not into the actual page. However, when integrated into your frontend framework they can offer a more visual experience. After you save your page they can do a refresh on a live preview of the rendered page in an iframe to show you how the page now looks. Some editors even allow you to click on an element on that rendered page to load the form on a sidebar to edit that content.

e.g. StoryBlok

Pros:

  • If you can click on elements to edit it's easier to work out which field maps to which content on the screen.

Cons:

  • Feedback on how it looks is not instant so switching styles and formats to get the right look is going to be time consuming. It is not true WYSIWYG.

True visual editors

Think of a medium.com style editor where you edit the page directly. The only way currently to achieve this with a headless CMS is using a frontend framework that has editing and admin components built in. The same components that are used on the page have an editable equivalent when the user chooses to edit the page. Content editors see imediately how the page will appear to users.

e.g. Plone 6

Picture of in in-line editing when using a CMS.

Pros:

  • The editing experience is natural and fast. There is no going back and forth to determine if the final result looks right. Editors are more productive.

Cons:

  • Less freedom on frontend technology choice. While you could still have a rendered frontend in one framework and your editable components using the CMS framework, you would be duplicating a lot of work so for many projects using the same code base for both is more cost efficient.

If you wish to know more about applying MACH best practice to your intranet project please contact us.