Watch our biggest AI launch event

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Contact Sales

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

headless cms

How Builder accelerates and unlocks headless content management

June 2, 2022

Written By Brent Locks

To stay competitive, companies need to move fast in order to give their customers the best digital experiences. From design trends changing, to products getting updated or better images becoming available for your site, there are many situations where business users need to update sites fast. 

The problem is that whenever business teams need to make edits, they need to wait for the development team, and even the most efficient development teams can’t keep up with all of the frequent changes business teams need to make. It creates a bottleneck, and while the updates are important, developers would rather focus on bigger projects. 


Headless CMS

A headless architecture can simplify and accelerate the way content is shared across multiple platforms. But not all headless CMS solutions are the same. Most headless solutions require a developer to write code to make even the smallest of changes, like adding a button to a website’s hero section. This is true for proprietary content management systems and many of the headless CMS solutions on the market. 


Visual CMS to the rescue 

Builder is different: we offer a new way for non-developers to build better end-to-end digital experiences, without the need for coding. Our unique, no-code visual development capabilities adds drag-and-drop functionality to any website or app to speed up and simplify the publishing process. 

This is a big deal for most companies who don’t have the developer bandwidth to handle a lot of changes from the product, marketing, and design teams. 

Take Everlane as an example. They launch two to three new products a week and engage customers with a hyper-personalized experience. With Builder, they can make over 100-page variations in a single month and launch new products four times faster.


Getting Started

Whether you’ve deployed a headless CMS or are considering it, you can still tap into our environment and take advantage of our visual editing capabilities. In this blog post, we’ll talk about three ways to use Builder: 

  1. As your headless CMS of record
  2. Alongside your existing headless CMS
  3. To augment your existing headless CMS

Now, a typical headless CMS is designed to manage structured data, such as blog posts, products, recipes, help desk articles, and more. It supports a data schema that represents the various possible configurable fields within a content model. The data from that content model is then passed to your website and rendered as content within predefined components and templates built and maintained by developers. 

Builder’s no-code visual editor supports structured content and data models but also allows you to create bespoke experiences, whether using code components, symbols, templates, or from scratch. This enables non-developer teams to build, edit, and optimize content in minutes rather than weeks.

Here are a few examples.

Example 1: Creating a hero

Let’s say you want to create a hero section on your home page. Your hero has four elements: a background image, a title, a call to action text, and the call to action link. 

With a typical headless CMS, you’ll need to: 

  1. Have your developer create a content model called “hero” within the headless CMS platform containing the right elements
  2. Have your developer build out a hero component in your site’s code to receive those elements from your headless CMS via API
  3. Have your content editor publish the relevant copy and link using the headless CMS editor 

At most companies, developers are bound to sprints, code review, and deployment cycles. Which means creating a simple hero could take anywhere from a week to a couple months. 

With Builder, any team member can create a new hero, without developer support. Here’s how that would work:

  1. Drag-and-drop an image block and upload a background image
  2. Drag in a text block and add your title text
  3. Drag in a button block and change the CTA text and CTA link
  4. Style everything to your liking
  5. Publish it

You’ve just created a hero in less than 5 minutes. You can even save it as a template or symbol for future reusability and save more time.


Example 2: Changing a hero

So, what happens if you want to add another button or subtitle to your hero component? 

With a typical headless CMS, you’ll need to:

  1. Get this prioritized on a developer’s backlog
  2. Have a developer add a new field to the “hero” content model in your headless CMS for the new subtitle
  3. Have a developer change the hero component within your website’s code to accept the new subtitle field 
  4. Wait for the change to go through code review and a development release cycle 
  5. Have your content editor add the text for the subtitle and publish using your headless CMS’s editor

While design systems, peer review, and quality control are important—and we’ve baked several features into Builder to support these—small projects shouldn’t require this level of support. Hard-coding your page layout also burdens developers and slows you down when it comes to future changes.

With Builder, adding a subtitle to a hero would literally take a minute—and you wouldn’t need to involve a developer. You’d only need to:

  1. Drag-and-drop in a text block in the relevant area of your hero component
  2. Add your subtitle text and style it
  3. Publish it


Saying no to hard code

These are just a few examples of how time-consuming a small change can be, but the same process applies to layout changes on bigger pages. For example, what happens if you have a more complex change, like turning that hero component into a carousel to support featured stories, promotions, and so on? You get the drift. 

The bottom line is that, without a visual CMS, like Builder, a headless CMS requires you to hard code 100% of your pages and experiences. When building the schema for content models, developers have to try and factor in all the options content editors might need to create the intended digital experiences. 

This can get complicated and often results in nested, complex forms that content editors must fill out. Dealing with schemas doesn’t often come naturally to non-developers, and requires training to think and work differently. Plus, any updates to the schema and content model requires the developer to make changes to their code. 

There’s no way around it: building new experiences using a typical headless CMS tends to depend on developer involvement and takes a long time. 


Move faster, remove bottlenecks

Builder’s Visual CMS platform largely eliminates this developer dependency. Content editors and other non-developers can drag-and-drop visual elements to make experiences, and changes can be published immediately or scheduled with one click. 

Developers can still establish guardrails. They can register their code components as drag-and-drop blocks within Builder’s visual editor. Once roles and permissions are established at the content and user level, every piece of content created by anyone in the organization follows the right design and content guidelines. 

Optimize experiences to drive growth

Another key benefit of Builder is our built-in optimization layer. Our out-of-the-box growth and optimization capabilities allow you to:

  • Track content and engagement analytics (and send events and tracking to your own analytics provider or data warehouse)
  • View heat maps highlighting how visitors engage with your experiences
  • Run high-speed A/B or multivariate tests
  • Segment and personalize content based on any targeting attributes and data (such as logged in vs. logged out, new vs. returning, previous purchases, and more)

Importantly, Builder’s platform is tech stack agnostic. The optimization layer is modular, so you can also plug and play with any solutions you already use. A typical headless CMS, however, does not come with built-in optimization capabilities, so you’ll need to integrate with other solutions to optimize your content.  


Integrating visual building with your CMS

Builder is extremely flexible. We made sure our solution was designed to work well with others or stand on its own. Here are three possible scenarios for deploying Builder:


1. Using Builder for content management across your organization

A lot of companies use Builder as their de facto headless CMS. We built our solution with flexibility and scalability in mind, so we’re designed to support large environments and have developed integrations with the largest players in the field. Like Everlane, many of our customers have incredible success stories, which are great examples of what’s possible when you give people the tools to move as fast as they can create.

Builder empowers your teams across marketing, digital product, design, growth, and eCommerce to build and optimize experiences quickly while freeing up developers from having to handle hundreds of small requests. And, when you only want to pass structured data, you can do that easily using Builder’s data models.


2. Using Builder alongside your headless CMS for new use cases

If you have an existing headless CMS you’re happy with, Builder works perfectly alongside it. Organizations with complex content operations that serve a large, varied digital ecosystem often augment their existing headless CMS architecture with Builder. 

In all likelihood, your headless CMS is used to manage content on heavily-templated pages, where the basic layouts and structures don’t change often. But, structured content is rigid and can make it difficult to quickly test layouts, run experiments, launch new landing pages, or apply personalization. 

Put directly, if the limited nature of your structured content is blocking your creative teams, if your CMS is slowing down the pace of your business, or if you’re not able to provide the digital experiences you want to deliver, Builder could be the solution.

It can eliminate the bottlenecks and reduce your reliance on developers to create, change or update templates and components.

Vistaprint is a great example of a company using Builder alongside their existing headless CMS, Contentful. Their developers could not generate landing pages fast enough to meet the varied needs of their marketing teams across over a dozen locales, so they added Builder as their page builder solution.


3. Use Builder with your headless CMS

Being a flexible platform, Builder can beautifully complement another headless CMS with visual building and editing abilities. Since Builder can consume any API as a data source through universal connectors, you can seamlessly pass the structured data residing in your headless CMS to Builder. And that data can be bound to UI elements in Builder’s no-code visual editor, allowing you to drag-and-drop components to create and edit rich, dynamic experiences. 

You can keep your existing workflows as you plug content into your headless CMS, and add Builder’s visual editing capabilities to the mix. For example, if you manage blog posts in your CMS, you can use Builder to build out the page layout, and plug content from your headless CMS as dynamic data. 

If you want to test out new layouts or other experiments, like displaying blog post snippets in a carousel, you can use Builder’s visual editor and bind data from your headless CMS (e.g: blog title, description, or image) to the content carousel. The possibilities are endless. 

Here’s the big takeaway: when you think about your digital experiences, it’s not about what your CMS offers, it’s about what your teams need to move your business forward. If your current headless CMS isn’t serving all aspects of your business, there are options out there for you.

Contact us to talk about how you can empower your teams with drag-and-drop visual solutions.

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
AI5 MIN
Introducing Visual Copilot 2.0: Design to Interactive
October 31, 2024
Design Systems8 MIN
Design Systems Explained
October 18, 2024
Visual Editing7 MIN
Visual editing is bridging the gap between developers and designers
October 11, 2024