We're almost exclusively using the headless approach to integrate the Frontend Code into Magnolia (we're using react). However as correctly stated in the recent Magnolia Blog Post (https://blog.magnolia-cms.com/author/jan-schulte/what-is-a-headless-cms.html) one hit's a few limitations when it comes to the editing experience:
- display of content when editing can only be schematic
- preview must be customized
- the structure of the JCR content often does not match the one expected by the Frontend
The issue with the preview can be quickly dealt with by overriding the info.magnolia.pages.app.editor.pagebar.nativepagepreviewlink.NativePagePreviewLinkExtensionDefinition.
However, presenting the user with a meaningful Editor UI in the Pages App is still a challenge when using this approach. One problem is that the Magnolia Editor uses HTML comments to annotate rendered markup, which is later on analyzed and replaced with editor controls.
I imagine something like this: