Headless CMS vendors Contentful and Sanity (in partnership with hosting provider Vercel) have recently implemented features that allow CMS users to open the records used to populate a page directly from the preview version of the site rather than navigating through the CMS to locate those records. These developments indicate some of the disadvantages of headless relative to monolithic and hybrid CMS and DXPs, which typically allow users to work in the context of the website with which they are familiar rather than the CMS user interface. Headless CMS does not include technology to render the website, which limits the features that they can provide in the site previewing environment.
Perfection has always recognized the usability advantages of delivering all its features in the visual context of the page but goes much further than simply allowing users to open records in the CMS. With Perfection, users can collaborate, control page layout and component presentation, review SEO analysis, open relevant records to edit in any CMS, commerce, or any other source system, and perform other functions, all in the context of the page.
Traditionally with headless CMS, customers build presentation facilities (“heads”) that retrieve data from the CMS (“body”). Theoretically, the head is not aware of the body, and the body is not aware of the heads. Rather than browsing the site itself to locate content to manage, CMS users must click through the CMS user interface to locate records to edit. Because each page is built from more than one CMS record, identifying those records used to construct any single page can be challenging and time-consuming for CMS users. This problem is especially complicated for solutions that render content from multiple systems, such as both a CMS and a commerce solution, where the user may not know which system contains a particular data element.
Perfection, Contentful, and Sanity provide facilities that allow a pre-production preview version of the site to expose what this blog post refers to as source links. In the site preview environment, the presentation layer overlays visual elements of each page with source links that CMS users can click to open the records used to populate the page that they are previewing. As opposed to navigating through the CMS, exposing source links in the preview environment streamlines the content editorial process, increasing productivity and reducing frustration for CMS users.
For source links to work, the front-end code must be aware of the CMS and the records used to populate a page. Contentful, Sanity, and Perfection each take different approaches to informing the front-end about these details.
Sanity refers to the feature that enables source links as Vercel Visual Editing. Currently, Vercel Visual Editing does not work with any CMS other than Sanity, or with any hosting provider other than Vercel. To support Vercel Visual Editing, Sanity has defined Content Source Maps, which are a proprietary specification that would allow any CMS to use the same technical approach to implement similar features with any hosting provider. Sanity and Vercel hope that other vendors will implement the Content Source Maps specification, which could become a sort of standard for exposing metadata about the CMS to the front-end solution.
Unfortunately, standards tend to support only the lowest common denominators between platforms, preventing products from achieving truly differentiating value. Additionally, standards from a single vendor face adoption challenges. Many vendors prefer to implement their own solutions for reasons such as expediency, control, vendor lock-in, and to implement features not supported by the standard. Additionally, some aspects of the solution are also tightly bound to Vercel. For example, developers can use the data-vercel-edit-target attribute to control which HTML element activates the source link. It is not clear whether other CMS vendors will join in the Content Source Maps effort.
Until the industry adopts a standard, only Sanity supports Vercel Visual Editing, which requires customers to implement proprietary solutions that are specific to both Vercel and Sanity. This tightens coupling between the front-end and the CMS back-end, which headless CMS intends to avoid.
The Inspector Mode of Contentful Live Preview allows source links in the site preview environment. Live Preview requires the use of a specific Contentful JavaScript SDK as well as coding to identify the record and field that contains the rendered value. In addition to being rather intrusive on development processes and code, this approach tightens the coupling between the front-end and the CMS, increasing vendor lock-in with front-end solutions that can work only with Contentful, requiring significant refactoring to migrate the solution to an alternate CMS and complicating the development of libraries and tooling that work with multiple CMS products.
Unlike Contentful and Sanity, Perfection source links work with any front-end development technology, use HTML attributes rather than JavaScript coding, and can expose data in any systems, not just the CMS. Through the Perfection admin panel, you define providers for the various systems that deliver data to your website. Then, in the code that developers write using whatever technology is most appropriate for the project, developers simply add HTML data attributes to identify the source systems and records for the various data elements on the page. Perfection automatically does the rest, exposing source links in the preview environment and additionally allowing CMS users to manipulate page and component layout and presentation.
For many websites, not all data on every page comes from a single source. For example, a single page may include data from more than one CMS, or more commonly, from both a CMS and a commerce system. Solutions from CMS vendors do not support source links to systems other than the CMS. Perfection's approach allows source links to multiple systems in the composable stack rather than only to records in the CMS. CMS users don't need to navigate user interfaces from multiple vendors or even know the source system for the data that they need to manage; they simply browse the site and click source links to edit data in any of those systems.
With Perfection: