Headless - The Future of CMS Is Here

Rate this content

Find out why the headless is the new buzzword everybody wants to use. I will take you on a fast ride through Storyblok, the first headless CMS with Visual ! You will learn why thousands of users love it and what benefits it brings you - the REACT community!

8 min
24 Oct, 2022


Sign in or register to post your comment.

AI Generated Video Summary

This lightning session introduces the concept of headless CMS and the benefits of building a custom backend without extensive coding. Storyblock offers a visual editor with real-time visual editing in React, along with features like workflows, translations, and versioning. It also allows for customization through defining components, rules, and building custom plugins using React or Vue. The API provides access to content in JSON format, and JavaScript bridges can be used to incorporate components into the final product.

1. Introduction to Headless CMS and Storyblock

Short description:

Hello there, and welcome to this lightning session about the headless world, content management systems, Jamstack, and all the decoupled out there in the web. So what is all the headless hype about? It's about building your own custom backend without needing to really code a lot. You can use the framework of your choice. Additionally, the nice backend gives you all the workflows, translations, approvals system, versioning, and more stuff that you need for your content teams and marketers. Find out more at storyblock.com. Sign up, log in, and get a visual editor with real-time visual editing in React. This is the blog library, where you can define all the components. You also have a content section with a folder-based system, an asset library with image service, an image editor, getting started, dashboard, and settings.

Hello there, and welcome to this lightning session about the headless world, content management systems, Jamstack, and all the decoupled out there in the web.

So my name is Samuel Snapko and I'm the head of the developer relations at Storyblock, which is one of the headless CMSs out there, of course, and also the proud sponsor of the React Advance. And I'm very happy that you find time to watch this video and has to invest this five, six minutes to find out more about the future of the content management system.

So what is all the headless hype about? It's about building your own custom backend without needing to really code a lot. So you can build the Atomic system as you want, set up the different components, all that stuff. But on the other side, you can use the framework of your choice.

So if I would jump here to getting started, you could see you can go through all of that stuff. I don't have any of the slides, I just show you the website where you can find it. Then, of course, you will set up and create the component according to Atomic design and all your approaches that you would like to as similar as you do in your favorite framework, and then you can use that with the framework of your choice. So here, for example, in this samples, we have different samples for NexGIS, Next, Gatsby, React. Of course, Remix and all that stuff is already supported, so all the major React frameworks out there. You can simply use the same setup at the backend with multiple frames in the future, in the frontend, and choose your favorite one. And that's all the headless about. Of course, additionally to that, the nice backend gives you like all the workflows, workflows, translations, approvals system, versioning, and more stuff that you need for your content teams and for your marketers, that they can easily work with all of that. Find out at storyblock.com.

But what is exactly all about? So if you go and sign up, and you will log in, you will get to the Storyblock app, where you will choose your favorite, where you can choose your favorite spaces. You can like put them, you can like manage them, but you can also easily create here a new demo, like React advanced. I created right now. And in this demo, then you can like play with all that stuff. So what is possible with this? So why? And how? And why should you do that? So, and I say you, you will get a visual editor with all the cool stuff of real-time visual editing in React. So basically, as soon as you will do the type, then you will see the change. So yes, this is all the parts. This is the blog library, where you can define all the components. And then we have, of course, the content, where you have a folder based system in which you will create different stuff. Here we can see right now, of course, a sample project. And in the sample project, you have like different folders, you can like tag stuff, you have an asset library with image service, which you can like change this type of images. You can also have an image editor, where you can like Photoshop your images already directly in system. So you don't need to have extra tool. You have of course getting started here, you have a dashboard which you will see an overview of all of what's happening in your system, where you see all your last edits, the task pending to you and other stuff. Of course, you have a settings where you will set up different tokens, how to get content from draft for draft or for public website.

2. Visual Content and Customization in Storyblock

Short description:

In Storyblock, you can have multiple environments, preview links, and make real-time changes to your website. Define components, rules, and even build custom plugins using React or Vue. Access content in JSON format through the API and use JavaScript bridges to build the components in your final product.

You can have multiple environments, multiple preview links, and even redesign your website directly in Storyblock. The visual content feature allows you to see a real-time preview of your website connected to platforms like Versal, Netlify, AWS, or your own server. You can define the components and their rules, and even build custom plugins using React or Vue. With visual editing, you can make changes and see the preview update in real time. You can scroll, click on different parts of the website, move components around, and change styles quickly. As developers, you have the power to configure all of this and make changes easily. You can also access the content in JSON format through the API and use JavaScript bridges to build the components in your final product.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website.
Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022 
React Summit 2022React Summit 2022
21 min
Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals
One of the largest draws of headless or decoupled WordPress architecture is that we can endlessly remix the WordPress CMS that content creators love with the latest and greatest of web technology. This presentation will demonstrate how quickly a developer can get up and running with headless WordPress development using the Remix full stack framework. Using open source tools like WPGraphQL and Atlas Content Modeler, you can transform your WordPress site into a powerful headless CMS that serves data via GraphQL. We’ll see how we can query for and use that data in a Remix app, and also discuss how the framework’s focus on web fundamentals can benefit both the developer and the visitors who use our sites.
React Summit 2022React Summit 2022
20 min
Large scale projects challenges (NextJS - Contentful)
NextJS is an excellent full stack framework. Contentful is a well-known flexible headless CMS. Together are a great match, but when we talk large scale projects the challenges are completely different than the ones you may face in a small to medium scale project. Leonidas will try to raise your awareness on such challenges based on Greece's experience on redesigning Vodafone's site to create beautiful self-serve and guided journeys for Vodafone customers.
GraphQL Galaxy 2021GraphQL Galaxy 2021
23 min
Exploring the WordPress Graph with Next.js & WPGraphQL
Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance.
With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.
We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web.

React Finland 2021React Finland 2021
24 min
React Bricks: a CMS with visual editing based on React components
Headless CMSs are great for developers, but not for content creators.
React Bricks is the first CMS that is super-great for Developers (it's just React, backed solid APIs), for Content Creators (it keeps the visual editing experience of no-code tools like Wix) and for Designers (you can express your exact design system and be sure nobody will break it). I'll show you how it works!

Workshops on related topic

React Advanced Conference 2023React Advanced Conference 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:
- What diverse data fetching options there are in React
- What are advantages and disadvantages of each
- What are the typical use cases and when each strategy is more beneficial than others
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:
- Introduction to Localization
- Introduction to Contentful
- Localization in Contentful
- Introduction to Remix
- Setting up a new Remix project
- Rendering content on the website
- Implementing Localization in Remix Website
- Recap
- Next Steps
Remix Conf Europe 2022Remix Conf Europe 2022
162 min
Crash Course into Remix & Storyblok
You may read already about Remix. You probably already used it, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why Storyblok in combination with Remix is the best combo for your next project. Stop by and try it yourself!
Table of content: 
- Introduction to Remix, atomic design
the headless world
- Environment setup
- Creating pages and understanding how the dynamic routing splat routes works
- Future tips and Q
Prerequisite(s): Node.js installed, GitHub account.
React Summit 2023React Summit 2023
91 min
Crash Course Into Astro, Kontent.ai and Portable Text
During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text.
This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.
React Advanced Conference 2021React Advanced Conference 2021
159 min
Building Modern CMS Driven Web Applications with Strapi the OSS Headless CMS
In this workshop, we'll build out a fully functional website and integrated blog with Next.js and Strapi.
Table of contents:
- An introduction to Headless CMS and supported architectures
- Getting up and Running with Strapi and Next.js
- Integrating Blog functionality into a Next.js app
- Deploying your Next.js and Strapi Apps Bonus
- Implementing content previews with Next.js
Basic React Knowledge Basic knowledge of Node.js and npm Basic Web Concepts.