How to Migrate from Prismic to Cosmic

Prismic has been a reliable headless CMS for thousands of development teams. But the combination of recent pricing changes, Slice Machine's tight coupling between content models and frontend code, and the absence of native AI agents has many teams looking for a more flexible, future-proof platform.

This guide covers everything you need to move from Prismic to Cosmic: understanding the conceptual model mapping, migrating your content structure, porting your content and media, and updating your frontend API calls. Real code examples are included throughout.

---

Why Teams Are Leaving Prismic

Before the technical steps, it is worth understanding what is driving the migration in the first place.

1. Pricing Changes

Prismic restructured their pricing model, and many teams saw their bills increase significantly. For teams on annual plans or with multiple repositories, the new pricing created real budget pressure. Prismic's per-repository model also means costs compound for teams managing multiple sites or clients.

2. Slice Machine Lock-In

Slice Machine is Prismic's developer tool for defining reusable page sections. It works by storing slice definitions as JSON files inside your repository, alongside your React or Vue components. This has a real downside: your content model is coupled to your code.

To add a new field to a slice:

1. Update the slice definition in Slice Machine (locally)
2. Push the updated type to your Prismic repository via the CLI
3. Deploy your frontend to register the new component

Editors cannot change the content structure without developer involvement and a deployment cycle. For teams that need content flexibility, this is a bottleneck.

3. Limited AI Capabilities

Prismic lists AI features as beta and available upon request. In 2026, your CMS should have AI built in as a first-class capability, not as a future roadmap item.

---

Understanding the Content Model Mapping

Before writing a single line of migration code, you need to understand how Prismic's concepts map to Cosmic's.

Prismic Concepts Mapped to Cosmic

The Key Difference: Where the Schema Lives

In Prismic, your Custom Type definitions are JSON files that live in and directories in your repository. In Cosmic, your Object Type schema lives in the CMS dashboard and is reflected immediately in the API.

This means you create your Cosmic Object Types through the dashboard (or the REST API), not by editing JSON files in your codebase. Schema changes take effect instantly with no code deployment.

---

Step 1: Audit Your Prismic Content Types

Start by exporting and documenting your Prismic content model.

Export Your Custom Types

Prismic stores your Custom Type definitions as JSON. You can find them in your repository under Custom types in the dashboard, or in your codebase under the directory if you use Slice Machine.

Here is an example Prismic Custom Type for a blog post:

Make a list of all your Custom Types, their fields, and whether they are repeatable (many documents) or single (one document per type).

---

Step 2: Create Your Cosmic Object Types

Now map each Prismic Custom Type to a Cosmic Object Type. You can do this through the Cosmic dashboard or via the REST API.

Mapping the Blog Post Example

Here is how the Prismic blog post Custom Type maps to a Cosmic Object Type:

Prismic field → Cosmic metafield:

• → becomes the Object's (auto-generated or set explicitly on create)
• (StructuredText/heading1) → is the Object's top-level title field
• (StructuredText/paragraph) → metafield type
• (Image) → metafield type with
• (Link/document) → metafield type with
• (Slice Zone) → metafield type (or individual metafields per slice)

Creating the Object Type via the REST API

Handling Slices: Three Patterns

Prismic Slices map to Cosmic in different ways depending on their complexity:

Pattern 1: Simple slice with a few fields → metafield

A Prismic "Quote" slice with and fields becomes a metafield in Cosmic:

Pattern 2: Repeatable slice (e.g., FAQ list) → metafield

A Prismic slice with repeatable items becomes a :

Pattern 3: Slice Zone with multiple slice types → Rich text body

For content-heavy pages where the body is primarily long-form text, convert the Slice Zone into a single or metafield:

This approach trades some structural granularity for simplicity. For most blog posts and article-style content, it is the right choice.

---

Step 3: Export Your Prismic Content

Prismic provides a Migration API for exporting documents. Here is how to use it:

Run this script to get a complete export of your Prismic content:

---

Step 4: Migrate Media Files

Before importing content objects, migrate your media files so you have Cosmic values to reference in your content.

---

Step 5: Import Content into Cosmic

With your Object Types created and media migrated, you can now import your content documents.

Handling Slice Zones

If your content uses a Slice Zone (variable list of slices), convert it to structured HTML or markdown before importing:

---

Step 6: Update Your Frontend

With your content in Cosmic, update your frontend to fetch from the Cosmic API instead of Prismic.

Before: Fetching from Prismic

After: Fetching from Cosmic

Updating Component Rendering

Prismic returns rich text as structured arrays that require a serializer. Cosmic returns it as HTML or markdown that you can render directly:

Updating Image References

Prismic image URLs differ from Cosmic's imgix-powered URLs. Update your image rendering:

Every Cosmic image URL is an imgix URL. Append (or any imgix parameters) to resize, convert to WebP, and optimize on the fly. No separate image processing service needed.

---

Step 7: Set Up Webhooks for Cache Revalidation

If your frontend uses Next.js ISR, Astro's on-demand revalidation, or any other cache invalidation pattern, set up Cosmic webhooks to trigger a rebuild or revalidation when content is published.

In your Cosmic dashboard: Bucket Settings > Webhooks > Add Webhook

Set the webhook URL to your deployment provider's trigger URL:

• Vercel:
• Netlify:
• Custom Next.js ISR:

Select the trigger events: , , .

From this point, every time an editor publishes content in Cosmic, your frontend automatically revalidates.

---

What You Gain After Migrating

Schema changes without deployments. Add a new field in the Cosmic dashboard. It is in the API immediately. No CLI, no commit, no deploy.

Framework freedom. The same Cosmic content powers your Next.js site, your Vue app, your mobile React Native app, and any other client. No slice library to rebuild.

Built-in AI Agents. Create content automatically with Content Agents that research, write, and publish on a schedule. Connect your GitHub repo with Code Agents. Browse the web with Computer Use Agents.

imgix CDN for every image. Every uploaded image is instantly served from a global CDN with on-the-fly transforms. No image pipeline to build or maintain.

Predictable multi-project pricing. One Cosmic plan covers multiple Buckets. No per-repository billing.

---

Migration Checklist

• Audit all Prismic Custom Types and document their fields
• Map each Custom Type to a Cosmic Object Type
• Map Slices to Cosmic metafields (parent, repeater, or rich text)
• Create Object Types in Cosmic dashboard or via the REST API
• Export Prismic documents to JSON using the Prismic client
• Migrate media files to Cosmic (captures imgix URLs)
• Import content objects into Cosmic via the REST API or SDK
• Update frontend data-fetching functions from Prismic SDK to Cosmic SDK
• Update image rendering to use Cosmic imgix URLs with optimization params
• Update dynamic route generation (, ) to use Cosmic
• Set up Cosmic webhooks for cache revalidation
• Smoke test all content types in staging
• Switch DNS / promote to production

---

Get Help With Your Migration

Ready to make the switch? Start on the free plan with no credit card required.

Start free on Cosmic →

For teams that want hands-on migration support, book a call with Tony:

Book a demo with Tony →

Also migrating from a different platform? See our guides for Strapi and WordPress. Or explore the Prismic alternative landing page for a full feature comparison.