Visual Editing with a Headless CMS

Many of the simpler headless CMSs are perfect for developers, offering the freedom to build the frontend with any JavaScript framework. Unfortunately, marketers and other content authors suffer from the lack of user-friendliness, such as real-time previews and in-context editing, and need to use a forms-based interface to perform edits and updates to the website.

With visual editing marketers can overcome these challenges which in turn allows developers to regain their productivity. Let’s explore visual editing with a headless CMS and showcase the visual editing features of CrafterCMS. 

What Is Visual Editing?

Visual editing refers to creating and modifying content using a "what you see is what you get" (WYSIWYG) interface that allows edits to be made in a live preview environment and see changes in real time. This live preview of content allows content authors to see changes happening as they edit, providing an intuitive and highly productive content creation process. Visual editing capabilities can also extend to drag and drop page layout building as well.

Traditional CMSs like Drupal and Adobe AEM, and no-code website builders like Squarespace and Wix, have had visual editing features for some time, but many headless CMSs haven’t offered those features before. Instead, they’ve provided simple form fields for editing, which didn’t offer previews and felt archaic for content authors accustomed to no-code options. 

A headless CMS that offers visual editing will have certain key characteristics, including WYSIWYG editing, drag-and-drop experience building, component-based creation and editing, content targeting for personalization, in-context editing, and live previews of content experiences across all digital channels - web, mobile devices, smart TVs, digital kiosks, AR/VR, and any other experience that content authors need to reach.

Why Visual Editing Should Matter to Developers Too

While visual editing is immediately beneficial to content authors, there are good reasons why developers should care about whether or not a headless CMS offers these capabilities. 

• Reduced Dependency: Visual editing tools make it easier for content authors to work independently, freeing developers to focus on more complex tasks and reducing bottlenecks. 
• Controlled Flexibility: Authors can design their own layouts and can configure it as they see fit. For example, CrafterCMS allows developers to decide how that structure is enforced, being more restrictive in certain content types like corporate blogs and flexible in others like landing pages. 
• Reusability: Components are reusable and can be combined to create different experiences. 
• Time to Market: Streamlined content creation processes enable faster publishing cycles. This aligns with agile development practices and reduces time-to-market for new content.
• Improved User Experience: A user-friendly editing experience for content authors translates to higher-quality content and a better end-user experience. Continuous publishing, A/B testing, and optimization is now truly feasible.

Enabling Visual Editing in CrafterCMS

CrafterCMS is an enterprise-grade headless CMS that offers all of the visual editing features content authors need to create dynamic content experiences. For developers, this means streamlined workflows and reduced support demands. 

Experience Builder

CrafterCMS’s Experience Builder (XB) adds a WYSIWYG user interface layer to your site/app CMS authoring experience, allowing authors to perform in-context editing and drag/drop building for all fields defined within the content types of pages and components. To enable XB, CrafterCMS developers just need to integrate their site/app frontend application with it by specifying which model field corresponds to each element in the view.

The specific integration strategy with Experience Builder  varies based on the type of website or application you are developing. However, generally, you only need to mark the content elements that display CrafterCMS content and initialize XB. Currently with version 4.1, CrafterCMS offers native XB integration for FreeMarker and React applications. Other types of applications, such as Angular and Vue, can be integrated with XB using the underlying libraries that support FreeMarker and React applications.

Detail Pages

Within Experience Builder, content authors can leverage the Detail Page pattern for creating and editing website pages. These pages are used by organizations with large quantities of objects of the same type they want to manage and present through a single look and feel, such as a product page. 

For example, an e-commerce company, or a media  and entertainment enterprise, can use detail pages to easily edit thousands of product pages. In CrafterCMS, those detail pages can be created visually.

Learn More: Detail Pages and Crafter Studio Experience Builder

Authoring Efficiency

CrafterCMS’s visual capabilities can also be seen by leveraging the live preview of the end-user experience available to authors. One popular example is in the use of site search. Utilizing site search of the end-user site/app (CrafterCMS bundles in OpenSearch to make this easy) enables content editors to find content assets throughout the site as an end user would (this of course is in addition to the CMS search and the CMS content navigation options that are standard in the authoring interface). Any item returned from the site search results can then be edited easily. Authors can easily find an asset in the search results and make edits without having to find the content in the system. 

Learn More

Visual editing in a headless CMS is now a reality. Visit our documentation to learn how to properly set up and leverage visual editing in CrafterCMS for React, Next.js, Angular, Vue applications, HTML sites, OTT video experiences, and more -- all using Experience Builder.