1. Why Webflow + React, and where it's strong
Webflow's actual strength is content, not commerce. It's a genuinely capable visual CMS — designers build real structured content models without writing code — and a growing number of teams want that content surfaced through a custom React or Next.js frontend instead of Webflow's own hosted rendering. That's a fundamentally different (and better-supported) problem than trying to run a full Shopify-class store on Webflow Ecommerce.
2. Method 1: Webflow Data API v2
The most direct route. A REST API that returns CMS collection items as JSON — generate a site token in Webflow project settings, then fetch:
const res = await fetch(
`https://api.webflow.com/v2/collections/${collectionId}/items`,
{ headers: { Authorization: `Bearer ${process.env.WEBFLOW_API_TOKEN}` } }
);
const { items } = await res.json();
// items[].fieldData holds your CMS fields — title, slug, custom fields, etc.Simple, direct, and framework-agnostic — this is the same approach whether you're rendering in React, Astro, or SvelteKit. The catch is the rate limit: 60 requests/minute per site, noticeably tighter than Shopify's 1,000/min. Cache aggressively at the edge; don't call this on every page render.
3. Method 2: Code Components
Reached general availability September 17, 2025 — a genuinely current feature, not legacy tooling. Code Components let developers write real React components and import them directly into Webflow's visual canvas, so designers can drag-and-drop a component a developer built rather than the two working in fully separate tools. This is the right method when Webflow itself remains the deployed frontend and you want React-authored pieces inside it, rather than exporting away from Webflow entirely.
4. Method 3: DevLink
The inverse direction: DevLink exports Webflow-designed components into React, Next.js, or Astro code, keeping the visual design and your codebase in sync as designers iterate. This is the fit when the storefront itself is built and deployed as a separate Next.js app, but a design team wants to keep owning visual layout in Webflow rather than in code.
5. Which method for which team
| Situation | Use |
|---|---|
| Building a separate Next.js frontend, want Webflow purely as content backend | Data API v2 |
| Webflow stays the deployed site, developers add React pieces to it | Code Components |
| Designers iterate visually in Webflow, engineers ship the actual app elsewhere | DevLink |
6. The ecommerce gaps to know first
If the plan extends beyond content into running an actual store on Webflow Ecommerce, know the real limits going in: no multi-currency support, and as of 2025, localization and Webflow Ecommerce are explicitly incompatible — you cannot run a multilingual storefront on native Webflow Ecommerce. Webflow's own Logic automation feature was also sunset June 27, 2025, pushing workflow automation to external tools. None of this rules Webflow out for commerce; it means the honest framing is "good headless CMS, limited commerce backend" rather than a Shopify-equivalent claim.
If you need real commerce capability — multi-currency, richer inventory, a checkout you can actually customize — without leaving Webflow for content, pairing Webflow's CMS with a separate commerce backend (Shopify, Wix Stores) through a bridge layer covers the gap without a full platform migration.
7. Frequently asked questions
How do I connect Webflow CMS to a React app?
Via the Webflow Data API v2 — a REST API that returns your CMS collection items as JSON. Generate a site API token in Webflow's project settings, then fetch collection items from your React or Next.js app like any other REST API.
What are Webflow Code Components?
A feature that reached general availability September 17, 2025, letting you import real React components into Webflow's visual canvas — designers can drag-and-drop components a developer wrote, rather than the two working in fully separate tools.
What is Webflow DevLink?
A tool that exports Webflow-designed components into React/Next.js/Astro code, keeping the visual design and the codebase in sync. Useful when a design team owns visual layout in Webflow but the storefront itself is built and deployed as a separate Next.js app.
What is the Webflow Data API rate limit?
60 requests per minute per site on standard API access. This is noticeably tighter than Shopify's Storefront API (1,000/min) or Wix's Stores API — plan for aggressive edge caching if you're pulling Webflow CMS content into a high-traffic frontend.
Is Webflow good for ecommerce, not just content?
It's a real but limited commerce backend: no multi-currency support, and localization/multilingual features are explicitly incompatible with Webflow Ecommerce as of 2025. Webflow is strong as a headless CMS; treat its commerce layer as good-enough-for-simple-catalogs rather than a Shopify-class backend.
Content in Webflow. Commerce wherever it's strongest.
Paste your store URL on the homepage — Trama bridges any frontend to real commerce data across Wix, Shopify, and Webflow, so your content and your checkout don't have to live on the same platform.