Forem: Siddharth Dayalwal

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

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.

Local Hack Day : Build

Siddharth Dayalwal — Sun, 17 Jan 2021 22:34:38 +0000

Local Hack Day : Build

I never thought I would come so far!

This has been a fantastic journey, I contributed a lot and learned at the same time. learning with people, building various projects, sharing ideas and views and what not.
Local Hack Day Build has given us the opportunity to open up ourselves and come ahead and make ourselves shine.
I was proud to be part of EddieHub Community! As I started, people in the community were super interactive which gave me boost, i actively took part in everything!
Attended live sessions, various workshops, mini-events and what not, it has been altogether an incredible one.

CodeLess API

Its call API Chaining and it requires a backend that uses the new api pattern

If it is properly setup, you can automatically call it from the frontend like so:

The POST post-chain would be encoded as follows:

{ 
    ...[your_data_being_sent]... 
    chain:{ 
        key:dept_id, 
        combine:'false', 
        type:'postchain', 
        order:{dept/show:company_id,company/update:return} 
    } 
}

And then call via Curl(or via javascript) as follows:

curl -v -H "Content-Type: application/json" -H "Authorization: Bearer [access token]" -X POST -d "{'chain':{'key':'dept_id','combine':'false','type':'postchain','order':{'dept/show':'company_id','company/update':'return'}}}" "http://localhost:8080/v0.1/person/show/1"

If you need to send Max/Offset variables, do so as follows:

curl -v -H "Content-Type: application/json" -H "Authorization: Bearer [access token]" -X POST -d "{'chain':{'key':'dept_id','combine':'false','type':'postchain','order':{'dept/show':'company_id','company/update':'return'}}}" "http://localhost:8080/v0.1/person/show/1?max=1,1,1&offset=0,0,0"

Thanks for reading!