Migrate a published Webflow site into a Sanity project.
This repository is the public slice of FocusReactive's internal migration tooling, and it is cut down in two ways. It covers one path only — Webflow → Sanity — and the pipeline behind that path is itself a simplified, but not hollowed out version of the internal one, though — it runs end-to-end on its own and hands you a working project.
A pnpm/turbo workspace with a studio package and a web package, generated from the live site:
- Document types for every Webflow CMS collection, with their fields typed and their items seeded into the dataset
- Section blocks as real React components, registered in the page builder and composable in the studio
- Header and footer as chrome documents, rendered by the app shell
- Design tokens — colours, type scale, spacing, radii, shadows — as CSS variables
- Images and videos as Sanity image and file assets, referenced by the content that uses them
- Webfonts copied into the project and served from it
- A seed that fills the dataset from the migration's own artifacts, so the project has content the first time you open it
pnpm install
pnpm exec playwright install chromiumLaunch Claude Code and call migration skill:
/migrate https://your-webflow-site
The migration runs in a workspace beside this repository (../migrations/<project-name> by
default, set in migrate.config.json); this repository is never written to by a run.
Ten phases, in execution order:
| phase | what it does |
|---|---|
probe |
fetches the home page, robots.txt, the sitemap and a 404 page |
detect |
scores the home page against the Webflow signal registry and gates the run |
inventory |
crawls the site into its page list and its CMS collections |
snapshot |
freezes every page: raw HTML, post-hydration DOM, computed styles, screenshots |
assets |
inventories every image, video and font family behind a stable asset id |
design-tokens |
reads the frozen styles into a token set and emits the theme |
discovery |
names the page's blocks, the site's globals and its collections |
synth |
authors each surface: field schema, content, and a React component |
layout |
composes each route from block instances with their field values |
generate |
writes the Sanity Studio + Next.js project, then installs, seeds, builds and lints it |
Run state lives in the project's .migration/ directory: manifest.json records every step and
its status, and artifacts/ holds the intermediate representation each phase reads and writes.
Every step is idempotent and every run is resumable — point the skill at an existing project and it
picks up at the first step that is not done.
| guide | answers |
|---|---|
| Detecting Webflow from a published page | How do you tell that a site is built with Webflow, and how confident can you be? |
| Reading a Webflow content model from a published site | Which pages are CMS items, which collection does each belong to, and how do you find them all without an API token? |
| Webflow asset URLs to Sanity image assets | Which of these CDN URLs are the same image, and how does it become a Sanity image asset? |
| Freezing a published site so the migration is verifiable | How do you prove a rebuilt page matches the original, when screenshots cannot? |
| Webflow sections to Sanity blocks | Webflow has no block model — so where do the Sanity block schemas and the Portable Text come from? |
| Reference (Webflow) | webflow-to-sanity-migration-demo |
| Migrated (Sanity) | nova-x.webflow.io |
This repository is maintained by FocusReactive — a specialized Next.js and Headless CMS migration agency.
We help enterprise businesses migrate from legacy monoliths (WordPress, Drupal, Sitecore) and visual builders (Webflow, Framer) to modern stacks like Sanity, Payload CMS, Storyblok, and MedusaJS.
The pipeline in this repository is one path out of that matrix, published in full. The internal version of the same tooling covers the others — if your migration path isn't Webflow → Sanity, ask us about it.
- Expertise: Verified Sanity, Payload, and Storyblok partners.
- Speed: We use our proprietary CMS Kit to speed up migrations by 40%.
- SEO & Performance: Zero downtime migrations with 100/100 Lighthouse scores.
👉 Get a Free Migration Consultation or contact us at build@focusreactive.com.
MIT — see LICENSE.