Headless CMS with Visual Authoring: How CrafterCMS Revolutionizes Digital Content Creation

Catering to today’s consumers’ content demands is challenging without the right tools. To remove the technical barriers to creating dynamic and engaging content experiences, several headless CMS vendors have recently introduced visual editing interfaces to appeal to customers. 

At CrafterCMS, we’ve long known that visual editing can provide content authors and publishers with the flexibility they need to work efficiently. In this blog, we’ll explore the evolution of the visual editing landscape and explain what content teams should look for in a visual editing environment and what they can get with CrafterCMS.

The Evolution of the Visual Content Authoring Landscape

The graphical user interface (GUI) was first introduced to the mass market by Apple in 1983 with the Lisa computer, the first iteration of visual editing software. This type of editing capability is critical for knowledge workers who need to work in interfaces that are natural and directly related to their tasks, work products, and other related artifacts. 

Abstraction and translation kill efficiency, and an embedded visual editing solution can help companies avoid these challenges. 

By the year 2000, graphical user interfaces had improved considerably, including sophisticated desktop tools for editing and publishing on traditional media. However, it was around this time that computers underwent a major usability reset. 

Web Era: Pre-2000

The early web era was characterized by being heavily read-oriented, including information and early e-commerce, simple HTML and JavaScript, basic forms, and publishing to a single channel. Content was very much web page and browser centric. However, as tools improved, the web evolved.

Web Era: 2000 - 2020

Over the following 20 years, browsers improved, and with them, the CMS platforms improved greatly. By 2010, visual editing was back in place, and by 2019, it was very mature. Visual editing for web pages on traditional websites included page-based editing with pure WYSIWYG experiences that included point-and-click style editing and drag-and-drop-based composition that was on par with traditional publishing and desktop applications.

This era was characterized as being heavily read-write oriented, with mature e-commerce and social media, mature web application frameworks, and multi-channel options. Smart devices’ growing relevance and extensibility, and later, growth in IoT, fueled the birth and then the formative years of the web. Around 2015, we saw the entrance of headless CMS, and by 2020, an architecture movement rightly pushed API-first approaches. 

Web Era: 2020 and Beyond

Since then, many new headless CMS platforms have entered the market as companies and organizations struggle to meet the demands of a mature environment with legacy modeling and page-centric platforms.

Content as a service may have been just a feature. Still, most legacy vendors did not have it, and this opened the door for new competition to enter the market, capitalizing on the need for API first and a growing demand for a shift towards SaaS solutions and subscription-based software. 

At this moment, we saw the next major authoring experience reset, which focused on making visual editing simple and natural for the user. Many headless CMS platforms initially offered only abstract form-based authoring and had no instant preview for content authors, which was a major loss in terms of efficiency and ease of use for content authors. 

However, those headless CMSs that provide a mature visual editing interface, such as 

CrafterCMS, will offer certain characteristics: 

• Visual editing with immediate feedback: This includes support for any technology or framework and any channel and the capacity to handle modern design and effects instead of a form that is abstract from the content.  
• Drag and drop layout and construction: This gives authors greater control over what they can see on the interface. 
• Support for non-visual properties: This includes support for metadata, SEO, and behavioral content properties.
• Support for modern workflows: Visual editing must align with the way content teams work today and the workflows they use.
• Support for content authors with artificial intelligence and other modern tools.

The Future of Visual Content Authoring and Headless CMS

Visual editing provides several advantages to enterprise teams but it relies on some content management fundamentals to make it possible. 

• Information Architecture (IA): Information architecture in a CMS refers to the strategic organization and structuring of website content to ensure easy navigation and accessibility for users. It involves creating a clear content hierarchy, intuitive navigation design, effective content modeling with defined types and metadata, and well-designed user flows to guide visitors through the site. IA also includes version control and governance to maintain consistency and quality, ultimately enhancing the overall user experience and supporting the website's goals.
• Content Modeling: Content models define the structure and organization of all content items that will be created, managed, and published for a particular project within the headless CMS, including all components, pages and the like that comprise the end-user websites, e-commerce experiences, intranets, customer portals, and such. 
• Spectrum of Structure & Control: This includes strictly defined structures such as resources, contacts/authors, products, and reviews; assembled structures including home pages, section pages, blog posts/articles, FAQs, and menus; and free-form structures including landing pages, product marketing pages and screens, bespoke pages and screens, and emails. 

A headless CMS must enable authors to span the entire spectrum of structure and control because different use cases call for a different level of control.

The web is continuing to evolve, and while some content management tools are just now reaching a reasonable level of maturity, with most of these systems still in the early stages of that cycle, the web is advancing towards a new era. This new era of the web is characterized by being read-write-execute-own oriented, composable, and inclusive of semantic metadata.

Visual editing in the Web 2020+ era will require a different approach. Headless CMSs ready for this era will provide the following: 

• Visual editing at parity or better than current iterations
• AI-powered layout and design: This includes creating and converting full artifact content, personalizing it, localizing it, and translating it.
• Information architecture and content models with a high degree of standardization, meaning, and metadata built into them to fully support initiatives like AI-backed content creation, publishing, and targeting, as well as other initiatives like composability and ownership.
• Advanced content modeling with semantics

Visual Content Authoring in CrafterCMS

CrafterCMS is an enterprise-grade headless CMS that offers precisely what content authors expect from a visual editing CMS and more. 

Best-in-Class Authoring Experience

CrafterCMS redefines user-friendliness in the headless CMS space by offering a robust WYSIWYG authoring experience, intuitive drag-and-drop tools for building experiences, and in-context previews across multiple digital channels. Crafter Studio, the heart of this authoring experience, delivers all the tools content teams need today. Its extensibility empowers enterprises to customize the platform to fit their exact requirements, complete with advanced features.

Multiple Use Cases

Use Case Example 1 - Websites: Content authors can use drag-and-drop tools to select images, videos, and other content artifacts from their desktop or other locations and drop them onto a website. With content previews, there is no abstraction, and content authors can be more productive. 

Figure 1. Visual authoring of a website on the headless CrafterCMS

Use Case Example 2 - Alexa IOT Device: CrafterCMS supports pure headless use cases such as Alexa Skills, which doesn’t follow a page-based format. Instead, content authors can use the Alexa emulator in the preview area or the fact browser to browse and edit facts. In this use case, a forms-based authoring experience is most appropriate.

Figure 2. Forms-based authoring of Alexa Skills on the headless CrafterCMS

And Many More Use Cases: CrafterCMS is just as flexible if content authors want to create content for mobile apps, AR/VR devices, e-commerce stores, OTT video experiences on the web or smart TVs, intranets and extranets, customer portals, digital signage or any other use case. 

Clean Separation of Concerns

CrafterCMS clearly separates concerns between content, code, and presentation. Content is stored as XML and versioned via Git and can be consumed by in-process REST APIs as JSON. Code includes server-side and client-side support for any language and any framework on the client side. Presentation is accomplished using server-side and client-side rendering using any language and framework on the client side.

Headless APIs

CrafterCMS supports multiple API formats, including Rest and GraphQL, and allows custom APIs to be created using Groovy. And as an enterprise decoupled system, CrafterCMS provides API-first platforms for both its content authoring platform (for CMS users) and its separate content delivery system (for end user experiences). For the content authoring teams, this means easy customization of the CMS authoring experience for the full variety of different users and roles. CrafterCMS includes a React-based user interface application (Crafter Studio) that provides all the basic forms-based as well as visual-based content authoring capabilities. But it also serves as an extensible platform to tailor the CMS experience to ensure the most user-friendly and productive workflows for the content team(s).

Learn More

While other headless CMSs may just be showing up to the visual editing party, CrafterCMS has the maturity and flexibility to continue delivering what enterprises need in the modern web era. Learn more about visual content authoring with CrafterCMS in this recorded webinar: Enhancing Digital Content Creation with CrafterCMS’s Visual Authoring Experience.