Webstudio: A No-Code Frontend for Headless CMS

Previously, leveraging a headless CMS required custom coding, typically with a popular JavaScript framework. This approach, while flexible, demands significant time and resources for development and maintenance.

Webstudio is an advanced visual builder that connects to any headless CMS, providing a nearly code-like level of customization minus the complexity and cost of developing a custom-coded frontend.

First, I'll explain our decision to integrate with existing headless CMSs rather than developing our own, highlighting why building our own CMS would not benefit our users.

Secondly, I'll deep dive into how the Webstudio CMS integration works, including fetching data, displaying it, and creating sitemaps (all without writing code).

Why building a custom CMS is bad for Webstudio and its users

Without Webstudio, there are two primary options when it comes to CMS + web development:

1. Use a traditional CMS (i.e., the page builder and CMS are in one coupled platform).
2. Use a headless CMS and pair it with one of the many JavaScript frameworks (requiring custom code and deployment infrastructure).

CMS is needed when a visual builder comes to market. Nearly all companies take the first approach above (building a CMS in-house).

Let's go over why this is problematic for users and companies and why Webstudio created a third option: combining a headless CMS with a visual development tool.

The hyper-focused approach

We believe companies should focus on one thing and do that one thing really well.

While "all-in-one" platforms offer a broad range of functionalities, their commitment to integrating diverse features often leads to none being truly exceptional. This jack-of-all-trades approach can mean settling for "good enough" rather than best-in-class in vital areas like visual building, content management, or ecommerce.

Attempting to address every customer pain point within a single product introduces complexity that dilutes the effectiveness of each solution. Such products often fail to meet specific user needs across different roles – designers, developers, and content editors – resulting in a compromised user experience that serves none optimally.

Whereas product-focused companies dedicate their entire time, money, and mental capacity to one product. In this case, headless CMSs.

It's neither good for Webstudio nor its users for us to create "yet another content management system." We all benefit from letting people bring their own CMS. One that is highly aligned with their needs and supported by a company solely focused on CMS. For simple structured data, users can manually define their data in a Collection using JSON.

At Webstudio, we are hyper-focused on providing the best visual development platform, enabling users to integrate with a headless CMS.

Composability

Tech stacks are something many businesses and tech enthusiasts obsess over. Each piece of technology can play a pivotal role in efficiency, capabilities, and revenue. Plus, it's fun to geek out over the various approaches software companies take.

When choosing a coupled system, all decision-making is taken away from you.

"Use our CMS, our website builder, our membership, and our hosting." – Coupled Systems (To be fair, it sometimes does make sense to use a coupled system – more on that later.)

Providing the ability to connect to any headless CMS enables the composition of the ideal tech stack, allowing for the integration of multiple CMSs (or other systems like CRMs, databases, etc.) if desired – more on this later.

With Webstudio, a decoupled CMS and visual builder can be added to the tech stack.

"Future-proofing"

There is no such thing as future-proofing, but the ability to compose your tech stack provides more longevity.

The longevity comes from two places:

1. Each component in a modular system prioritizes adopting the latest technological advancements – something vary hard in coupled systems. This ongoing modernization ensures the tech remains relevant and robust.
2. Modularity allows for easier updates or replacements of individual components. While it's more complex than simply swapping out Legos, this flexibility significantly simplifies maintaining and upgrading the technology, allowing systems to evolve at the pace of tech innovation.

Webstudio focuses on providing the best frontend visual builder, staying up to date with the latest CSS, JavaScript, HTTP, and other web-related technological advancements. Ultimately, Webstudio outputs an isomorphic server-client app that ensures maximum client rendering and data fetching performance.

Multiple channels

Headless CMSs enable storing content in a system that can be retrieved from various platforms, devices, and systems.

Building a custom in-house CMS would hinder (or altogether remove) the ability to deliver content to various systems.

At Webstudio, we are the platform through which web strategies are delivered. Because we solve this one silo of content delivery, it empowers the delivery of content across various platforms and devices, such as creating mobile apps.

The best CMS is the one you already use

Webstudio enables companies to use their existing CMS, including custom-built in-house ones, as long as it's accessible via an HTTP API. Plus, the frontend is created with an entirely visual builder, helping companies nail or beat deadlines and come in under cost.

Use multiple headless CMSs

There's no one-size-fits-all CMS.

There are various types of content needs, from simple, such as blogs, to complex, such as knowledge management. One CMS may perfectly align for complex needs, while it would be overkill for simple needs.

With Webstudio, companies can leverage the strengths of multiple platforms and bring them together in one cohesive experience.

To couple or to decouple

Sometimes, using an all-in-one platform makes sense, so let's shed light on those scenarios.

1. Simplified management – There's only one platform to learn and manage. This can be easier for teams without specialized technical skills or ones that don't want to dedicate resources to maintaining custom code and infrastructure.
2. Less upfront time – All-in-one comes with the benefit of having little to nothing to do to get set up. Before Webstudio, using a headless CMS required knowledge of a programming language to custom-build the frontend. While there is still more upfront time to use a headless CMS + Webstudio, it's an absolute fraction of the time it would take to create a frontend with code.
3. No need – A simple CMS suffices for many sites. Many users wouldn't question a platform that doesn't offer a feature such as relational data, so why go headless? If a user doesn't need complete control, maybe a coupled system is a better option.

Traditional CMS platforms have their place in the market, but for many use cases, a modular system's pros outweigh the cons.

The following are use cases and why a coupled system may not be preferable:

• Scalable ecommerce – Lack of flexibility in coupled CMSs can hinder scaling and customization.
• Multi-channel publishing - Content adaptation across different platforms (like websites and mobile apps) can be inefficient or not possible.
• Content-rich publishing - Handling high variability and content volume can be limited in performance, scalability, and flexibility.
• Global content management - Managing content across multiple regions and languages is often less efficient due to restrictive localization capabilities.
• Highly customized user experiences - Limited customization options for user interfaces restrict the creation of unique, tailored experiences.
• Integration with external services - Integration capabilities with external APIs and services are typically limited, stifling innovation and operational efficiency.
• Agile development projects - The inflexibility of coupled systems can slow down fast iterations and adaptations in fast-paced environments.

Before Webstudio, maintaining a custom frontend presentation layer posed significant challenges, particularly in terms of maintenance. This encompassed tasks like keeping packages up to date and the considerable time investment required for updating the website, such as building a landing page.

With Webstudio, there is a happy balance between each end of the spectrum – users get modularity and minimal maintenance while avoiding designer-to-developer hand-off.

Everything you need to know about Webstudio CMS

Webstudio is an open-source advanced visual builder that has uniquely approached CMS. Our approach is to maximize flexibility to work with any CMS in the world.

Let's break it down.

Resource fetching

It starts with fetching content from a headless content management system.

Instead of creating a unique integration for every CMS, Webstudio provides a more flexible way to interact with third parties: a UI to fetch resources without writing code.

Through the UI, users can configure a variable whose value comes from a fetch request (which is defined by filling out the URL, headers, and body fields). The variable then contains the response value and is accessible throughout the builder.

Hint: Pasting an entire curl command into the URL field will automatically parse and populate the respective Resource settings.

For example, in headless CMSs that use GraphQL, the query is pasted directly in the Request body, enabling users to get exactly what they need. The same can be done for REST APIs with support for GET, POST, PUT, and DELETE.

Once the data is fetched, the variable and its child values are available to be bound to components, enabling the external data to display.

Displaying content (Bindings)

To create a link between data and elements on the page, we create bindings. Bindings are a core feature in Webstudio, allowing users to dynamically link external data to any field within the platform.

This functionality covers everything from simple text inputs, like headings and paragraphs, to more complex attributes, such as rel, target, and aria-label. Each field includes a plus button, providing the option to bind a variable directly or to access and bind child values.

For standard components, such as text bindings for headers, the process is straightforward. However, when it comes to handling rich text, Webstudio offers a specialized component: Content Embed.

Understanding Content Embed

Content Embed enables using the style panel to control the look of the various elements generated by the rich text of the CMS. It works by outlining all elements (such as H1-H6, images, etc.) and letting users define what each one of those elements should look like the same way any other instance is styled in Webstudio.

By utilizing Content Embed, Webstudio simplifies the process of integrating and styling remote content, making it as easy to visually style and stay consistent.

In some cases, such as displaying a list/array of data, the need to loop over the results is needed.

Iterating lists using Collections

Collection is component that enables users to iterate over data.

For example, a blog overview page may display the latest 50 blog posts. To achieve this, a Resource variable is configured to retrieve 50 posts from the headless CMS. This variable is then bound to a Collection component, which iterates over the list of blog posts, providing a "Collection Item" variable on each iteration. By doing so, it generates a list of child elements that each have access to one Collection Item, in this example – to each blog post.

Now, let's talk about what happens when one of the links to a blog post is clicked.

Dynamic pages

The two primary purposes of a CMS are to edit/store structured data and to enable displaying the data in a template (define once, dynamically swap out the values).

Webstudio offers highly flexible dynamic pages. Here's how it works:

1. The query fetches the exact post, and users bind the results to the various components and fields, including page-level fields such as language, meta title, and description. Fetching is done by Cloudflare Workers, enabling ludicrously fast dynamic experiences, enabled by caching on the Edge.

2. In the page settings, define a dynamic path such as "/examples/:slug". The "slug" value is accessible in a Resource variable. This way we can fetch a specific post in the Resource, defined by the :slug parameter (which is whatever someone types in the URL).

The dynamic fetching (opposed to using static site generators) enables dynamic user experiences such as creating filters and searches for structured content.

Within Dynamic Pages, users can customize the status code and use logical expressions within any field.

Expression Editor

Beyond binding data to fields and components, users can create logical expressions to customize field values and layout further.

Here are some common use cases of the Expression Editor:

• Conditionally show/hide content if a field value is present (or equals something)
• Display a fallback value if there's no data for a field
• Concatenate/merge together multiple values (static + dynamic, or dynamic + dynamic)

This is made possible by simple JavaScript expressions such as the ternary operator, template literals, and logical expressions.

A simple subset of JavaScript language gives users a simple syntax without the footguns a complex programming language brings.

Flexible sitemap generation

With the dynamic data fetched from a third party, how does one generate a sitemap without having access to custom code enabled by JavaScript frameworks (the typical solution for a headless CMS frontend)?

Webstudio has an XML Node component and XML Page Type that lets users build dynamic sitemaps entirely through the UI using Resources.

The process includes fetching URLs and last modification times from the CMS. Users can add Collections to iterate over query results and use XML Nodes to structure the sitemap.

Webstudio supports serving multiple sitemaps or building one sitemap, combining dynamic and static data.

Webstudio combines the best of both worlds – using a headless CMS and visual development

People no longer have to choose between a traditional CMS (giving up flexibility) and headless content management systems with a custom-coded frontend.

Webstudio combines the best of both worlds – a highly maintainable and flexible no-code frontend with one or more headless CMSs. This approach removes the hand-off between designers and developers while still offering a high level of flexibility.

Learn about Webstudio CMS and join our community.