• About
  • Blog
  • Tools
  • Case Studies
  • Contact

ContentWrap simplifies your Sanity CMS workflow

© Copyright 2025 ContentWrap. All Rights Reserved.

Work
  • About
  • Blog
  • Tools
  • Case Studies
  • Contact
Tools
  • Sanity Pricing Calculator 2025
  • Markdown to Portable Text Converter
  • HTML to Portable Text Converter
  • Rich Text to Portable Text Converter
Legal
  • Terms of Service
  • Privacy Policy
  • Cookie Policy
  1. case studies
  3. migrating ramp website from webflow to sanity
ContentWrap helped Ramp migrate to Sanity CMSMay 2, 2025

Migrating from Webflow to Sanity CMS: Scaling Ramp's Content Infrastructure for Growth

Tamba Monrose
Founder of ContentWrap

Overview

Led the migration of Ramp's website from Webflow to Sanity CMS, delivering a scalable content platform that supports Ramp's expanding publishing needs. Accelerated editor workflows, created custom embeds, migrated 1,500+ documents, and improved page performance & SEO rankings.

Sector

Fintech & Financial Services

Founded

2019

Company size

1,200+ employees

Company valuation

$22.5B (Series E-2)

Share this content

Disclosure
This case study describes work performed while I was employed as a Senior Software Engineer at Ramp. The Sanity CMS migration project was conducted as part of my professional responsibilities at Ramp, not as a contracted service through ContentWrap.

The Challenge

Ramp's content team was hitting a wall. After four years on Webflow, what started as a simple website (ramp.com) had evolved into a complex content operation serving millions of visitors monthly. But Webflow's architectural limitations were strangling growth at every turn.

The existing setup faced several limitations:

  1. Primitive data modeling: Webflow's basic field types (text, number, reference) felt like building a skyscraper with Legos. No custom objects, no repeaters, no copy-paste functionality for reference values. Want to replicate a complex content structure? Delete everything and rebuild it manually.
  2. Component hell: Forget design systems or reusable components. Webflow's "customization" means changing background colors and showing/hiding elements. No props, no variants, no actual component library functionality that modern teams expect.
  3. Reference field nightmare: Can't mix reference types, can't drag-and-drop to reorder (delete everything and re-add in the right sequence), and you're capped at 6-10 reference fields per collection. Need complex filtering logic? Write custom JavaScript and pray.
  4. Developer bottleneck: Only one person can use "Designer mode" at a time. Imagine GitHub where only one developer can commit changes. Our 4-person team constantly Slacked "Can I get Designer access?" while urgent fixes sat in a queue.
  5. Custom code torture: 10k character limit forces external hosting, zero live preview (publish and wait 2-3 minutes to see if your JavaScript worked), and no version control. One typo means starting over.

With rapidly expanding content initiatives including new specialized blogs planned for 2025, it became clear that a more powerful, developer-friendly CMS solution was needed.

Why Sanity CMS?

After evaluating several headless CMS options, we selected Sanity for several key reasons:

Content Flexibility

Sanity's schema-based approach and Portable Text format offered unparalleled flexibility for structuring complex content types.

Developer Experience

First-class React integration and ability to customize the editing environment with JavaScript provided complete control.

Content Relationships

Reference fields and backlink capabilities allowed for sophisticated content relationships that would significantly improve content management.

Scaling Potential

Sanity's performance at scale and robust API made it suitable for an enterprise-level content operation serving hundreds of thousands of visitors.

Migration Strategy and Timeline

Rather than attempting a "big bang" migration, we implemented a phased approach that minimized risk and allowed for iterative improvements:

1

Initial Setup and Evaluation (Q1 2024)

We began with a proof-of-concept implementation focused on field parity with Webflow and building essential infrastructure. This phase included deploying Sanity Studio and implementing live preview functionality.

2

Architecture and Structure Development (Q2 2024)

We made critical architecture decisions including monorepo setup, caching strategy, and data structure approach. This phase established our technical foundation and best practices.

3

Custom Development (Q3 & Q4 2024)

We developed custom embeds/widgets to replace Webflow functionality, implemented bulk actions for content management, and enhanced the Sanity Studio UI for non-technical users.

4

Content Migration and Transition (Q1 2025)

After thorough preparation, we executed the migration of all blog content, implemented a 24-hour content freeze during the critical transition period, and successfully moved content management entirely to Sanity.

Technical Implementation

Content Modeling in Sanity

We approached content modeling with a focus on flexibility, performance, and maintainability. Key decisions included:

  • Flat data structure: We kept data structures flat rather than deeply nested, which significantly improved GROQ query performance.
  • Reference fields: We implemented reference fields to create relationships between content types (e.g., blog posts and authors).
  • Custom object types: Instead of using raw HTML embeds, we created structured Sanity objects for custom elements like comparison widgets, CTAs, and other interactive components.

For example, here's how we approached the schema for blog posts:

JavaScriptschemas/documents/blogPost.js
// Example blog post schema in Sanityexport default {  name: 'blogPost',  title: 'Blog Post',  type: 'document',  fields: [    {      name: 'title',      title: 'Title',      type: 'string',      validation: Rule => Rule.required()    },    {      name: 'slug',      title: 'Slug',      type: 'slug',      options: {        source: 'title',        maxLength: 96      },      validation: Rule => Rule.required()    },    {      name: 'publishedAt',      title: 'Published At',      type: 'datetime',      validation: Rule => Rule.required()    },    {      name: 'authors',      title: 'Authors',      type: 'array',      of: [{ type: 'reference', to: [{ type: 'author' }] }]    },    {      name: 'content',      title: 'Content',      type: 'array',      of: [        { type: 'block' },        { type: 'comparisonAccordion' },        { type: 'g2Comparison' },         { type: 'productCta' },        { type: 'emailForm' },        { type: 'image' },        { type: 'table' }      ]    },    {      name: 'webflowId',      title: 'Webflow ID',      type: 'string',      hidden: true    },  ]}

Migration Approach

Our migration process focused on preserving data integrity while transforming content into Sanity's structured format:

  1. ID preservation: We maintained reference integrity by preserving original Webflow IDs with an "imported-" prefix.
  2. Chunked migration: Rather than attempting to import everything at once, we chunked large collections to manage the process more effectively.
  3. HTML to Portable Text conversion: We converted Webflow's rich text HTML to Sanity's Portable Text format while preserving styling and structure.
  4. Custom embed transformation: We identified all custom embeds used across blog posts and created corresponding Sanity objects.

A critical part of our approach was running extensive tests with sample content before attempting the full migration. We also implemented a backup strategy that created snapshots every 2 days with a 14-day retention period.

Front-end Integration

We integrated Sanity with our Next.js front-end using a carefully considered caching and revalidation strategy:

  • Path-based revalidation: After evaluating time-based, tag-based, and path-based approaches, we implemented path-based revalidation as our primary strategy.
  • Selective API usage: We used Sanity's API CDN for most content but implemented direct API access for frequently updated collections.
  • GROQ optimization: We carefully optimized our GROQ queries to maintain performance while minimizing API costs.

For image handling, we transitioned from the Sanity-specific image component to standard Next.js Image components, which provided better optimization and performance.

Challenges and Solutions

Custom Embeds Complexity

Challenge: Webflow blogs contained numerous custom embeds and widgets that needed to be recreated in Sanity's structured format.

Solution: We systematically identified all embed types across 900+ blog posts, created corresponding Sanity object schemas, and developed migration scripts to transform embedded HTML into structured objects.

Caching and Performance

Challenge: Balancing content freshness against API costs and performance presented significant challenges.

Solution: We discovered Sanity's API CDN has a 60-second TTL, which affected our revalidation strategy. We implemented path-based revalidation using webhooks to invalidate specific content paths when changes occur.

Reference Integrity

Challenge: Preserving relationships between content types (like blog posts and authors) during migration.

Solution: We preserved Webflow IDs during migration by adding an "imported-" prefix, which maintained all reference relationships while clearly identifying imported content.

Migration Timing

Challenge: Coordinating a seamless transition without disrupting ongoing content operations.

Solution: We implemented a 24-hour content freeze during the final migration phase and timed the deployment to avoid team OOO periods. This approach allowed for a controlled transition with minimal disruption.

Results and Benefits

The migration to Sanity delivered significant improvements across multiple dimensions:

Technical Benefits

  • Structured content: Content is now properly structured with well-defined relationships, making it more maintainable and reusable.
  • Improved editor experience: The custom Sanity Studio provides a more intuitive and efficient workflow for content creators.
  • Enhanced development workflow: Monorepo architecture simplifies dependency management and streamlines development.
  • Reference management: Content relationships are now explicit and traceable, with the ability to view backlinks and references.

Business Benefits

  • Scalability: The content infrastructure can now support planned growth initiatives, including new specialized blogs.
  • Content efficiency: Content teams can update referenced content (like product details) in one place, automatically updating all instances.
  • Reduced technical debt: The migration eliminated accumulated technical debt from Webflow workarounds.
  • Improved publishing workflow: Features like scheduled publishing, bulk actions, and custom field editors have streamlined content operations.

Key Learnings

Technical Insights

  • Flat vs. nested data: Keeping data structures flat significantly improves GROQ query performance compared to nested structures.
  • Caching considerations: Understanding Sanity's API CDN TTL (60 seconds) is crucial for designing an effective caching strategy.
  • Image handling evolution: The recommended approach for images changed from specialized Sanity components to standard Next.js Image components.
  • Proper staging environment: A dedicated QA dataset for testing schema changes before production implementation is essential.

Project Management Insights

  • Phased migration: A collection-by-collection approach was more manageable than attempting to migrate everything at once.
  • Specialist collaboration: Engaging CMS specialists (Tinloof) accelerated implementation and provided valuable best practices.
  • Deployment timing: Avoiding major deployments before team OOO periods reduced unnecessary risk.
  • User training: Investing in documentation and training sessions was essential for successful user adoption.

When Should You Migrate from Webflow to Sanity?

Based on our experience, these are the key indicators that it might be time to consider migrating from Webflow to Sanity:

Complex Content Relationships

When you need sophisticated content relationships and references that Webflow's CMS can't easily support.

Large Content Volume

When managing hundreds of content items becomes unwieldy in Webflow's interface and architecture.

Developer-First Approach

When you need programmatic control over your content models and editing experience.

Custom Editing Experience

When you want to create tailored editing interfaces for different content types and user roles.

Ready to Transform Your Content Infrastructure?

If you're considering migrating from Webflow to Sanity CMS, ContentWrap can guide your team through the process with insights from real-world implementation experience.

Schedule a Consultation

About the Author: Tamba Monrose is a senior software engineer with experience at Ramp, Coinbase, and HubSpot. He specializes in frontend development and content management systems, with particular expertise in implementing and optimizing Sanity CMS deployments.