As a developer, you know how critical it is to have tools that balance flexibility, scalability, and ease of use—especially when implementing a complex, enterprise-grade website. When Blue Cross Blue Shield Association (BCBSA) set out to rebuild bcbsa.com, they needed a universal CMS that could support their goals of delivering a modern, performant, and highly adaptable web experience.
With dotCMS, BCBSA embraced a headless architecture that empowered their development team to work with modern frameworks like Next.js while providing content editors with an intuitive experience through our Universal Visual Editor (UVE). The result? A streamlined workflow, faster deployments, and a scalable platform that simplifies ongoing updates and enhancements—all without sacrificing flexibility or control.
Why a Universal CMS and why a headless architecture?
It’s no secret that we developers love the idea of a headless implementation, but successful websites are developed out of a true need for the benefits they uniquely provide. BCBSA came to dotCMS with a few mandates from their development and marketing organizations that made this case very clear. To be successful, they needed both a headless architecture and a Universal CMS editorial experience. At top of mind for them was:
A future-ready and technology-agnostic approach
While presently they were implementing Next.js with React, BCBSA wanted the flexibility to migrate to other frameworks easily.
Effective scalability for their intended user base
Performance was absolutely critical to BCBSA to effectively service their customers.
Provide in context and in page editorial previews and experiences
BCBSA didn’t want to have their editors navigate to some other site or line up screens for previews to their content changes. Headless or not, they needed to be viewing directly from the CMS all edits being made.
How to Marry “Headless” with “Editorial Experience”
If we are truly honest with ourselves, headless implementations were not originally designed to support those updating content. They were created so developers could write code and digital experiences on their own terms! BCBSA didn’t have an option to leave the editor behind though, so a marriage between their react front end and dotCMS’ native editorial experience was essential.
One of the standout features that BCBSA leveraged was the dotCMS Universal Visual Editor (UVE). For BCBSA, UVE enabled their marketing team to preview and edit content directly on their live React application—without switching tools or needing technical assistance. This ensured that content creators could fully embrace the benefits of headless architecture without being left behind by technical priorities. Marketers could make real-time updates while maintaining complete control over how content appears to their audience. In short, UVE empowered BCBSA to strike the perfect balance between headless flexibility and marketer usability.
To do this, they used what most of our customers leverage as a jumping off point: our Next.js example project and JavaScript SDK.
If you’re looking to try and set up an example Next.js project with dotCMS, check out this blog post for an easy quick start guide (it also includes information on our Universal Visual Editor implementation!)
After getting UVE and their app up and running, the next step was figuring out the best way to deliver data to it. A big part of this was creating a solid content model. This model became the foundation for delivering structured data to their React application, making sure the front end stayed consistent and ran smoothly. At the same time, it gave the marketing team a flexible setup to easily create, manage, and update content every day. In dotCMS, this means utilizing “content types” that provide flexible schemas for building up pages. For easy reference, I pulled an example of our “blog” content type from the dotCMS demo site.
I always encourage folks to play around with our demo site. Make a mess of it and learn from our examples! To access, go to demo.dotcms.com/dotAdmin and login with username admin@dotcms.com and password admin
dotCMS offers many APIs (definitely check out our API playground feature for a deeper look) that can be used to query content for your front end application, but for BCBS we recommended they use GraphQL.
With dotCMS’s built-in GraphQL support, developers can easily query content and deliver structured data. By leveraging GraphQL, you can specify exactly the fields you need from a content type, ensuring efficiency and reducing unnecessary data transfer. For example, using the Blog content type shown above, you can fetch details like the title, publish date, teaser, image, and author. Here’s a sample GraphQL query:
query {
BlogContent(
filter: {
condition: {
field: "contentType",
value: "Blog"
}
},
limit: 5
) {
content {
title
publishDate
teaser
image
author
}
}
}This query retrieves up to 5 blog entries, returning only the specified fields. You can send this query to the dotCMS GraphQL endpoint (e.g., /api/v1/graphql) and integrate the response into your app to dynamically populate blog components. By combining the flexibility of dotCMS with the efficiency of GraphQL, BCBSA’s team ensured fast, consistent content delivery while keeping their front-end code clean and optimized.
Key Takeaways
The BCBS developers' implementation of a headless architecture with dotCMS highlights the importance of balance, flexibility, and scalability in web development today. dotCMS empowered the team to work seamlessly with modern frameworks like Next.js while maintaining a future-proof and technology-agnostic approach. The integration of the Universal Visual Editor bridged the gap between technical implementation and marketing needs, enabling the marketing team to manage updates independently without disrupting the developers' workflows. By leveraging GraphQL for precise and efficient data delivery, the developers ensured clean, optimized front-end code and a smooth user experience.
Maybe the most critical thing to highlight though, is that BCBS realized web development nowadays is more than ever a team sport. Anything worth building needs to work for all stakeholders, and when a Universal CMS discipline, that can still be achieved with headless.
Further Reading
I spoke a lot about the idea of “Universal” CMS. To learn more beyond what was shared and linked about, check out some great content from last year’s Universal CMS Summit.