Webstudio CMS
The best CMS is the one you already use. Connect to your existing CMS or the one that works best for you.
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
_nMfk8l1YA9hOehouvrYKL.svg?width=640&quality=80&format=auto)
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
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
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.
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.
More about Dynamic Pages
Resources
Configure requests to your headless CMS using a Resource. A Resource allows you to define the request URL, method, headers, and body.
More about ResourcesExpression Editor
Create logical expressions directly in the UI, enabling conditional display, fallback values, concatenation, and more.
More about Expressions
Page settings bindings
Bind CMS data to any page settings, including meta title, description, social image, and custom meta values.
HTML and Markdown 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.
More about EmbedsLocalization
Use a dynamic language parameter inside your URL to render the document's language, as well as localized date and time.
Dynamic redirect
Use expressions for page redirects and dynamic response handling.
Component bindings
Map CMS data to any Webstudio component and field, such as headers, images, and rich text.
More about Bindings
Status code
Customize the status code using the Expression Editor.
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.
More about GraphQL
Sitemap
Create a sitemap containing static URLs from Webstudio and dynamic URLs from a CMS.
More about Sitemaps
Starter guides and templates
Go from zero to a complete frontend, including an overview page, details page, and dynamic sitemap with our templates setup guides.
Many more platforms are supported. This list only contains the tutorials and/or template we've created so far.
Need help deciding? Use the Headless CMS Finder tool.
Frequently asked questions
No. While some users may find some areas technical, you can use CMS without writing code.
