Contentful vs. Storyblok: Choosing the Right CMS for Your Project

INTRODUCTION

Through this blog, I’ll share my personal experiences and insights while working with Contentful and Storyblok CMS platforms, highlighting their respective strengths, the differences of each platform, and provide guidance on when to choose one over the other for your future projects.

THE JOURNEY

My first project as a Cadet Engineer was to build an ecommerce website powered with Storybook, GraphQL, Typescript, Turbo Repo as our monorepo (SGTM), and NextJS.

For this project we decided to use Storyblok as our CMS, a platform that was relatively new to me. While it shared some similarities with other CMS options, I quickly discovered its unique aspects that set it apart. One particular feature that I like the most was the Live Editor; a feature that proved to be an absolute game-changer. Its intuitive content editing experience made working on our project an absolute joy. 

Compared to Contentful’s preview mode, Storyblok’s implementation was straightforward, requiring little effort to get up and running. The process of learning the technology was quite straightforward - thanks to its well-written documentation. 

Contentful content types only consist of fields which determine what type of content it will need. Meanwhile storyblok takes a component-based approach, making it reusable. Components are divided into two categories - Content Type and Blocks. 

1. Content Types - These act as blueprints or templates for different types of content. Each Content Type defines the structure and fields that a specific type of content should have. 
2. Blocks - Unlike contentful fields, storyblok blocks are nestable components, blocks represent smaller chunks of content, such as paragraphs, media, or even more complex elements like product list or sliders. 

For our next project, we had a big task - to revamp the company's website. And this time, I got assigned to redesign and redevelop all of the content pages. The website was already using Contentful as its CMS, and I have to admit, I was a bit nervous at the beginning. I thought Contentful would be totally different from what I knew.

But as I started diving into the project, I soon realized that Contentful wasn't as different as I thought. In fact, I found a lot of similarities between Storyblok and Contentful CMS platforms. It was a relief to see that there were more things in common than things that set them apart. The only real difference was how they handled the implementation process. 

Similarities and Differences

Both Contentful and Storyblok follow a headless architecture. But there's more to it - they both belong to the MACH-based systems category. This means they are cloud-native platforms built on microservices and use an API-first approach. As I learn about them, I can see the benefits they bring to our website development, making it easier to manage content and provide a great user experience.

Storyblok and Contentful share an API-first approach, enabling smooth integration with our custom front-end solutions. Webhook support in both CMS tools allowed us to receive real-time updates, ensuring our content remained up-to-date across platforms.

Storyblok's live editing was a standout feature, perfect for projects like Febtrain Ecommerce, where non-technical content editors needed a user-friendly interface to update content frequently. On the other hand, Contentful's robust GraphQL API was a game-changer, enabling us to handle complex content structures effortlessly.

DEVELOPER EXPERIENCE

Contentful provides the freedom to use any frontend framework I like. Their starter kits for popular tools and libraries are a great time-saver, making project setup easy. The rich text editor is also a nifty addition, making it simple to format and structure content. 

Similarly, Storyblok also gives the freedom to use any technology or frontend framework, in this case we used NextJS.  This allows me to work with the tools I’m most comfortable with. Aside from its component-based approach the visual editor is what I like the most. I can see exactly how my content looks as I edit, which saves me from going back and forth between the editor and my code. Plus, the nestable content blocks make managing the content simple. Both are developer-friendly CMS with decent developer experience.. 

Contentful Preview Mode; Storyblok: Live editor

Almost all content management systems, if not all have their own way of previewing content before publishing. In this section I will talk about what is Contentful preview mode and Storyblok live editor and how it’s different from each other. 

Preview Mode

In Contentful, the preview mode is a feature that allows me to see how my content will look before publishing it live on the company’s website. It's like a sneak peek of my changes without making them visible to the public just yet. When I'm creating or editing content in Contentful, I can switch to the preview mode to view it in a more realistic context, just as it would appear to the users once published.

What I like about the preview mode in Contentful is that it lets me check how my content fits into the overall design and layout of the website we’re working on. It's handy because I can see if everything looks alright, without worrying about any potential mistakes or formatting issues that might crop up once it's live.

Live Editor

The live editor in Storyblok is a handy tool that allows me to make real-time changes to the content directly on my project. It's pretty cool because I can see the modifications taking effect instantly, which helps me fine-tune the content without having to switch back and forth between editing and previewing modes.

What I find really convenient about the live editor is that I can edit content in its actual context. This means that I can visualize how the changes will look to my audience right away, without any guesswork. Whether it's adjusting text, images, or even layout elements, I get immediate feedback on how the content appears, making it easy for me to make quick tweaks until I'm satisfied with the final result.

Another thing that stands out in the live editor of Storyblok is the ability to work collaboratively with my team. Since all changes are visible in real-time, it's effortless to coordinate with colleagues and discuss adjustments on the fly, ensuring we're all on the same page and maintaining a smooth workflow.

Now, when comparing the live editor of Storyblok to the preview mode of Contentful, there are some key distinctions. Firstly, in Storyblok's live editor, I can edit content right on the actual page, allowing me to see the immediate impact of my changes. In contrast, Contentful's preview mode lets me view how the content will appear before publishing, but it doesn't provide the same level of real-time editing and direct manipulation.

One of the key differences I've noticed between Contentful's preview mode and the live editor of Storyblok is that in Contentful, I can preview individual content entries or pages independently. This is useful when I'm working on multiple pieces of content simultaneously, as I can quickly switch between previews to compare and contrast their appearance.

On the other hand, in the live editor of Storyblok, the focus seems to be on real-time editing and updates. While that can be convenient for making quick changes and seeing them in real-time, I find it lacks the ability to view my content in a more holistic manner before it goes live.

CHOOSING THE RIGHT TOOL

With the high number of CMS platforms available today, making the right decision can be a daunting task. The choices can leave you wondering which one is the best fit for your project's unique requirements. To help ease your dilemma, I've compiled a list that highlights the types of projects that are best suited for specific CMS platforms. Whether you're embarking on an enterprise-level endeavor or launching a smaller project with limited resources. Here is my personal take on when to use one over the other.

Enterprise-Level Projects: Contentful is well-suited for global e-commerce platforms with complex product catalogs and multiple regional sites. Its ability to handle diverse content types and relationships streamlines content management for large organizations.

Content-Driven Applications: Ideal for media publishing platforms or content aggregators, Contentful excels in managing articles, videos, images, and media assets, delivering a content-centric experience.

Small to Medium-Sized Projects: Storyblok is perfect for local restaurant websites or boutique online stores with simple content requirements and limited product ranges, offering ease of use for content creators.

Multi-platform and Multilingual Content Delivery: Contentful is an excellent choice for multinational corporations needing multiple regional websites in different languages, facilitating efficient content delivery across various platforms.

Fast Time-to-Market: For startups launching marketing campaign landing pages or temporary event websites, Storyblok's visual editor enables rapid content updates, ensuring swift deployment.

Collaborative Content Management: Perfect for team blogs or educational resources, Storyblok fosters smooth collaboration among multiple authors and editors in managing content contributions.

Customized Solutions: Contentful's robust API and SDKs make it perfect for projects requiring tailored content management systems that dynamically showcase product data and meet unique organizational needs.

Simpler Content Structures: Storyblok suits personal portfolios or one-page business websites with straightforward content sections, such as about, services, and contact information, providing a smooth content management experience.

Conclusion

In conclusion, my journey exploring frontend development with Contentful and Storyblok CMS platforms has been enlightening. Contentful suits complex projects for large enterprises, while Storyblok excels in simpler, fast-paced ventures. Both offer API-first approaches and seamless integrations, providing developers with flexibility. Contentful's preview mode allows a holistic view, and Storyblok's live editor fosters real-time collaboration. The right choice depends on project needs: Contentful for enterprises and media platforms, and Storyblok for smaller projects and collaborative content management.

About Me

Hey there! I'm Jomel Cadiente, a Cadet Software Engineer at goodfrontend.dev. My coding adventure began back in 2017 when I was just a 12th grader. I studied Bachelor of Science in Information Technology at Isabela State University Main Campus and graduated in 2022. Along the way, I dabbled in game development and data analytics, but what really sparked my excitement was building web applications using cool technologies like Python/Django, Node.js, and Go. I am a former member of the Microsoft Student Ambassador program. Recently, I decided to focus more on front-end development to level up my overall skills and expertise.