DEV Community: Storyblok

Designing Content Systems that Understand and Act

Siddharth Dayalwal — Sat, 21 Mar 2026 04:16:19 +0000

Modern JavaScript applications don’t just render UI anymore. They orchestrate search, personalization, analytics, AI services, localization workflows, and multi-channel publishing. And underneath all of it sits content.

The problem is that most teams still treat content like static data, something you store, fetch, render, and then forget. That model worked when applications were simple. It breaks down when your system needs to reason about content, react to it, and automate around it.

If publishing a page triggers five scripts, three webhooks, and two background jobs, you’re not managing content anymore, you are managing side effects.

To scale without increasing fragility, content systems need to evolve in three ways: they need to understand meaning, react to events, and orchestrate durable workflows. In this article, we’ll explore these three pillars and how they shape the architecture of modern, AI-native content systems.

What AI-Native actually means

When people talk about AI-native systems, they often imagine assistants in the UI. But AI becomes far more useful when it’s embedded deeper in the architecture.

For AI to work effectively in a content system, three capabilities are required:

Meaning, so AI can understand what content represents
Events, so the system knows when something changes
Workflows, so AI output can trigger real actions

Without meaning, AI cannot reason about content. Without events, it doesn’t know when to act. Without workflows, its output has nowhere to go. These three capabilities turn a traditional CMS into an AI-native content system.

1. Store Meaning, Not Just Fields

Traditional CMS architectures are built around fields: title, body, tags, metadata, and more. Search relies on keywords, and filters rely on attributes. When other systems need smarter logic, they rebuild their own interpretation of the content. Over time this leads to duplicated logic across the stack.

A semantic layer changes this. **Instead of representing content only through fields, the system also represents it through **meaning; often using embeddings or vector indexing. This shared semantic representation allows different systems to operate from the same understanding of content. The same layer can power search relevance, AI agents, internal tools, and backend services. Meaning is modeled once and reused everywhere.

2. Publish Is a Signal

Publishing content isn’t the end of a workflow. It’s a signal. Content state changes usually trigger multiple processes: indexing, notifications, AI tagging, localization, or distribution. Many teams handle this through webhook chains or scripts. That works initially, but it becomes fragile as complexity grows. An event-driven approach scales better.

Instead of embedding logic in the publish action, the system emits an event that other services can subscribe to. A simplified example might look like this:

// publish-content.js
import { eventBus } from "./eventBus.js";

export async function publishContent(content) {
  await database.save(content);

  await eventBus.emit("content.published", {
    id: content.id,
    type: content.type,
    locale: content.locale
  });
}

Subscribers can then react to that event:

// ai-tagging.js
eventBus.on("content.published", async (event) => {
  await aiService.autoTag(event.id);
});

// localization.js
eventBus.on("content.published", async (event) => {
  await localizationWorkflow.start(event.id);
});

Each responsibility remains isolated. New capabilities can subscribe without modifying existing logic. For JavaScript teams already familiar with event-driven systems, this pattern feels natural. Applying it to content workflows simply brings the same architectural discipline to another layer of the stack. Events scale. Scripts chains don’t.

This is also where workflow automation tools begin to matter. Instead of wiring scripts together manually, modern systems are starting to orchestrate reactions visually. Features like Storyblok FlowMotion allow teams to trigger structured workflows from content events, turning what used to be invisible automation into something observable and maintainable.

3. Orchestrate, Don’t Glue

As systems grow, workflows become more complex. Publishing a piece of content might involve:

AI classification
Human review
Localization
Multi-channel distribution

If these steps live across scattered scripts, the process becomes hard to understand and maintain. Workflow orchestration solves this by making the process explicit.

Instead of chaining handlers together, the system defines a clear workflow where each step has visible state. AI actions, human approvals, and system tasks all exist within the same flow. This makes automation easier to observe, easier to debug, and safer to evolve.

Design Systems, Not Side Effects

JavaScript developers already understand APIs, events, and distributed systems. Applying the same architectural thinking to content unlocks a more resilient approach. When content systems model meaning, emit events, and orchestrate workflows, something important changes.

Content stops being passive data. It becomes an active participant in the system, something that can understand context, trigger actions, and move through intelligent processes. That’s the difference between static content and a living content system.

Building a Custom Calendar with React + Storyblok: A Recap of Our Bryntum Integration Tutorial

Siddharth Dayalwal — Fri, 12 Dec 2025 12:24:03 +0000

At Storyblok, we love collaborating with teams building exceptional frontend experiences. Recently, we partnered again with Bryntum to bring you a hands-on tutorial on creating a custom Bryntum Calendar React component for Storyblok. This guide is great for React developers who want to integrate advanced UI components without building them from scratch, and for Storyblok users to make their interfaces mode dynamic and content-driven.

To follow along, you will just need a basic React setup (React 18+), a Storyblok space with the React SDK, and access to the Bryntum Calendar (trial or license). Once you have these in place, the tutorial walks you through connecting structured Storyblok content to a fully-featured calendar UI in a straightforward and developer-friendly way.

Dive straight into the tutorial: Check out the complete guide on Integrating Bryntum Calendar + Storyblok + React Component

Why Bryntum + Storyblok Works So Well

Bryntum builds high-performance visual UI components, including calendars, schedulers, and Gantt charts, that solve problems developers rarely want to rebuild from scratch. A calendar UI, in particular, hides a surprising amount of complexity: time zones, navigation, layouts, event logic, conflict resolution… the list goes on.

Storyblok complements this perfectly with its headless CMS, offering structured content, visual editing, and a schema that adapts to whatever your project needs.

Together, they give you:

A fully functional calendar interface powered by Bryntum
A content-driven configuration layer using Storyblok
A smooth React developer experience with the Storyblok React SDK

It’s the best of both worlds: editors manage content, while your components handle the logic.

What You’ll Learn in Bryntum’s Tutorial

This tutorial walks you step-by-step through building a working calendar UI using React, Storyblok, and Bryntum Calendar. Here’s what you’ll take away:

1. A Ready-to-Use Calendar Component

Bryntum handles layout, event rendering, drag-and-drop interactions, and multiple views so you can focus on integrating, and not rebuilding the core functionality.

2. Fetching and Rendering Storyblok Content in React

You’ll learn how to work with Storyblok’s React SDK using:

useStoryblokState
apiPlugin
a custom Storyblok client

These help you connect Storyblok entries (like Events or Calendars) directly to Bryntum’s configuration.

3. Mapping CMS Content to Bryntum’s Data Model

Bryntum Calendar expects a specific schema. The tutorial shows how to map Storyblok’s structured content to Bryntum’s data stores, an essential skill when building headless, UI-heavy applications.

4. Using Storyblok’s Visual Editor With Custom Components

You’ll integrate your calendar into the Visual Editor through the StoryblokComponent renderer so editors can preview updates instantly.

5. A Clean, Reusable Integration Pattern

By the end, you’ll have a self-contained React component that reads from Storyblok and renders a fully interactive Bryntum calendar. No hacks. No unnecessary complexity. Just a clean, scalable pattern you can reuse across projects.

Why This Matters for Developers

Building a production-ready calendar UI is notoriously difficult and maintaining it is even harder.

This tutorial gives you:

A battle-tested calendar component you don’t need to rebuild
A consistent data flow powered by Storyblok
A scalable integration pattern you can apply to other Bryntum components
A way to empower editors without sacrificing structure or performance

If you're building dashboards, booking systems, internal tools, or anything time or event-based, this integration gives you a huge head start.

Ready to Try It Out?

If you want to explore how Storyblok and Bryntum work together in a real project, this tutorial is the perfect starting point. Try the build yourself, explore the code, and experiment with your own content types. You’ll learn a lot along the way.

Resources & Links

Read the full tutorial: Creating a custom Bryntum Calendar React component for Storyblok.
Explore the completed code: GitHub repository for the tutorial.
Join the Storyblok Discord Community: Connect with other developers working on exciting projects.
Read the earlier guide: Building a Bryntum Gantt UI component with React and Storyblok.

Global Financial Starter: Multilingual Template – Bejamas x Storyblok, Powered by Astro

Siddharth Dayalwal — Wed, 17 Sep 2025 10:30:00 +0000

Exciting news for Astro and Storyblok fans! With our friends at Bejamas, we’ve launched the Global Financial Starter: Multilingual Template, a production-ready Astro and Storyblok project that delivers fast, compliant, and global online presence for international sites.

Whether you're a frontend team, an agency, or a solo developer, this starter is designed to help you spin up multilingual websites for financial brands, campaigns, or products.

Storyblok and Bejamas share the same mission–to make it easier for developers to launch global digital experiences without compromising performance and flexibility. This starter is the result of one such partnership. It's not just a showcase, but a project you can clone, adapt, and ship to production.

Keep reading to learn about the template's features, how it works, and how to get started building with it.

Curious already? Explore the live demo before you dive in.

Get started

Go from zero to a live project in minutes:

Fork and clone the GitHub Repository
Sign up to Storyblok and create a new space
Clone the Storyblok Space
Install dependencies and setup environment variables
Create your project on Netlify and deploy!

To kick-start your project, follow the step-by-step guide on the Astro Template page.

The highlights

The Global Financial Starter is built with a modern, headless stack designed for performance, scalability, and ease of use: Astro, Storyblok, Netlify, and PostHog.

It comes pre-configured with the essential features your team needs:

Modular content model – pre-built blocks like hero, services, reports, testimonials, and more.
Financial reports – a dedicated content type with a report list page.
Multilingual by default – built-in language switcher with optional AI-assisted translations.
Visual editing – live preview with Storyblok’s block-based approach.
SEO ready – every page includes metadata fields.
Optimized performance – responsive images, static output, and https://pagespeed.web.dev/analysis/https-astro-storyblok-finance-starter-netlify-app/41ym06mwtn?form_factor=desktop.
A/B testing – PostHog integration to run experiments and A/B tests without extra setup.

See it in action

Don’t just take our word for it, explore the starter yourself with a live demo site or watch a demo video on YouTube.

Show us what you got

We bring you this starter with Bejamas so you can move faster when building multilingual landing pages, creating campaign microsites, or scaling a global financial brand.

Try it today, experiment with it, and let us know what you think:

Contributions on GitHub are welcome: issues, PRs, or any other feedback.
Join the Storyblok Discord community and share what you build.

Related resources

Introducing Storyblok CLI v4

Alvaro Saburido — Thu, 19 Jun 2025 14:00:00 +0000

An enterprise-ready, open-source command line to leverage complex operations on top of Storyblok’s Management API with a friendly and renovated interface.

Today, we’re launching Storyblok CLI v4, a complete rebirth of our developer toolkit built for the scale, performance, and polish that modern enterprises expect, yet intuitive and fun for every developer who interacts with it.

Features you will love ✨

1. Full make-over

Who said command line interfaces need to be plain and boring 😜? We present you with a new design for this version.

Color-coded domain badges – instantly see whether you’re in Components, Migrations, or Types land.
Real-time progress spinners + timing – watch each step finish and know exactly how long it took.
Success/error icons at a glance – ✅ for done, ❌ for issues, with zero [Object object] noise.
Copy-paste-ready paths – the CLI prints where files were saved (e.g. .storyblok/components/…), so you can jump there in one click.
Readable in any theme – tested on dark, light, and high-contrast terminals.
Consistent typography & padding – no more jittery line breaks when you resize the window.

2. Domain-first command design

The new storyblok <domain> <verb> format keeps related actions together and makes discovery a breeze.

For example, imagine you need to pull components from a space (1234), make local changes, and then push them to a second space (5678).

storyblok components pull --space 1234

This command saves your space components in a dedicated local .storyblok folder. You can later push these changes to our target space.

storyblok components push --space 5678 --from 1234

3. Granular, precision-targeted operations

Ship exactly what you intend. Nothing more, nothing less.

Use-case	What it looks like
Push a single component to production	`storyblok components push button --space 78910`
Sync only components matching a glob	`storyblok components pull "marketing-*" --space 78910`
Run a migration on stories matching a query	`storyblok migrations run --query "[highlighted][in]=true" --space 78910`
Combine filters & dry-run	`storyblok migrations run --starts-with "/en/blog/" --dry-run`

These scoped commands are CI-friendly, lightning-fast, and reduce “blast radius” during hot-fixes.

4. File Organization that sparks joy

Good-bye, root-folder clutter. All artifacts now live under a tidy .storyblok directory organised by space, by default.

.storyblok/
├─ components/
        └── YOUR_SPACE_ID/
                ├── components.json      # All components
                ├── groups.json         # Component groups
                ├── presets.json        # Component presets
                └── tags.json           # Component tags
├─ migrations/
└─ types/

You can keep them version-controlled for traceability, or add a single line to .gitignore. Override paths if you need something bespoke by using the --path flag.

5. Sign-up directly from the CLI

First-time user? Kick things off with a single command:

storyblok signup

The storyblok signup command opens a secure registration page in your default browser.

storyblok login

That’s it, you’re ready to pull components or run your first migration.

6. Better error handling & support

Remember those [Object object] stack traces? Use —verbose to get full error details

storyblok components push hero-banner --space 5678 --verbose

Actions now yield errors like the example below.


Error 

▲ error Component "hero-banner" not found. 
▲ error Command Error: Component "hero-banner" not found. {
  name: 'Command Error',
  message: 'Component "hero-banner" not found.',
  stack: 'Command Error: Component "hero-banner" not found.\n' +
    '    at Command.<anonymous> (file:///Users/alvarosabu/Projects/storyblok/storyblok-cli-next/dist/index.mjs:2206:21)'
}

Actionable logs – perfect for CI pipelines or reporting an issue on Support.
Smart retries & back-off – long jobs finish even on flaky networks.
Strict typing – predictable error objects your scripts can catch.

Migrating from v3 in one minute 🕒

Commands structure

v3 command	v4 command
`pull-components`	`components pull`
`push-components`	`components push`
`generate-migration`	`migrations generate`
`run-migration`	`migrations run`
`generate-typescript-typedefs`	`types generate`

Swap verb-domain → , check all the available flags using --help, and you’re done.

For a full overview of all commands available, please refer to the API README in the CLI repository.

What about the old `sync` command?

This command has not made the jump to v4.

We’re currently re-imagining it as a brand-new, server-side endpoint that will deliver:

Faster synchronization
higher reliability (the heavy lifting runs on our backend),
Better handling of large-scale operations

Until that ships you have two options:

Need	Recommended approach
Schema-only transfer (components, groups, tags, presets)	Use `components pull` from the source space, commit the files (or keep them local), then `components push` to the target space.
Full “everything” sync (stories, folders, roles, datasources)	Stay on CLI v3 for this specific job: `npm i -g storyblok@v3.36.1` and keep following the v3 docs. github.com

We’ll announce the new sync as soon as the new API endpoint is live—watch this space!

Get started today

npm i -g storyblok@latest          # install v4

storyblok signup && storyblok login     # onboard and authenticate
storyblok --help                        # explore

Found a bug? Want to help shape the future?

Report issues & feature requests – open a ticket in our GitHub tracker

👉 https://github.com/storyblok/monoblok/issues
Feeling adventurous? Fork the repository, follow the contributor setup in the root README.md, and submit a pull-request. We review PRs weekly and love community contributions!

Ready to enjoy faster workflows and world-class support?

Install Storyblok CLI v4 now and see what an enterprise-ready command line feels like. 🚀

Announcing Storyblok Svelte SDK v5: now fully compatible with Svelte 5

Edoardo Dusi — Mon, 28 Apr 2025 09:34:22 +0000

We're thrilled to announce the release of storyblok-svelte v5, a complete refactoring of our dedicated SDK built specifically for Svelte 5 and its runes system.

This new version takes full advantage of Svelte's latest innovations to provide you with the most powerful, developer-friendly tools to integrate your Storyblok content into your Svelte applications.

Embracing the future with Svelte 5

Svelte always stood out for its compiler-focused approach that delivers exceptional performance with minimal runtime overhead.

With the introduction of runes, the framework took another leap forward into simplicity and power.

As passionate supporters of the Svelte ecosystem, we've completely rebuilt our SDK to embrace these innovations, ensuring that Storyblok users can take full advantage of these new features, while maintaining compatibility with previous versions.

Let's see what's changed!

Cleaner component integration

Working with Storyblok components in Svelte 5 is now more elegant than ever:

<!-- Before (Svelte 4) -->
<script>
  export let blok;
</script>

<!-- After (Svelte 5) -->
<script>
 let { blok } = $props();
</script>

This simplified syntax makes your components more concise while fully leveraging Svelte 5's reactive system.

Enhanced Rich Text rendering

Our rich text renderer is now fully compatible with Svelte 5's reactivity system:

<script>
  import { renderRichText } from '@storyblok/svelte';
  let { blok } = $props();

  // Automatically updates when content changes
  let richTextContent = $derived(renderRichText(blok.content));
</script>

Rich text content now updates seamlessly when edited in the Visual Editor without any extra code.

Seamless Visual Editor experience

The integration with Storyblok's Visual Editor is smoother than ever with our improved storyblokEditable action.

<script>
  import { storyblokEditable } from '@storyblok/svelte';
  let { blok } = $props();
</script>

<div use:storyblokEditable={blok} class="feature">
  <h2>{blok.headline}</h2>
  <p>{blok.text}</p>
</div>

This ensures your components are properly highlighted while you edit your content.

Improved error messages

The new error messages will help you solve issues within your integration faster.

Component "feature" not found. Please register it in storyblokInit:
storyblokInit({
  accessToken: "<your-token>",
  components: {
    "feature": YourComponent
  }
})

Instead of generic messages, you'll now receive helpful guidance on how to fix problems.

Improved TypeScript support

For TypeScript users, we've enhanced our type definitions for better autocomplete and error checking.

import type { SbBlokData } from '@storyblok/svelte';

interface FeatureBlok extends SbBlokData {
  headline: string;
  text: string;
  image: {
    filename: string;
    alt: string;
  };
}

// Type-safe blok access
let { blok } = $props<{ blok: FeatureBlok }>();

Getting Started with v5

Ready to upgrade? Here's how to get started:

npm install @storyblok/svelte@latest

Then update your initialization code:

import { storyblokInit, apiPlugin } from '@storyblok/svelte';
import Feature from '$lib/Feature.svelte';
import Grid from '$lib/Grid.svelte';

storyblokInit({
  accessToken: 'YOUR_TOKEN',
  use: [apiPlugin],
  components: {
    feature: Feature,
    grid: Grid
  }
});

For components, update your scripts to use the new Svelte 5 syntax:

<script>
  import { storyblokEditable } from '@storyblok/svelte';
  let { blok } = $props();
</script>

<article use:storyblokEditable={blok}>
  <h2>{blok.headline}</h2>
  <div class="content">{blok.content}</div>
</article>

Learn by example

We've created a comprehensive SvelteKit playground that demonstrates all the new features in action.

Check out our GitHub repository to see the example code and learn best practices for building with Storyblok and SvelteKit.

Looking forward

This release reassures our commitment to provide first-class support for modern web frameworks.

We believe that Svelte's approach to building web applications aligns perfectly with Storyblok's mission to make content management more efficient and enjoyable.

We're excited to see what you build with this new version of our SDK, and we're already working on more features to improve your Storyblok + Svelte experience.

For more information, check out our official documentation or join our Discord community to share your feedback and questions.

Happy building!

Storyblok unveils new PHP packages in collaboration with SensioLabs

Edoardo Dusi — Thu, 27 Mar 2025 14:28:40 +0000

At Storyblok, we firmly believe in PHP and the power of open source software. Both have shaped the web as we know it today and continue to be crucial in its evolution.

That's why we're thrilled to announce that long with our partners SensioLabs, creators of Symfony, we've completely rebuilt our PHP packages from the ground up.

This collaboration represents more than just an update. It's a complete re-imagining on how PHP developers can interact with Storyblok. By working with SensioLabs, we've ensured these new packages adhere to modern practices, offer excellent Symfony support, and provide a significantly improved developer experience.

Today, we're announcing four brand-new PHP packages designed to make integrating Storyblok into your projects seamlessly.

Our previous PHP client and associated packages will be deprecated as we move forward with these improved solutions.

Let's explore each package and what it brings to the table.

Content Delivery API Client

The Content Delivery API Client is a type-safe PHP SDK designed to retrieve content from Storyblok. It provides an elegant way to interact with your Storyblok space, with built-in support for fetching stories, links, datasources, tags, and assets.

Use this client to easily fetch content for your project:

use Storyblok\Api\StoriesApi;
use Storyblok\Api\StoryblokClient;
use Storyblok\Api\Request\StoryRequest;

$client = new StoryblokClient(
    baseUri: '<https://api.storyblok.com>',
    token: 'your_storyblok_token'
);

$storiesApi = new StoriesApi($client);
$response = $storiesApi->bySlug('folder/slug', new StoryRequest(
    language: 'de',
));

More advanced features like filtering, pagination, and sorting, are also supported, giving you precise control over the data.

Symfony Bundle

The Storyblok Symfony Bundle takes integration to the next level for Symfony applications. Developed in direct collaboration with SensioLabs, it leverages the Content Delivery API Client while adding Symfony-specific features like automatic client configuration and Symfony Profiler integration.

Get started by adding these lines to your config/packages/storyblok.yaml file:

storyblok:
  base_uri: '%env(STORYBLOK_API_BASE_URI)%'
  token: '%env(STORYBLOK_API_TOKEN)%'

With this minimal setup, the bundle handles all the configuration, allowing you to immediately inject and use Storyblok's APIs within your controllers and services.

The bundle also handles environment-specific configuration, making it easy to switch between development and production environments.

Management API Client

The Management API Client allows you to programmatically manage your Storyblok content, providing you with a comprehensive set of tools for creating, updating, and organizing content within your spaces.

This client simplifies complex content management tasks with an intuitive API:

use Storyblok\ManagementApi\ManagementApiClient;
use Storyblok\ManagementApi\Endpoints\StoryApi;
use Storyblok\ManagementApi\Data\Story;
use Storyblok\ManagementApi\Data\StoryComponent;

$client = new ManagementApiClient($accessToken);
$storyApi = new StoryApi($client, $spaceId);

$content = new StoryComponent("article-page");
$content->set("title", "New Article");
$content->set("body", "This is the content");

$story = new Story(
    "An Article",
    "an-article-slug",
    $content
);

$storyCreated = $storyApi->create($story)->data();
echo "Story created, ID: " . $storyCreated->id();

This package is especially valuable for content migration, bulk operations, and building custom editorial workflows.

PHP Tiptap Extension

The PHP Tiptap Extension provides an extension specifically designed for Storyblok's rich text fields processing.

This framework-agnostic package makes rendering rich text fields from Storyblok straightforward and flexible in any PHP project, whether you're using Symfony, Laravel, or any other PHP framework.

You can easily transform Storyblok's rich text content into HTML with customizable rendering:

use Tiptap\Editor;
use Storyblok\Tiptap\Extension\Storyblok;

$editor = new Editor([
    'extensions' => [
        new Storyblok(),
    ],
]);

$editor->setContent(...); // Content from your API

echo $editor->getHTML();

It also allows you to provide your own Block renderer, and it is included in our Symfony Bundle package.

With all these releases comes a renewed PHP Technology Hub in our official website, a starting point for all your future integrations between your PHP projects and Storyblok.

Important note about legacy packages

As part of this launch, the following PHP packages are now entering a deprecation phase:

storyblok/php-client (our original PHP Client)
storyblok/storyblok-php-richtext-renderer (for handling richtext fields)

If your current projects use these packages, don't worry, they will continue to work.

That said, we strongly encourage all users to move to these new solutions, which offer significant advantages including modern PHP 8+ features, better type safety, and extensive testing.

We'll be providing migration guides to help with the transition. Support for legacy packages will continue in the meantime, but all new features will exclusively target these new packages.

The future ahead

These packages represent a renewed commitment to the PHP ecosystem and the open source community, and we want to express our sincere gratitude to SensioLabs for their expertise and collaboration in this endeavor.

This release is just the beginning. We're actively working on expanding our PHP support and have exciting plans for the future (to our Laravel users: stay tuned!.

We invite our wonderful community to try these packages, provide feedback, and contribute to their ongoing development. Get involved at Storyblok Community!

Mastering Scheduling and Gantt Charting: A Recap of Bryntum's Guide

Siddharth Dayalwal — Fri, 14 Feb 2025 09:19:36 +0000

Building a Gantt chart from scratch is no easy task—it can quickly become a complex challenge or even a blocker for your team. Fortunately, you don’t have to tackle it alone. That’s where the Bryntum Gantt chart comes in, providing a robust, pre-built scheduling solution that saves countless development hours. But what if you could take it a step further? Imagine seamlessly integrating it with Storyblok, allowing content editors to control project timelines without requiring developer intervention.

To help you achieve this, we collaborated with Bryntum to create a step-by-step guide on building a Bryntum Gantt UI component with React and Storyblok. Here’s why this guide is a game-changer for developers using Storyblok.

The Perfect Match: Storyblok and Bryntum

Storyblok’s joyful headless CMS empowers developers and content teams to create, scale, and deliver impactful digital experiences. Bryntum, on the other hand, specializes in visual UI components like Gantt charts, built for seamless integration with modern web frameworks.

With Bryntum’s Gantt component, you get:

A fully customizable UI to match your project’s unique needs.
Powerful scheduling and tracking for better project visibility.
Seamless integration with Storyblok’s React SDK, enabling effortless rendering and updates.

By combining Storyblok’s structured content management with Bryntum’s interactive Gantt charts, you get a powerful system for planning and tracking projects with precision.

What You’ll Learn from Bryntum's Guide

Fundamentals of Scheduling and Gantt Charting: Understand how Gantt charts work and why they are essential for visualizing complex project timelines.
Integrating Bryntum Gantt with React: Learn how to use Bryntum’s pre-built Gantt chart UI component to save hours of development effort.
Customizing and Extending the Gantt Chart: Discover how to customize event rendering and align integration with Storyblok’s API-first architecture.
Building a Fully Functional Gantt-Driven UI: Create a dynamic, Gantt-powered UI that enables non-developers to manage project schedules effortlessly.

By the end of this guide, you will have a ready-to-use Gantt chart UI powered by Storyblok + Bryntum Gantt + React.

Why This Matters for Developers

Developing a Gantt chart UI component from the ground up is probably one of the most complex frontend challenges. It involves handling dependencies, interactions, and rendering large datasets efficiently. With the Bryntum chart, you get a completely optimized and feature-rich solution up straight.

On top of it, its effortless integration with Storyblok enables content editors and non-technical users to manage tasks as per their needs without requiring code changes—making developers’ lives easier. This means you can focus on building innovative and powerful solutions rather than reinventing the wheel.

Ready to Try It Out?

To conclude, the best way to see how Storyblok and Bryntum work together is to build something yourself. It’s time to explore Bryntum’s guide and see how it can complement your Storyblok experience by putting it into action. Dive in and take your project management skills to the next level!

Resources & Links

Checkout the comprehensive guide on creating a custom Bryntum Gantt React component for Storyblok.
You can find the code for the complete tutorial in this GitHub repository.
Don’t forget to join Storyblok Discord Community and connect with other developers working on exciting projects.

Announcing Stable Live Preview for Storyblok’s Astro SDK

Dipankar Maikap — Mon, 03 Feb 2025 13:56:27 +0000

We are absolutely thrilled to announce that starting with version 6.0.0, our Astro SDK, @storyblok/astro, now includes a stable live preview feature!

With this major release, we’ve introduced some breaking changes as well. Let’s take a look at what’s new and how you can update your code to work seamlessly with the latest release.

Module import changes

In this release, we’ve removed the default export in favor of a named export. This change primarily affects your astro.config.mjs file, so make sure to update it as shown below:

//astro.config.mjs
import { storyblok } from '@storyblok/astro';

export default {
  integrations: [
    storyblok({
      accessToken: 'OsvN....',
      bridge: {
        resolveRelations: ['featured-articles.posts'],
      },
      enableFallbackComponent: true,
      livePreview: true,
    }),
  ],
};

Removal of `useStoryblok`

In our experimental release, useStoryblok required extensive configuration, even if you didn’t use all live preview features, to maintain consistency with our other SDKs. Additionally, we used AST code parsing, which made the implementation more complex.

In this version, useStoryblok has been completely removed and replaced with a new function: getLiveStory. Here’s how you can use it:

---
// pages/[...slug].astro
import { getLiveStory, useStoryblokApi } from '@storyblok/astro';
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro';
import BaseLayout from '../layouts/Layout.astro';

const { slug } = Astro.params;
let story = null;

const liveStory = await getLiveStory(Astro);
if (liveStory) {
  story = liveStory;
} else {
  const sbApi = useStoryblokApi();
  const { data } = await sbApi.get(`cdn/stories/${slug || 'home'}`, {
    version: 'draft',
    resolve_relations: ['featured-articles.posts'],
  });
  story = data?.story;
}
---

<BaseLayout>
     <StoryblokComponent blok={story.content} />
</BaseLayout>

If you’re using resolve_relations, pass it directly in the bridge configuration in astro.config.mjs. Refer to the first code example above for details.

Listening for live preview updates

When the live preview updates content in the Storyblok editor, a custom event (storyblok-live-preview-updated) is triggered. You can listen for this event in your application like this:

// pages/[...slug].astro
<script>
  document.addEventListener("storyblok-live-preview-updated", () => {
    console.log("Live preview: body updated");
  });
</script>

This is particularly useful if you need to regenerate CSS or handle other custom tasks when the content updates.

Next steps

We’re excited for you to try out this stable live preview feature! We would absolutely love to see your projects built with Storyblok and Astro, and hear your feedback.

Would you like to contribute to the development of @storyblok/astro? Feel free to create an issue or submit a PR in the official GitHub repository.

Further resources

Announcing Official Storyblok Richtext Support in our Frontend SDKs

Alvaro Saburido — Fri, 31 Jan 2025 08:28:54 +0000

Last summer, we announced a brand new @storyblok/richtext package, offering the community a more powerful way to parse Richtext content into their websites and apps using Storyblok. Thanks to you, this new library was greatly adopted, reaching around 130k monthly downloads at the time of this writing.

Although the library can be used directly in your projects, it is about time you could benefit from Storyblok's major frontend SDK developer experience to use it. The time has come, and we are thrilled to present you Official Richtext Support for:

React/Next SDK (starting from v4.3.0)
Vue SDK (from v8.1.0)
Nuxt SDK (from v6.2.0)

How to use

React/Next SDK

To begin using it on your Next projects, make sure to install the latest version:

npm install @storyblok/react@latest

You can render rich text fields using the StoryblokRichText component and pass the content to the prop doc.

import { StoryblokRichText, useStoryblok } from '@storyblok/react';

function App() {
  const story = useStoryblok('home', { version: 'draft' });

  if (!story?.content) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <StoryblokRichText doc={story.content.richText} />
    </div>
  );
}

Or you can have more control by using the useStoryblokRichText hook:

import { useStoryblokRichText, convertAttributesInElement } from '@storyblok/react';
import Codeblock from './Codeblock';

function App() {
  const { render } = useStoryblokRichText({
    //Options like resolvers
  });

  const html = render(doc);
  const formattedHtml = convertAttributesInElement(html as React.ReactElement); // JSX

  return (
    <div ref={ref}>
      {formattedHtml}
    </div>
  );
}

For a comprehensive list of options you can provide to the useStoryblokRichText, please consult the Full options documentation.

Vue/Nuxt SDK

You can access this new functionality by installing the latest version of the Vue SDK

npm install @storyblok/vue@latest

Or the Nuxt module:

npm install @storyblok/nuxt@latest

You can render rich text fields in Vue/Nuxt by using the StoryblokRichText component:

<script setup>
import { StoryblokRichText, useStoryblok } from "@storyblok/vue";

const story = useStoryblok('home', { version: 'draft' });
</script>

<template>
  <StoryblokRichText 
    v-if="story.content" 
    :doc="story.content.richText" 
  />
</template>

Or you can have more control by using the useStoryblokRichText composable:

<script setup>
import { useStoryblokRichText } from "@storyblok/vue";
const { render } = useStoryblokRichText({
    // Options like resolvers
  });

  const root = () => render(story.content.richText);
</script>

<template>
  <root />
</template>

Overriding the default resolvers

It’s fairly a common use-case to replace the default resolvers (the functions that map Storyblok’s field types to the component to be rendered by the framework) with a custom one on your project, for example, using Next’s Link component as a replacement for all the anchors inside of the Richtext field or swapping Code Blocks for a custom local component:

import { StoryblokRichText, useStoryblok, MarkTypes, type StoryblokRichTextNode } from '@storyblok/react';
import CodeBlock from './components/CodeBlock';

import Link from 'next/link';

const resolvers = {
    // Replace anchors with Next's Link
    [MarkTypes.LINK]: (node: StoryblokRichTextNode<ReactElement>) => {
    return node.attrs?.linktype === 'story'
       ? (
          <Link
            href={node.attrs?.href}
            target={node.attrs?.target}
          >
            {node.text}
          </Link>
        )
      : (
          <a
            href={node.attrs?.href}
            target={node.attrs?.target}
          >
            {node.text}
          </a>
        );
    },
    // Replace code blocks with a custom component
    [BlockTypes.CODE_BLOCK]: (node) =>
    <CodeBlock
      class={node?.attrs?.class}
    >
      {node.children}
    </CodeBlock>;
  }

  return (
    <div>
      <StoryblokRichText 
        doc={story.content.richText}
        resolvers={resolvers} 
      />
    </div>
  );

The same object can be passed to composables/hooks and the Vue component.

What about other SDKs?

Great, we now have official support for React/Next and Vue/Nuxt combos, but what about the other Storyblok SDKs like Astro or Svelte?

The quick answer is: that we are working on providing official support for the new Richtext package on these frameworks. Both have slightly different ways to render so we are still deciding the best way to integrate it. In the meantime, if the need arises, we suggest using NordVPN’s storyblok-rich-text-astro-renderer package which is highly adopted by the Astro + Storyblok community.

If you need a rich-text renderer for the Svelte SDK, please let us know via a request ticket on the official repo.

What about the previous Richtext approach?

As mentioned in the Richtext package announcement we will gradually sunset it in due time to facilitate the migration and adoption of the new approach, so for now, both solutions will co-exist in the ecosystem for a period of time until the next major version of storyblok-js-client (v7.0) lands.

Next Steps

We hope you are as excited as we are with the official Richtext support. We would love to see your projects built with Storyblok and hear your feedback

Want to contribute to this feature or do you have an issue to report? Feel free to create a new issue with a minimal reproduction in the correspondent repository listed below:

Happy OSS!

Resources

Storyblok Richtext repository.
Next/React SDK repository.
Vue SDK repository.
Nuxt SDK repository.

SymfonyCon Vienna 2024: Recap of our Experience

Edoardo Dusi — Wed, 18 Dec 2024 08:37:30 +0000

My personal and professional journey with PHP spans many years, though I've spent recent times focusing on JavaScript frameworks. On the 5th of December, I had the privilege of attending SymfonyCon in Vienna with my manager Alex Jover Morales, courtesy of SensioLabs. This conference wasn't just a technical event for me, it was a heartwarming return to the PHP community that has evolved tremendously over the years.

Conference Highlights

The conference kicked off with an inspiring keynote by Fabien Potencier, the author of Symfony. His presentation focused on Twig, Symfony's powerful templating engine that allows developers to write clean, maintainable templates. The upcoming Twig release introduces exciting features that showcase the continuous innovation in the PHP ecosystem.

One particularly fascinating technical session dove deep into HTTP compression algorithms. The speaker compared different compression methods including Zstandard (a high-performance compression algorithm developed by Facebook), Brotli (Google's compression algorithm optimized for the web), and the widely-used gzip. Understanding these compression techniques is crucial for optimizing web application performance and reducing bandwidth usage.

The Symfony UX presentation revealed promising statistics and future directions for this frontend framework. For those unfamiliar, Symfony UX is a collection of JavaScript components that integrate seamlessly with Symfony applications, bringing reactive features to traditional server-rendered applications. The numbers shared during the talk suggest a bright future for this technology.

Platform.sh, a cloud hosting platform specialized in PHP applications, showcased their latest features, demonstrating how modern PHP deployment can be both powerful and developer-friendly.

A standout presentation came from Paul Dragoonis about Dagger, a programmable CI/CD engine created by the author of Docker, Solomon Hykes. The talk illustrated how PHP developers can leverage Dagger to define their CI/CD pipelines as code, creating and managing Docker containers programmatically, a significant step forward for PHP deployment automation.

The "Strict PHP" session resonated strongly with my own philosophy of writing code for humans, not machines. It emphasized the importance of clear, maintainable code that future developers (including ourselves) can easily understand and modify.

Rob Allen's comparative analysis of GraphQL (a query language for APIs), REST (Representational State Transfer), and RPC (Remote Procedure Call) provided valuable insights into choosing the right API architecture for different use cases.

This is just a quick overview of some of the talks at the conference to give you an idea of some of the most interesting topics that I found there. There were many more over the two days and across three tracks.

SensioLabs

I want to extend special thanks to Oskar Stark and Silas Joisten from SensioLabs for their incredible hospitality. Our discussions went beyond casual conference chat—we dove deep into technical conversations about PHP, Symfony, and some exciting collaborative projects in the works. SensioLabs has been using Storyblok for their website and recently published a wonderful piece about their experience. While I can't reveal details yet, we're working on something remarkable together that we're eager to share with the community soon!

Coming Full Circle

It was great to be back in the PHP community!

It felt like coming home. This experience, along with my role as MC at phpday in Italy this year, has reinforced my view that what makes the PHP ecosystem special is the passion and technical expertise of its community members. Physical events like SymfonyCon are priceless because they create chances to make meaningful connections and share knowledge that you just can't get online.

The PHP community is still growing and coming up with new ideas, guided by the PHP Foundation and supported by frameworks like Symfony. Being part of this growth, even for a short time, reminds me why PHP is still a key part of web development.

Announcing React SDK v4 with full support for React Server Components

Edoardo Dusi — Fri, 22 Nov 2024 11:38:42 +0000

The introduction of the App Router paradigm in Next.js brought significant changes to the way developers build and structure applications. While it opened the door to exciting features like React Server Components (RSC) and finer control over rendering, it also introduced complexity for packages that needed to seamlessly support both client-side and server-side environments.

With the release of @storyblok/react version 4.0.0, we are proud to offer full support for React Server Components in Next.js. This update simplifies implementation, enables live preview functionality in our Visual Editor, and ensures robust server rendering, all in a single, unified setup.

Start using it now with:

npm i @storyblok/react@4

If you are using @storyblok/react v3 with App Router, there are some breaking changes. Please continue reading this article to learn how to update your app.

What's new in @storyblok/react 4.0.0?

Here's a quick rundown of the major improvements in this release:

Unified RSC support
Previously, React Server Components in Next.js required two different implementations for compatibility. With version 4.0.0, we've streamlined this and consolidated everything into one consistent approach.
Live preview with Visual Editor
Developers using the App Router can now enjoy live preview capabilities directly in the Storyblok Visual Editor, enhancing the development and content editing experience.
Seamless Server Rendering
Leverage the full server rendering capabilities of Next.js for improved performance and scalability of your applications

How to use it

Step 1: Initialize the SDK

Start by creating a new file lib/storyblok.js to initialize the SDK. Make sure to export the getStoryblokApi() function.

// lib/storyblok.js
import Page from '@/components/Page';
import Teaser from '@/components/Teaser';
import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';

export const getStoryblokApi = storyblokInit({
  accessToken: 'YOUR_ACCESS_TOKEN',
  use: [apiPlugin],
  components: {
    teaser: Teaser,
    page: Page,
  },
});

The getStoryblokApi() function returns a shared instance of the Storyblok client that works across server and client components.

Step 2: Wrap Your Application with StoryblokProvider

Next, create a StoryblokProvider component to enable live editing on the client side. Wrap your entire app with this provider in the app/layout.jsx file.

// app/layout.jsx
import StoryblokProvider from '@/components/StoryblokProvider';

export default function RootLayout({ children }) {
  return (
    <StoryblokProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </StoryblokProvider>
  );
}

Now, create the StoryblokProvider component:

// components/StoryblokProvider.jsx
'use client';

import { getStoryblokApi } from '@/lib/storyblok';

export default function StoryblokProvider({ children }) {
  getStoryblokApi(); // Re-initialize on the client
  return children;
}

Note that the StoryblokProvider is a client component. This ensures that your client-side components can interact with Storyblok, including live editing in the Visual Editor.

Step 3: Fetch Content and Render Components

In server components, use the getStoryblokApi() function to fetch content from Storyblok. Here’s an example app/page.jsx file.

// app/page.jsx
import { getStoryblokApi } from '@/lib/storyblok';
import { StoryblokStory } from '@storyblok/react/rsc';

export default async function Home() {
  const { data } = await fetchData();

  return (
    <div>
      <StoryblokStory story={data.story} />
    </div>
  );
}

export async function fetchData() {
  const storyblokApi = getStoryblokApi();
  return storyblokApi.get('cdn/stories/home', { version: 'draft' });
}

Step 4: Use StoryblokServerComponent for server rendering

For rendering components dynamically, always use the StoryblokServerComponent from @storyblok/react/rsc.

import { storyblokEditable, StoryblokServerComponent } from '@storyblok/react/rsc';

const Page = ({ blok }) => (
  <main {...storyblokEditable(blok)}>
    {blok.body.map(nestedBlok => (
      <StoryblokServerComponent blok={nestedBlok} key={nestedBlok._uid} />
    ))}
  </main>
);

export default Page;

This ensures compatibility with server-side rendering, even if you declare the component as a client component.

What’s Next?

We’re preparing an updated official documentation to make adopting version 4 even smoother. In the meantime, all the essential steps are included in the README.

Your feedback and contributions are vital to improving @storyblok/react! If you have suggestions or issues, feel free to open an issue or contribute directly to the project.

Are you attending ViteConf 2024?

Alex Jover — Tue, 24 Sep 2024 16:01:27 +0000

It’s safe to say that ViteConf is the biggest online conference on the Web Development these days, gathering the main experts from all the frameworks and technologies in the industry. And it makes sense… which web project is not using Vite these days?

We’re really thrilled about ViteConf 24, happening 3rd & 4th October! As last year, we’re proud to be an official community partner. But that’s not all - our dear Alvaro Saburido is speaking at the conference! About what? Well… you wanted to know.

Before that - we just published in Youtube an interview with Matias (Patak), Vite core team member and the mastermind behind ViteConf, and Alvaro sharing a few sneak peeks on the conference. Make sure not to miss it!

Main talk - How the ViteConf Pyraminx 3D Puzzle Was Built

Alvaro, DX Engineer at Storyblok and author or the Tres.js ecosystem, will dive deep into the technical creation of a fully interactive 3D Pyraminx puzzle that you’ll see at ViteConf.

Would you believe that such immersive creation is built purely with Vue and TresJS? But that’s not all: it also leverages Web Containers, a tool that enables running full-stack JavaScript environments directly in the browser.

Spoiler alert: Alvaro will reveal the process behind turning this random crazy idea into a working, interactive 3D app. Expect to learn about:

How to integrate TresJS with Vue to streamline 3D development.
The magic behind Web Containers and how they allow JavaScript to run directly in the browser—yes, including server-side code!
The creative process behind that made the Pyraminx project an immersive reality.

Innovative, uh? The web is amazing and full of potential… really a talk not to miss! Check out all details about Alvaro’s talk.

One more thing… Did you know you can customize your ticket? Look at the fancy Storyblok custom ticket https://viteconf.org/24/ecosystem/storyblok

DEV Community: Storyblok

Designing Content Systems that Understand and Act

What AI-Native actually means

1. Store Meaning, Not Just Fields

2. Publish Is a Signal

3. Orchestrate, Don’t Glue

Design Systems, Not Side Effects

Building a Custom Calendar with React + Storyblok: A Recap of Our Bryntum Integration Tutorial

Why Bryntum + Storyblok Works So Well

What You’ll Learn in Bryntum’s Tutorial

1. A Ready-to-Use Calendar Component

2. Fetching and Rendering Storyblok Content in React

3. Mapping CMS Content to Bryntum’s Data Model

4. Using Storyblok’s Visual Editor With Custom Components

5. A Clean, Reusable Integration Pattern

Why This Matters for Developers

Ready to Try It Out?

Resources & Links

Global Financial Starter: Multilingual Template – Bejamas x Storyblok, Powered by Astro

Get started

The highlights

See it in action

Show us what you got

Related resources

Introducing Storyblok CLI v4

Features you will love ✨

1. Full make-over

2. Domain-first command design

3. Granular, precision-targeted operations

4. File Organization that sparks joy

5. Sign-up directly from the CLI

6. Better error handling & support

Migrating from v3 in one minute 🕒

Commands structure

What about the old sync command?

Get started today

Found a bug? Want to help shape the future?

Announcing Storyblok Svelte SDK v5: now fully compatible with Svelte 5

Embracing the future with Svelte 5

Cleaner component integration

Enhanced Rich Text rendering

Seamless Visual Editor experience

Improved error messages

Improved TypeScript support

Getting Started with v5

Learn by example

Looking forward

Storyblok unveils new PHP packages in collaboration with SensioLabs

Content Delivery API Client

Symfony Bundle

Management API Client

PHP Tiptap Extension

Important note about legacy packages

The future ahead

Mastering Scheduling and Gantt Charting: A Recap of Bryntum's Guide

The Perfect Match: Storyblok and Bryntum

What You’ll Learn from Bryntum's Guide

Why This Matters for Developers

Ready to Try It Out?

Resources & Links

Announcing Stable Live Preview for Storyblok’s Astro SDK

Module import changes

Removal of useStoryblok

Listening for live preview updates

Next steps

Further resources

Announcing Official Storyblok Richtext Support in our Frontend SDKs

How to use

React/Next SDK

Vue/Nuxt SDK

Overriding the default resolvers

What about other SDKs?

What about the previous Richtext approach?

Next Steps

Resources

SymfonyCon Vienna 2024: Recap of our Experience

Conference Highlights

SensioLabs

Coming Full Circle

Announcing React SDK v4 with full support for React Server Components

What about the old `sync` command?

Removal of `useStoryblok`