This post will be discussing a cutting-edge concept known as a Headless Visual CMS, or Headless Visual Content Management System. This is not your ordinary CMS; we are not referring to platforms like WordPress, Joomla, Drupal, Sanity.io, Contentful, or anything like that. Instead, we're talking about a fusion of the best headless CMS features and the simplicity of site builders like Wix or Squarespace.

Let's dive deeper into this topic.

Get a load of this:

This is probably a bit different than what you’re used to seeing in other CMSs — those blocks that are being dragged into the page are React components that come from your code base!

The integration code is simple and goes right within your existing site or app. It looks like this:

import { BuilderComponent, builder, registerComponent } from '@builder.io/react';

export async function getStaticProps({ params }) {
  // Fetch the builder content as JSON
  const page = await builder.get('page', { url: '/' + params.page.join('/') });
  return { props: { page } };
}
export default function Page({ page }) {
  // Render the content dynamically
  return <BuilderComponent model="page" content={page} />;
}

// Register your components for use in the visual editor
registerComponent(MyHero)
registerComponent(MyProductsComponent)

Sound interesting? Let's get into it.

Headless CMS: all muscles, few smiles

Let's talk about what’s a headless CMS for a moment.

As devs, you might think of the term “headless” and your first association might be “headless components”, which are probably registered in your brain as components that only have an API and no UI. What I mean are projects/libraries like Headless UI, RadixUI, Downshift, TanStack Table, or a slew of others I might be forgetting.

A “Headless CMS”, on the other hand, is a special breed of a content management system that focuses solely on backend functionalities.

Sounds a bit spooky? Don't worry.

It just means the content is made accessible through either a GraphQL or REST API and can be displayed on pretty much any device you can think of. The magic here is that the headless CMS separates the backend (where you create and store content) from the frontend (where design and deployment happen), leaving the frontend presentation out of its scope.

Now, this separation might sound like an extra complication, but it's a massive perk. Why? Because it gives you a whole lot more wiggle room in how and where and how your content is displayed.

As long as a device or platform can connect to the API, it can access and consume your content.

Headless CMSs are like the Superman of content management for developers. They're tech-agnostic, performance-focused, and scale like a charm. Plus, they come with plugins and extensions for the customization that big businesses crave, along with roles and permissions for team workflow control.

But, let's face it, they aren't exactly user-friendly. They require developers to bend their components to fit into the CMS. Also, they are mostly endless glorified input forms — need an extra piece of data? Here’s a new input field, good luck mapping it and connecting it to your UI.

And if the marketing team wants something new? Well, it's back to the dev backlog. Over time, this can lead to a whole bunch of developer dependencies, limited structured data, and some pretty serious business impacts.

Site builders: pretty faces, less grit

Then you've got site builders — the user-friendly models like Webflow, Squarespace, and Wix. They're all about visual appeal, making building a site as easy as dragging, dropping, and publishing.

But as your site becomes more complex, these models start to stumble. Your site's speed and performance can take deteriorate, and you're chained to the platform's capabilities. Want to use the latest front-ends or back-end services? Only if the platform supports it.

The best of both worlds: visual CMS

So here's a thought — why not take the best parts from both these worlds? A platform where building is as intuitive as a site builder but provides the API-based, component-driven, high-performance content management that developers love about headless CMS. Enter the Visual CMS.

It's all about visual development with elements like text, images, video, and more, wrapped up in a Figma-style editor. The best part? Developers get clean code and business teams control structures on these pages — everyone wins!

Unique perks of Builder.io’s visual headless CMS

Besides the best features of headless CMSs and site builders, Builder’s Visual CMS brings unique capabilities to the table.

Unlike other visual editors, Builder’s visual CMS allows developers to have as much control as they want over the components your marketing/design team can use inside the editor.

Content doesn’t have to live inside code because Builder’s visual CMS connects to your frontend tech stack.

The gist of it is you just use a component from the Builder SDK in your code base, no matter if you’re using Vue, Svelte, React, Angular, Solid, or Qwik, and then it appears in the editor UI.

Say you’re using Next.js with Tailwind for your app (or site), you can write some generic card component, like this:

// src/components/card.tsx

export const Card = ({ text, title }: { text: string, title: string }) => {
  return (
    <div className="relative rounded-xl overflow-auto p-8">
      <a
        href="#"
        className="group block max-w-xs mx-auto rounded-lg p-4 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"
      >
        <div className="flex items-center space-x-3">
          <svg>{/* ... */}</svg>
          <h3 className="text-sm text-slate-900 font-semibold group-hover:text-white">
            {title}  
          </h3>
        </div>
        <p className="text-sm text-slate-500 group-hover:text-white">
          {text}
        </p>
      </a>
    </div>
  );
};

And then you can register the component to the Builder editor:

// [...page].tsx

// Register this component for use in the Visual Editor
Builder.registerComponent(Card,{
  name: 'Card',
  inputs: [
    // 'name' is the name of your prop
    { name: 'text', type: 'text' },
    { name: 'title', type: 'text' },
  ],
)

// Fetch the builder content as JSON
export async function getStaticProps({ params }) {
  const page = await builder.get('page', { url: '/' + params.page.join('/') });
  return { props: { page } };
}

// Render the content dynamically
export default function Page({ page }) {
  return <BuilderComponent model="page" content={page} />;
}

Then we just drag and drop it into our page:

That is what Builder is. A layer between your data and your frontend code.

Conclusion

The benefits of a Visual CMS for your organization can be game-changing. It frees business teams to manage their requests and allows developers to focus on crucial projects. It eliminates content development bottlenecks and speeds up growth. Plus, it fosters autonomy and collaboration, leading to happier and more productive teams.

But that's not all. A Visual CMS brings with it a range of optimization features and incremental adoption capabilities that take your digital experience management to the next level. With its optimization features, testing and personalizing your ideas is a breeze. You can personalize experiences for individual visitors based on various attributes, delivering top-notch, performant experiences.

And the best part? You don't need to overhaul your front end or schemas. A Visual CMS plays well with your existing tech stack. You can use your current design system and component library, bring in any data source, and migrate content created in the Visual CMS to your front-end choice.

Now, imagine the possibilities. A Visual CMS empowers your team to unleash their creativity and build exceptional digital experiences. You have the power to transform your organization's content and digital experience management.

It's a big leap forward, enabling you to build your way, build faster, and build together.

Now that's a win-win in my book!

Visually build with your components

Builder.io is a headless CMS that lets you drag and drop with your components right within your existing site.

Try it out Learn more

// Dynamically render your components
export function MyPage({ json }) {
  return <BuilderComponent content={json} />
}

registerComponents([MyHero, MyProducts])

Read the full post on the Builder.io blog