Move a Webflow site into Sanity end to end. Audit the content, model it as structured data, pull it through the Webflow Data API, resolve references, migrate assets, and convert rich text to Portable Text. Built to adapt to your own project with an agent.
1. Introduction
See how AI changes what a Webflow-to-Sanity migration involves, and set up this guide as a persistent reference for your AI editor.
Planning your migration
2. Audit your Webflow content
Answer the scope and integration questions that require human judgment before the API fetch gives you the rest of your content inventory automatically.
3. Recognize Webflow's content modeling patterns
Identify eight patterns in your Webflow collections that signal a better structure is possible in Sanity.
Environment setup
4. Export from Webflow and connect the Data API
Export your Webflow site code and fetch collection data, pages, and component definitions from the Webflow Data API.
5. Initialize Sanity and install the migration toolkit
Scaffold a Sanity project, add your schemas, and install the migration toolkit so AI agents can work with your content.
Designing your content model
6. Map collections to Sanity document types
Convert your Webflow collection audit into TypeScript schemas using defineType and defineField, then extract shared field groups into reusable types.
7. Build a page builder with a sections array
Add a sections array to your page document type so editors can compose pages from reusable section schemas.
8. Model custom-template pages as singletons
Create dedicated singleton document types for heavily custom pages, then surface all page types together in a single Studio Pages section using Structure Builder.
9. Model navigation in Sanity
Create a recursive navItem schema and a navigationMenu document type that editors can update without touching code.
10. Create a siteSettings singleton
Set up a singleton document for global site configuration and pin it in Structure Builder so editors always know where to find it.
11. Handle internal links in Portable Text
Choose between raw URL strings and document references for internal links, then build the URL map your extraction scripts will use.
Extracting and transforming content
12. Fetch your collection items from the API
Paginate through every Webflow collection and write items to disk as NDJSON, one record per line, so large collections never accumulate in memory.
13. Run the asset pre-upload pass
Scan your saved API data and Webflow HTML export for every CDN image URL, upload them to Sanity, and save the mapping file that your content scripts will reference.
14. Resolve reference fields from API data
Create the shared helper module that your import scripts use to translate Webflow item IDs into Sanity document references.
15. Convert rich text to Portable Text
Use htmlToBlocks() with custom deserializer rules to convert Webflow rich text fields, including images and HTML embeds, into Sanity Portable Text.
16. Extract static page content using the page DOM API
Fetch the structured DOM for each static page, map component instances to Sanity section types, and seed your page documents with pre-populated content.
Importing to Sanity
17. Import content with the two-pass pattern
Import all documents in two passes. First, build an ID map, then patch references with a streaming approach for large collections.
18. Validate your import in Studio
Check that references resolve, rich text renders, and assets load by inspecting imported documents in Sanity Studio.
Replacing platform features
19. Set up forms, redirects, and sitemap
Configure your form replacement, generate your redirect map as vercel.json, and set up next-sitemap so your new site handles all three automatically.
20. Set up draft mode and visual preview
Wire Next.js Draft Mode and the Sanity Presentation tool together so editors can preview unpublished content on the live frontend.
Cutover
21. Validate your import without a frontend
Run a script that checks document counts, singleton existence, map integrity, dangling references, and SEO coverage before wiring up any frontend.
22. Launch checklist and DNS transfer
Work through the pre-launch checklist, set your DNS TTL, and transfer your domain — then monitor 404s in the hours after launch.
Appendix: Reference
23. AI prompt library and resources
Copy-paste AI prompts for schema generation, import scripts, CSS token extraction, and redirect maps, plus links to the docs and packages used throughout this guide.