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

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>

<div class="prose">{@html richTextContent}</div>

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!