Webstudio CMS Full Tutorial (Hygraph/GraphQL)

Start Building 👉 wstd.us/future-web
The best CMS is the one you already use. Connect to your existing CMS or the one that works best for you. Webstudio is a frontend for headless CMSs, without code!
A lightweight Hygraph template is in the Marketplace :)
To start a new project, clone the template. wstd.us/hygraph-template
To integrate with an existing project, visit the Marketplace and insert the various pages.
Chapters:
00:00 Intro
01:17 Create a dynamic page
01:49 Setup headless CMS (Hygraph)
02:23 Fetch CMS data
06:49 Bind the data
12:51 Create a blog overview
16:15 Create a dynamic sitemap
No designer-developer handoff - Build visually, enabling one person to make changes.
Compose your tech stack - Choose the best tools for you and bring them together in one cohesive experience.
Dynamic at the speed of static - Cloudflare Workers do the fetching, and responses are cached on the Edge, virtually milliseconds away from any user on Earth.
Connect any headless CMS in three steps
1. Create a dynamic page
2. Fetch CMS data
3. Bind the data
Start Building 👉 wstd.us/future-web

[@efficientapp]

Let's goooo! Okay this is SUPER impressive and very exciting. Stoked for what the Webstudio team is doing here! Open Source all the things! Such a great tutorial John, well done!

[@Earthcrosser]

Webstudio is getting better and better. I love that it allows me to use different headless CMS backends. Really cool! Thanks for this video.

[@tahor]

Can you make a WordPress tutorial soon? Especially pulling custom post types with ACF like construction projects.

[@getwebstudio]

Great suggestion!

[@MilanBoisgard]

This is incredible! Really love this new feature! Congrats guys 💪

[@softpodcast]

Great demo!

[@n0c0de]

Damn .... now that's how cool it can get! Love the Content Embed component to style HTML returned!

[@keithprice3369]

Great work!

[@frankiejamieson3690]

Buzzing for this! Huge new feature and great tutorial

[@getwebstudio]

🙌

[@contra_hq]

Congrats on the launch 👏 Amazing work!

[@getwebstudio]

🙌

[@ZuberRahim-mk7gy]

That demo was fire 🔥 amazing work

[@getwebstudio]

Thanks 🔥

[@saulzamora]

Nice 🔥🔥

[@Hanike]

Webstudio just got wilder! 😸🍻

[@JosefaSavu]

Love this content! I'm following along and have got to styling the post page, I noticed that there's already elements that have been binded. Are these steps not needed with the current templates?

[@getwebstudio]

Correct. The template does almost all of this for you. You just need to add your Hygraph URL. But it's good to know the steps in case you need to modify anything.

[@JosefaSavu]

@@getwebstudio awesome that's for the info and keep the awesome content coming! Really loving what I've learnt with webstudio lately!

[@360Creators]

🤯🤩🤯🤩🤯🤩🤯🤩

[@biorig]

This is huge! Can we use Directus as the headless CMS for content source? Thanks

[@getwebstudio]

Yes you can!

[@John316Ministries]

Followed this tutorial but got error message at 6:15 min, please can anybody help? Here is what I got: " { "data": { "errors": [ { "message": "not allowed", "extensions": { "code": "403", "path": [ "work" ] } } ], "data": { "work": null }, "extensions": { "Complexity-Cost-Left": 30000000000000000, "Effective-Complexity-Limit": 30000000000000000 } }, "status": 200, "statusText": "" } "

[@getwebstudio]

please join discord

[@ashgorin]

I am aware of the advantages of a headless CMS, but unfortunately I still find it quite complicated to set up (even at webstudio) and to maintain for customers (without WYSIWYG experience).

[@getwebstudio]

WYSIWYG experience for customer is in the headless CMS. They are designed for non-technical content editor for content tasks. Builder is generally not for your customers, its for builders/designers.

[@ashgorin]

@@getwebstudio Thank you for your answer! Is the final content displayed in the headless CMS in the same way as it is finally embedded in the website? I thought not. I thought that in a headless CMS I only have form fields with a TinyMCE editor if necessary. So the latter is / would not be the WYSIWYG experience I want for my customers. Is a fully embedded comprehensive page WYSIWYG experience really possible with a headless CMS or is it only possible with other systems?

[@getwebstudio]

​@@ashgorin This can be addressed by providing a preview for a draft. Most CMSs have a draft mode.

[@Jelle001]

If you use a CMS is it still possible to publish the website on an alternative hosting platform?

[@getwebstudio]

Yes!

[@waveneyavenue]

Is it possible to pull in the dynamic fata grom hygraph for example, but use some conditional logic to determine the design template/page layout with webstudio BUT based on a variable in the post data, e.g video post, gallery post, photo post, product post, archived post ?. So that we can change the layout/design of the the post page while still populating it from a CMS dataset?

[@getwebstudio]

Not 100% sure what you mean, lets discuss this on Discord, sounds doable.

[@waveneyavenue]

@@getwebstudio ok, I'll try and get setup on Discord soon. I just happened upon webstudio today by chance and it might be a good fit for me. I'm a designer/developer of 26+ years, trying to stay in touch 😜. Been into jamstack and composable approach for a few years...but sadly all the js is getting too much for me I was really just thinking out loud. Wondering if this approach would suit some of my use cases. I was thinking about an eleventy/hygraph or sanity stack as a goto for next bunch of client work

[@alaindescoux5707]

Does it support SSR for SEO purpose ?

[@getwebstudio]

It does!

[@gh00al]

Great but this is chock full of snippets of code and required technical knowledge. This has zero chance of replacing Webflow for the vast majority of users until it offers the option of a fully visual CMS where all the technical settings and configuration are handled behind the scenes for the user (and perhaps that means a fully integrated visual CMS). Maybe this iteration is a big step in terms of just getting *some* kind of CMS working, but I seriously hope this is not Webstudio's end game, because if so then that's game over in terms of their goal of being a real alternative to Webflow. I'm a little confused by all the excited positive comments.

[@getwebstudio]

I have a feeling you have a very specific understanding of the use cases Webflow or Webstudio is solving. I appreciate an opinionated take, but you really need to learn more about everything we are trying to achieve with this approach. Some simple cases might indeed be a bit more hassle than on Webflow, but we are more interested in solving hard problems than providing yet another cookie-cutter website builder.

[@gh00al]

​@@getwebstudio Fair enough and the project really does look very solid and impressive, so I don't mean to disparage. However, if that is the case then I think the marketing and comms around this should be reworked to reflect your actual aims. The marketing for the CMS feature stresses no-code in multiple parts. But some knowledge of technical syntax and terminology (json, queries, JS syntax, etc.) seems to be required at most steps. But more in the bigger picture: My hope for Webstudio--and what I hear most people say about it--is that it could be a true replacement for Webflow, something that is desperately needed tbh. In order for that to happen, it would need to provide at least the option of a UI with similar ease of use. I think the majority of Webflow users would be out of their depth with this. This is looking more like a visual development platform for fairly advanced use cases. That's different than what Webflow shoots for, and indeed different than what most users need.

[@getwebstudio]

@@gh00al Following that logic, webflow is not nocode as well because style panel uses basically all the CSS programming concepts like flex box, grid etc. Most of the time users also use Code Embed and write some gsap code or similar little tweaks. Using 1% of programming concepts and writing 3-5 lines of very trivial code is still writing code, but its clearly on the nocode/lowcode side. The thing about CMS is you are setting it up once, as a designer out of depth you can hire for 1 hour someone to get this particular task done for you. It doesn't make all the other aspects Not NoCode. Additionally over time we can provide more UI to do things without code or AI that will write it for you.

[@getwebstudio]

In other words, using 1% of code in the entire setup, doesn't make the entire platform not NoCode/LowCode. Additionally we clearly communicated everywhere this is an open source advanced visual development platform.

[@getwebstudio]

That reminds me ... did you know you can write code in Excel? The language is called VBA. What does it make excel?