How to Migrate from Storyblok to Cosmic

Why Developers Are Migrating from Storyblok to Cosmic

Storyblok was a smart choice for teams who wanted a visual editor baked into their CMS. But as applications grow in complexity and AI becomes central to content operations, its limitations become harder to work around.

Three pain points keep coming up in migration conversations:

1. Visual editor lock-in. Storyblok components are built around page presentation, which couples your content model to your frontend. When you need to reuse content across channels, that coupling becomes a bottleneck.
2. Pricing pressure. Seat fees, delivery limits, and add-on costs compound as teams grow. Budgeting for Storyblok at scale is unpredictable.
3. No native AI. Adding AI to a Storyblok workflow requires third-party integrations and significant custom engineering. Cosmic has AI Agents built in.

If any of those sound familiar, this guide will walk you through the full migration process: content model mapping, component-to-metafield conversion, media migration, API migration, and webhooks.

Before You Start: Understanding the Key Differences

The most important conceptual shift: Storyblok organizes content around components on stories. Cosmic organizes content around Objects of a given Object Type. The result is more flexible — you're not constrained by what a visual editor can preview.

Step 1: Map Your Content Model

Start by auditing your Storyblok components. For each component, you'll create a corresponding Object Type in Cosmic with the right Metafields.

Storyblok Component → Cosmic Object Type

If you have a Storyblok component like this:

Your Cosmic Object Type would look like:

Tips for the mapping process:

• Storyblok → Cosmic or
• Storyblok → Cosmic
• Storyblok → Cosmic
• Storyblok (single select) → Cosmic
• Storyblok (multi select) → Cosmic
• Storyblok nested blocks → Cosmic relationship field or
• Storyblok reference → Cosmic relationship field

Step 2: Export Your Content from Storyblok

Use the Storyblok Management API to export your stories. You'll need your Storyblok API token.

Step 3: Migrate Media Assets

Before importing content objects, migrate your media. Storyblok stores assets on their CDN; you'll need to re-upload them to Cosmic's media library.

Step 4: Import Content to Cosmic

With your content model mapped and media migrated, import your stories as Cosmic Objects using the JavaScript SDK.

Step 5: Update Your API Calls

Storyblok and Cosmic have different API patterns. Here's how to update your frontend code.

Fetching Content

Using the Cosmic JavaScript/TypeScript SDK

Important: Cosmic uses the REST API only. There is no GraphQL endpoint.

Step 6: Migrate Webhooks

If you use Storyblok webhooks to trigger builds or revalidation, you'll need to set up Cosmic webhooks.

Cosmic webhooks are available as an add-on ($99/month, or included in the $199/month bundle). Once enabled, configure them in the Cosmic dashboard under Settings > Webhooks.

Migration Checklist

Use this checklist to track your migration progress:

Content Model

• Audit all Storyblok components and fields
• Create corresponding Object Types in Cosmic dashboard
• Map all field types (richtext → markdown, asset → file, etc.)
• Test Object Type schemas with sample content

Media

• Export list of all Storyblok assets
• Run media migration script
• Verify asset URLs in Cosmic media library
• Build asset URL map for content import

Content

• Export all Storyblok stories via Management API
• Run content import script
• Verify published/draft status is correct
• Spot-check content in Cosmic dashboard

API Integration

• Replace Storyblok SDK imports with Cosmic SDK
• Update all API calls to use Cosmic REST API
• Update environment variables
• Test all content queries in development

Webhooks and Automation

• Recreate Storyblok webhooks in Cosmic
• Update webhook endpoints in your applications
• Test build triggers and cache revalidation

Go Live

• Run full content audit comparing Storyblok and Cosmic
• Update DNS / CDN configuration if needed
• Monitor error rates after launch
• Deprecate Storyblok account once migration is confirmed

Supported Frameworks

Cosmic works with all major JavaScript frameworks:

• Next.js — Full support including App Router and Pages Router
• React — Works with any React setup
• Vue — Full compatibility
• Nuxt — Server-side rendering and static generation
• Astro — Content collections and SSR
• Remix — Loader-based data fetching
• Svelte / SvelteKit — Full support
• Gatsby — Static generation

The Cosmic JavaScript/TypeScript SDK works in any Node.js environment and in modern browsers.

Pricing: What You Can Expect

Cosmic pricing is straightforward:

Additional users are $29/user/month. The Free plan is forever free — no credit card required.

Ready to Migrate?

Start your migration today. Cosmic's free plan gives you everything you need to prototype your new content architecture before committing.

Start for Free — No Credit Card Required

Want a guided migration walkthrough? Book a call with our team and we'll help you map your content model and plan the migration.

Related Resources

• Storyblok Alternative — Why teams choose Cosmic over Storyblok
• Prismic Alternative
• Strapi Alternative