Introducing @storyblok/richtext v5

Today we're releasing @storyblok/richtext v5, the next evolution of rich text rendering across the Storyblok ecosystem.

This release focuses on three goals:

• Smaller bundles
• Better framework integration
• A simpler and more maintainable rendering architecture

While many familiar concepts remain, v5 introduces breaking API changes and requires migration for existing users.

Why v5?

In v4, we unified rich text rendering around Tiptap extensions. This gave us a single rendering engine across frameworks and removed a large amount of custom parsing logic.

The approach worked well from a maintenance perspective, but it came with a tradeoff: every SDK inherited the runtime cost of that abstraction. The bundle size became one of the most common concerns raised by the community.

With v5, we've redesigned the rendering layer from the ground up.

Rich text rendering is now handled by lightweight, framework-specific implementations built on top of a shared utility layer, instead of a Tiptap-driven runtime.

The result is a smaller footprint while preserving the flexibility developers expect.

What's changing?

The biggest change in v5 is the rendering architecture.

@storyblok/richtext now focuses on providing a lightweight rendering engine and utility helpers, while framework SDKs handle rendering using native framework primitives.

This means:

• Smaller bundles across all SDKs
• Faster client-side performance
• Framework-first rendering APIs
• Improved TypeScript support
• Simpler customization patterns

The core package now ships at approximately 3.9 kB minified and gzipped.

A new core API

Rich text rendering is now centered around a single public entry point:

import { renderRichText } from '@storyblok/richtext';

const html = renderRichText(document);

This API replaces the previous rendering architecture with a simpler and more predictable model while still supporting custom renderers, recursive rendering, image optimization, and utility helpers.

Framework-first rendering

All Storyblok framework SDKs have been updated to use the new architecture, while preserving the familiar developer experience. Refer to the migration guide for complete framework examples.

React

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

Vue

import { StoryblokRichText } from '@storyblok/vue';

Astro

import StoryblokRichText from '@storyblok/astro/StoryblokRichText.astro';

Svelte

import { StoryblokRichText } from '@storyblok/svelte';

Angular

import { SbRichTextComponent } from '@storyblok/angular';

Each component accepts the rich text document via the document prop. In Angular, use the sbDocument input instead.

We've also introduced official rich text components for Astro and Svelte.

HTML parsing improvements

v5 also upgrades the HTML parser. Custom parsers are now fully typed and provide more flexibility for transforming HTML into Storyblok rich text documents, making migration and content transformation workflows easier to implement.

Breaking changes

This release contains breaking changes.

Although some APIs and concepts may look familiar, the underlying rendering model has changed significantly. Existing implementations that rely on previous rich text rendering APIs will require updates.

Before upgrading, we recommend reviewing the migration guide and updated documentation.

Looking ahead

v5 lays the foundation for the future of rich text rendering in Storyblok.

By reducing runtime complexity and using framework-native rendering patterns, we deliver faster, smaller, and more maintainable solutions across every SDK.

Refer to the rich text documentation for API references and customization examples.

We're excited to see what you build with it.

Need help?

• Documentation: full API reference and usage examples
• GitHub Issues: report bugs or request features