follow us on
Product Hunt

Webstudio CMS

The best CMS is the one you already use. Connect to your existing CMS or the one that works best for you.

Webstudio logo with top headless CMS logos orbitting

Headless CMS, without writing code

Use headless CMSs without custom-coded frontends with Webstudio, an advanced visual builder that connects to any CMS.

No designer-developer handoff

Build visually, enabling one person to make any changes.

Compose your tech stack

Choose the best backends and use them together in one cohesive experience.

Dynamic at the speed of static

Cloudflare Workers fetch the data and cache the responses on the Edge, just milliseconds away from any user on Earth.

Connect any headless CMS in three steps

1. Create a dynamic page

Dynamic path with :slug

Similar to a static page, the path includes dynamic parameters, like a post slug. This enables the page contents to change dynamically based on the requested page.

2. Fetch CMS data

Dynamic query using the slug

Create a query to fetch data from the headless CMS, passing in the dynamic part(s) of the URL. Fetch exactly what you need, whether it's a simple blog post or a complex data model with many relations, filters, and parameters.

3. Bind the data

CMS data tile connected to Header component

Connect your CMS fields to Webstudio components. You can bind external data to any component and field within Webstudio, from rich text to meta titles.

Integration guides

Go from zero to a complete frontend, including an overview page, details page, and dynamic sitemap with our setup guides.

Many more platforms are supported. This list only contains the tutorials we've created so far.

All the features to build a frontend for your CMS

Whether building a simple blog or a complex portal that fetches data from multiple backends, Webstudio can handle it.

Dynamic routing

Define a dynamic parameter within a page path, like /blog/:slug. When someone goes to /blog/hello-world, your query can dynamically fetch the blog post with the slug hello-world.

Dynamic path with :slug

Status code

Customize the status code using the Expression Editor.

Joining the text "Updated" with the dynamic CMS date

Expression Editor

Create logical expressions directly in the UI, enabling conditional display, fallback values, concatenation, and more.

Joining the text "Updated" with the dynamic CMS date

Resources

Configure requests to your headless CMS using a Resource. A Resource allows you to define the request URL, method, headers, and body.

Content Embed

Style each rich text element JUST like you style any other instance on the canvas – using the style panel, including Tokens or Local styles.

Localization (full support)

Use a dynamic language parameter inside your URL to render the document's language, as well as localized date and time.

Locale value bound to page settings

Component bindings

Map CMS data to any Webstudio component and field, such as headers, images, and rich text.

Binding CMS Data title to the header component

Page settings bindings

Bind CMS data to any page settings, including meta title, description, social image, and custom meta values.

Dynamic redirect

Use expressions for page redirects and dynamic response handling.

Content Collections

Iterate over data with unlimited nested collections.

A Blog Posts collection with serveral posts within it

GraphQL Resources

A GraphQL Resource is for fetching data from a GraphQL API. It allows you to define the query, variables, and headers. Other requests, such as REST, can be fetched using a Resource.

GraphQL resource with example query

Sitemap

Create a sitemap containing static URLs from Webstudio and dynamic URLs from a CMS.

Logo
Webstudio CMS
has arrived

FAQs

Do I need to know how to code?

No. While some users may find some areas technical, you can use CMS without writing code.

How much does it cost?

For Cloud, CMS is available on all paid tiers. See pricing for more info. For self-hosting, it's free.

Can I use <insert CMS>?

Webstudio CMS supports any content management system (CMS) that provides an HTTP API. While virtually all CMSs are supported, not all features in each CMS may be supported. Refer to the CMS documentation for more info.

Are the sites dynamic or static?

Dynamic (at the speed of static). You can add searches, pagination, and filters to your pages. Cloudflare Workers and Edge Cache make lucidrous-fast speed possible.

What types of projects is Webstudio CMS viable for?

Anything from a simple blog to complex data structures that need dynamic pages. You can also connect to CRMs, databases, and anything else with an HTTP API.

Is Webstudio stable?

Absolutely. Webstudio is production-grade, leveraging Cloudflare’s robust infrastructure for unparalleled availability, security, and performance. Additionally, the builder is decoupled from live sites, ensuring that once a project is deployed, it operates independently within its own Cloudflare Worker.

Built with Webstudio