Mix Data from Storyblok CMS with StepZen featuring Facundo Giuliani | StepZen
Published:
Anthony Campolo and Facundo Giuliani from Storyblok discuss headless CMSs, Storyblok's features, and integrating with StepZen's GraphQL API.
Episode Summary
In this episode, Facundo Giuliani, a developer relations engineer at Storyblok, discusses headless CMS technology and Storyblok’s features with the host. They explore the concept of headless CMSs, comparing them to traditional CMSs and highlighting the flexibility they offer developers. Giuliani demonstrates Storyblok’s key features, including its content organization structure, visual editor, and GraphQL API. The host then shows how to integrate Storyblok’s API with StepZen, a GraphQL API gateway. They discuss the benefits of this integration for developers and content creators. Throughout the conversation, they emphasize the importance of creating tools that cater to both developers and business users, showcasing how Storyblok aims to achieve this balance through its visual editor and customizable content structures.
Chapters
00:00 - Introduction and Overview of Headless CMS
In this opening chapter, the host introduces Facundo Giuliani, a developer relations engineer at Storyblok. They begin by discussing the concept of headless CMS (Content Management System) and how it differs from traditional CMS platforms. Giuliani explains that headless CMSs separate the content management backend from the frontend presentation layer, offering developers more flexibility in choosing technologies for building web applications. He highlights how this approach aligns with modern web development practices, particularly in the context of the Jamstack (JavaScript, APIs, and Markup) architecture. The conversation touches on the benefits of headless CMS for both developers and content creators, setting the stage for a deeper dive into Storyblok’s features.
02:56 - Storyblok’s Content Organization and Structure
This chapter delves into Storyblok’s approach to content organization and structure. Giuliani explains the concept of “spaces” in Storyblok, which are essentially projects or containers for content. He describes how content within a space is organized using “stories” (which can represent pages or other content types) and “blocks” (reusable components within stories). The discussion covers the hierarchical nature of this organization, comparing it to familiar concepts like file systems or Git repositories. Giuliani also touches on advanced features like role-based access control and multi-language support, demonstrating how Storyblok’s structure can accommodate complex content management needs while remaining flexible for various project types.
09:01 - Creating Content and Exploring the GraphQL API
In this section, the host and Giuliani walk through the process of creating content in Storyblok and accessing it via the GraphQL API. They start by creating a simple blog post entity, showcasing the basic content editing interface. The conversation then shifts to Storyblok’s GraphQL playground, where they demonstrate how to query the created content. Giuliani explains the benefits of using GraphQL for content retrieval, highlighting its flexibility and efficiency. They also discuss how developers can customize content types and fields to suit their specific project needs. This chapter provides a practical look at how content created in Storyblok can be easily accessed and integrated into various frontend applications.
17:03 - Integrating Storyblok with StepZen
This chapter focuses on integrating Storyblok’s API with StepZen, a GraphQL API gateway. The host demonstrates how to set up a StepZen project that connects to Storyblok’s GraphQL endpoint. They walk through the process of creating schema files, setting up authentication, and mirroring Storyblok’s content structure in StepZen. The discussion highlights the benefits of using an API gateway like StepZen, including the ability to combine multiple data sources into a single GraphQL endpoint. This integration showcases how developers can leverage Storyblok’s content management capabilities within a larger API ecosystem, providing more flexibility and power in building complex applications.
27:24 - Visual Editor and Its Impact on Content Creation
The final chapter explores Storyblok’s visual editor, a key feature that sets it apart from many other headless CMS platforms. Giuliani demonstrates how the visual editor allows content creators to see real-time previews of their content as it would appear on the actual website. They discuss the benefits of this approach for non-technical users, enabling them to create and arrange content blocks visually while seeing the end result. The conversation covers how developers can customize the visual editor experience, create reusable content blocks, and integrate it with their own frontend applications. This chapter emphasizes Storyblok’s focus on bridging the gap between developer flexibility and user-friendly content management, showcasing how it caters to both technical and non-technical team members in a content creation workflow.
48:25 - Conclusion and Resources
The episode concludes with a recap of the key points discussed throughout the conversation. Giuliani provides additional resources for listeners interested in learning more about Storyblok, including links to the main website, documentation, and social media channels. He mentions the upcoming release of Storyblok v2 and invites listeners to join the beta program. The host also shares information about StepZen for those interested in API integration. Both speakers emphasize the collaborative nature of the modern web development ecosystem and how tools like Storyblok and StepZen can work together to empower developers and content creators alike.