Blogs

Visual Editing in a Headless CMS: How It Works

Victoria Burt

The primary purpose of a content management system is to help brands create, edit and manage digital experiences across the marketing channels. In the early days of the internet, this was just the website. However, customer-facing media and the CMSs that manage content for them have evolved dramatically over the years. 

From custom-built CMSs, we’ve transitioned to traditional CMS platforms for blogging and headless CMSs that deliver content to mobile apps, VR headsets, smart watches, and many other customer touchpoints. Yet, while the ability to provide content to these channels is critical, marketers still need to be able to edit that content just as they did when they only had to concern themselves with a website. Unfortunately, pure headless CMS solutions are notoriously difficult for marketers to grasp and use effectively.  

So how can marketers create dynamic and engaging experiences for all of these exciting customer channels? With visual editing. 

In this article, we’ll explain how the content editing experience has evolved over the years and introduce some of the features of dotCMS that help marketers get more out of their experience. 

Traditional Content Editors: The WYSIWYG CMS

Traditional CMS platforms like WordPress often come with a visual editor known as a WYSIWYG editor. An acronym for (What You See Is What You Get), these traditional content editing interfaces offer the simplest form of visual editing. With a WYSIWYG CMS, content authors know that the content they see in their editor will look exactly the same once published. 

Marketers can quickly and easily create new articles and add images, videos, and other content assets without worrying about the underlying code. However, while a traditional or WYSIWYG CMS might offer a simplified content editing process, it also has some limitations. 

The most common use for a traditional CMS is creating and managing content for a website and, in some cases, a mobile app. The problem is that a website is only one of the channels where businesses need to publish content today. Unfortunately, a traditional CMS isn’t capable of delivering content to digital kiosks, smartwatches, and other emerging channels where potential customers are consuming content. 

Also, while marketers can benefit from the easy editing interface, developers don’t have many options to improve the frontend experience. This means they can’t leverage the newest JavaScript frameworks and tools and are often restricted by a templated design. 

Content Management With a Pure Headless CMS

Since traditional CMSs weren’t the answer when it came to omnichannel content delivery or a good developer experience, many companies opted for a headless CMS. 

The frontend presentation layer and the backend content management layer are tightly integrated with a traditional CMS. That’s why it’s perfect for content editing but lacks the ability to publish content on multiple channels or give developers more flexibility. 

On the other hand, a headless CMS decouples the frontend layer from the backend data repository. The backend layer can still be used for content management and storage, but now, without the frontend, developers are able to connect to any frontend interface they choose and also the freedom to use the frameworks and tools that suit them. 

Content Editing With a Hybrid Headless CMS

So, if a pure headless CMS isn’t the answer for marketers, but a traditional CMS restricts developers, then what’s the answer? A hybrid headless CMS.

Hybrid headless CMS platforms essentially provide you with a headless CMS and visual editing and no-code page layouts in one. Developers can leverage the freedom to create engaging experiences on frontend channels of all types, from websites and mobile apps to smartwatches, car interfaces, and much more. Meanwhile, marketers get the traditional content editing interface that they enjoyed before and execute their agenda independently from technology teams and driving enterprise agility

Here are some of the other benefits of content editing with a hybrid headless CMS:

Omnichannel Publishing

Businesses don’t need to restrict themselves to only publishing to a website. Instead, a hybrid headless enables omnichannel content publishing to any channel within the customer journey. Like a headless CMS, a hybrid headless CMS uses APIs to connect the frontend to the backend. These APIs make publishing content possible and allow companies to reach their customers wherever they are.

Marketer-friendly Content Management

A hybrid headless CMS offers the marketer-friendly content management interface of a traditional CMS. Instead of relying on developers for frontend design and page payouts like they might need to when working with a pure headless CMS, marketers can drag and drop content into place and preview how it looks before publishing. 

Developer Freedom

Developers have the freedom to create frontend experiences on any channel, meaning that they can opt for popular frameworks like React or Vue if they want. Plus, without needing to assist marketers with even the simplest tasks, they can focus on other activities. 

Faster Time to Market

With developers and marketers freed from roadblocks and delays, companies can enjoy a faster time to market. They can launch marketing campaigns quickly, test ideas at speed, and receive customer feedback faster to create the best overall experience. 

dotCMS: The Ultimate Visual Editing Experience

Visual editing is crucial to delivering the best customer experience in today’s multichannel environment. Customers are bombarded with options at every stage of their journey, and marketers (and developers) need to know that they are providing the quality content customers truly need. 

dotCMS’ hybrid CMS gives businesses the freedom and flexibility of a headless CMS and adds the visual content management capabilities of a traditional CMS. Our hybrid headless platform includes NoCode tooling, which provides the inline editing, layout design, and drag-and-drop editing marketers need. 

Our latest additions, a drag and drop content palette and block content editor, do even more to enhance the visual editing experience.

Enhanced Page Building

dotCMS’ content pallet with drag-and-drop provides marketers with a host of content types that can be effortlessly dropped onto the page. Content authors can create sleek pages more efficiently with layout editing using our hybrid headless CMS. 

Block Content Editor 

The block content editor is perfect for cutting and pasting since the content is divided into blocks. Marketers can drop images, videos, and just about any content assets between other blocks to add more vibrancy to content pieces. They can also embed content within content, for example, embedding eCommerce products into a blog to give customers a personalized experience. 

dotCMS’ visual editor is also handy when working with single-page applications (SPAs). With their fast speed, many brands use SPAs to provide a personalized experience for their visitors. 

With dotCMS, you can create templates for an SPA without JavaScript. Marketers get more control over the look and feel of their SPA design and can easily edit as needed. That’s exactly what the LeBron James Foundation found out when they needed to upgrade their website in three weeks. Assisted by dotCMS partner Ethode, they now have a lightning-fast web app built using dotCMS’ visual editor. 

Learn more about the LeBron James Foundation and some of the other dotCMS features they leverage in our case study. 

Image Credit: Kelly Sikkema
Victoria Burt
Director of Product Marketing
October 25, 2022

Recommended Reading

Mastering the New Universal Visual Editor in dotCMS: A Technical Deep Dive for Developers

Explore dotCMS's Universal Visual Editor, merging WYSIWYG simplicity with headless CMS flexibility. This tool offers drag-and-drop editing, inline content editing, and NoCode tooling for seamless omni...

Benefits of a Multi-Tenant CMS and Why Global Brands Need to Consolidate

Maintaining or achieving a global presence requires effective use of resources, time and money. Single-tenant CMS solutions were once the go-to choices for enterprises to reach out to different market...

Headless CMS vs Hybrid CMS: How dotCMS Goes Beyond Headless

What’s the difference between a headless CMS and a hybrid CMS, and which one is best suited for an enterprise?