React

Teams often choose this setup when they want Webflow to stay in charge of layout and content editing while React handles the parts of the interface that need application-style behavior.

Webflow handles layout, Webflow CMS content, hosting, and responsive design without code. But some interfaces need state management, conditional rendering, and real-time data that go beyond what Webflow's visual tools can produce. ROI calculators, multi-step forms with branching logic, and live data visualizations all require a component-based JavaScript framework to function.

React fills that gap. By embedding React components directly in Webflow pages or using Webflow as a headless CMS for a React frontend, teams can add stateful interactivity to marketing sites without rebuilding them from scratch. Code Components bring React into Webflow's canvas for drag-and-drop use, while DevLink exports Webflow designs as production-ready React code.

This integration is for frontend developers adding interactive features to Webflow-hosted sites, agencies delivering marketing sites alongside React-based applications, and SaaS teams that need marketing pages editable by non-developers while maintaining a shared design system with their product codebase.

How to integrate React with Webflow

What is React? React is a front-end JavaScript library for building user interfaces, created by Meta and now governed by the React Foundation under the Linux Foundation. The former domain reactjs.org redirects to the official docs at react.dev. It uses a component-based architecture where JavaScript functions return markup, a virtual DOM for rendering, and hooks like useState and useEffect for managing state and side effects. The current stable version is React 19.2, released October 1, 2025.

Teams use React with Webflow when a marketing site needs interactive features that Webflow's native Interactions cannot produce — calculators with complex logic, dashboards pulling live API data, or product configurators with conditional rendering. The integration also works in the opposite direction, with Webflow serving as the design and CMS layer for a React or Next.js frontend application.

The React-Webflow integration supports 4 approaches:

• Code Embed elements handle embedding React components directly in Webflow pages via CDN scripts or pre-built bundles.
• Code Components let you import React components into Webflow's visual canvas for drag-and-drop use by designers.
• DevLink component export converts Webflow-designed components into production-ready React code for use in Next.js, Gatsby, or Remix projects.
• The Webflow Data API and React give you full control over headless CMS delivery, form handling, and e-commerce data, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Add React components with Code Embed elements

Embedding React directly in a Webflow page works for interactive widgets, prototypes, and standalone components that need to live alongside Webflow-designed content. This approach uses custom code in head and body tags to load React and mount components into specific positions on the page. Custom code requires a paid Workspace or a paid site plan — free Starter plans cannot use custom code at all.

React components do not render in the Webflow canvas. All testing must happen on the published or staged site. Webflow provides four code injection points: site-wide head code, site-wide footer code, page-level footer code, and Code Embed elements placed directly on the canvas.

Three sub-methods exist depending on project complexity.

Load React via CDN

This method loads React from a CDN without any build step. It works for simple interactive widgets and prototypes that do not require npm packages.

To set up a CDN-loaded React component:

1. Go to Site Settings > Custom Code > Head Code and add the React and ReactDOM CDN scripts from unpkg.com. For development, add Babel standalone to support JSX syntax in the browser.
2. Drag an HTML Embed element to the target position on the canvas and add an empty mount container: <div id="react-root"></div>.
3. Go to Site Settings > Custom Code > Footer Code and add a script that creates the React component and mounts it to the container using ReactDOM.createRoot().

A production-safe version uses React.createElement() calls instead of JSX, removing the Babel standalone dependency. Babel standalone does in-browser JSX transformation and is not suitable for production use.

<script>
 const { useState, createElement } = React;

 function Counter() {
   const [count, setCount] = useState(0);
   return createElement(
     'div', null,
     createElement('p', null, 'Count: ' + count),
     createElement('button', { onClick: () => setCount(count + 1) }, 'Increment')
   );
 }

 const domNode = document.getElementById('react-root');
 const root = ReactDOM.createRoot(domNode);
 root.render(createElement(Counter));
</script>



The createRoot() mounting pattern is the canonical approach documented at react.dev. When using this method via CDN scripts, only packages available as CDN <script> tags can be used — npm packages are not available without a separate build step.

Embed a pre-built React bundle

For full React component trees using JSX and npm packages, build the app externally with Vite, webpack, or Rollup, then load the compiled bundle into Webflow.

To embed a bundled React app:

1. Configure the bundler to output an IIFE format. In a Vite config, set build.lib.formats to ['iife'] and bundle React into the output since Webflow's environment has no React global.
2. Write a mount entry point that imports createRoot from react-dom/client and renders the app into a target DOM element.
3. Host the compiled bundle externally. The 50,000-character limit per code field makes inlining a production bundle impractical. Use GitHub with jsDelivr CDN, Netlify, Vercel, or Webflow's own Assets panel.
4. Drag a Code Embed element to the canvas and add <div id="react-target"></div>.
5. In Site Settings > Custom Code > Footer Code, add a <script> tag pointing to the hosted bundle with defer to avoid blocking page render.

<script
 src="https://cdn.jsdelivr.net/gh/yourusername/yourrepo@main/dist/my-app.iife.js"
 defer>
</script>



React's DOM manipulation can break Webflow's animation system (IX2). Reinitialize after React mounts by calling window.Webflow?.require('ix2').init() once after initial mount — repeated calls cause performance degradation.

Embed a full React app via iframe

For complete React single-page applications — dashboards, complex forms, or data-heavy tools — an iframe provides full isolation from Webflow's CSS and JavaScript.

To embed via iframe:

1. Build and deploy the React app to a static host like Netlify, Vercel, or GitHub Pages.
2. Drag a Code Embed element to the canvas and add an <iframe> tag pointing to the deployed app's URL.
3. Implement dynamic height resizing using postMessage between the iframe and the parent Webflow page.

Content inside iframes is generally not indexed by search engines. Webflow's Interactions cannot target iframe content, and Webflow's stylesheets do not apply inside the iframe. This method works best for authenticated dashboards or tools where SEO indexing is not needed.

Import React components into Webflow with Code Components

Code Components let developers build React components in an external codebase and publish them to Webflow's visual canvas. Designers and marketers can then drag and drop these components onto pages, configure props and slots, and connect them to Webflow CMS data — all without editing code. This feature reached general availability on September 17, 2025 and is available on CMS and Business site plans and all paid Workspace plans.

Code Components support React hooks, state, effects, and context. They run inside a Shadow DOM boundary, so Webflow's global styles do not cascade into them automatically. Responsive styles must be included within the component's own CSS.

To set up Code Components:

1. Install the Webflow CLI and React packages in a local project: npm i --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react.
2. Create a webflow.json config file specifying the library name, component file patterns, and bundle config.
3. Build React components using the .webflow.tsx file extension convention.
4. Run npx webflow library share to publish components to the Webflow canvas. This requires a Workspace API token and Workspace Admin permissions.

Once published, Code Components appear in Webflow's add panel. Key capabilities include:

• Props and slots configurable directly in the canvas by designers
• Connection to Webflow CMS fields, localization, and Webflow Optimization for A/B testing
• CI/CD via GitHub integration with branch deployments
• Full React functionality including state management and API data fetching

These capabilities make Code Components the most designer-friendly path for bringing existing React UI into Webflow.

Code Components cannot access environment variables — all configuration values must be provided as props. API keys and secrets must never appear in component code since it executes in the browser. External APIs consumed by Code Components must support CORS from the Webflow-hosted domain.

Export Webflow designs to React with DevLink

DevLink's component export converts Webflow-designed components into production-ready React code with CSS Modules, design tokens, and interactions. This is the opposite direction from Code Components — instead of bringing React into Webflow, it brings Webflow designs out into a React codebase. The component export feature is currently in beta. It requires Node.js v20.0.0 or higher and React v16.18.0 or higher.

This approach works for teams that want designers iterating in Webflow while developers consume the output in a Next.js, Gatsby, or Remix project. Only elements converted to Webflow Components can be exported — raw elements are not included in the sync.

To set up DevLink component export:

1. Install the Webflow CLI in a React-based project: npm install -D @webflow/webflow-cli.
2. Run webflow auth login to authenticate via browser and generate a .env file with the site ID and API token.
3. Create a webflow.json config in the project root specifying the site URL, output directory, and CSS Module settings.
4. In Webflow, select elements and create Components from them. Only Components are eligible for export.
5. Run webflow devlink sync to generate a devlink/ directory containing React components, CSS modules, a global CSS file, and a DevLinkProvider wrapper.
6. Add the DevLinkProvider to the root layout of the React application and import the global CSS file.

After design changes in Webflow, re-run webflow devlink sync to pull updates. This is a one-way synchronization — design updates must originate in Webflow and sync to the React codebase.

Key limitations to plan for:

• Forms require decomposition — export individual input and button components separately and assemble them with a library like react-hook-form
• React Server Components in Next.js may need the "use client" directive for interactive components
• Site-level and page-level custom code is not exported — only code inside Code Embed elements within a Component

These constraints matter most when you are planning how much logic should live in exported components versus the surrounding app.

For Next.js projects, configure next.config.js to allow Webflow-hosted images in the images.remotePatterns array. Framework-specific setup guides cover Next.js, Gatsby, and Remix.

Build with the Webflow and React APIs

For headless CMS delivery, form processing, e-commerce storefronts, and real-time data sync, the API integration path provides full programmatic control. This approach requires server-side development — a backend proxy must sit between the React frontend and the Webflow API because API tokens cannot be exposed in browser-executed code.

The available APIs include:

• Webflow's Data API v2 handles CMS collections, items, products, orders, forms, and site publishing
• Webflow webhooks trigger real-time events for CMS changes, form submissions, and e-commerce activity
• The Pages and Custom Code endpoints allow page-level custom code updates and page DOM retrieval

Together, these APIs cover the server-side integration layer that embedded React components alone cannot provide.

All requests use Bearer token authentication. Site tokens are generated from Site Settings > Apps & Integrations > API Access and scope to a single site. Workspace tokens support multi-site access, while OAuth 2.0 tokens are used for marketplace apps and multi-user integrations with granular scopes like cms:read, cms:write, ecommerce:read, and sites:write.

Fetch CMS content in a Next.js frontend

The most common API pattern uses Webflow as a headless CMS with a Next.js React frontend. Content editors work in Webflow's visual CMS while the Next.js app consumes JSON from REST endpoints.

To implement headless CMS delivery:

1. Store the Webflow API token and collection ID in .env.local — never in client-side code.
2. Fetch CMS items from GET /v2/collections/{collection_id}/items/live in a Next.js Server Component. The /items/live endpoint returns only published content, avoiding draft items on the public frontend.
3. Use Next.js ISR with next: { revalidate: 3600 } to cache responses and stay within API request limits. Cached requests to the CDN have effectively no rate limits — only uncached origin requests count against plan limits.

// app/blog/page.tsx
export default async function BlogPage() {
 const res = await fetch(
   `https://api.webflow.com/v2/collections/${process.env.WEBFLOW_COLLECTION_ID}/items/live`,
   {
     headers: {
       Authorization: `Bearer ${process.env.WEBFLOW_API_TOKEN}`,
       Accept: 'application/json',
     },
     next: { revalidate: 3600 },
   }
 );
 const { items } = await res.json();
 return (
   <ul>
     {items
       .filter(item => !item.isDraft && !item.isArchived)
       .map(item => <li key={item.id}>{item.fieldData.name}</li>)}
   </ul>
 );
}



For collections with more than 100 items, paginate with offset and limit query parameters — the API returns a maximum of 100 records per request.

Sync content in real time with webhooks

Webhooks enable on-demand cache revalidation when CMS content changes, removing the need for fixed revalidation intervals.

To set up webhook-driven sync:

1. Register a webhook via POST /v2/sites/{site_id}/webhooks with a triggerType of collection_item_changed or collection_item_published.
2. Create a Next.js API route handler that receives the webhook payload, reads the triggerType and slug fields, and calls revalidatePath() or revalidateTag() to invalidate the cached page.
3. For webhooks created through OAuth apps, verify the x-webflow-signature HMAC-SHA256 header before processing. Webhooks created via the dashboard or site tokens do not include signature headers.

import { revalidateTag } from 'next/cache';

export async function POST(req) {
 const payload = await req.json();
 if (['collection_item_changed', 'collection_item_published'].includes(payload.triggerType)) {
   revalidateTag('webflow-cms');
 }
 return new Response('OK', { status: 200 });
}



Confirmed webhook event types include collection_item_created, collection_item_changed, collection_item_deleted, collection_item_published, form_submission, ecomm_new_order, ecomm_order_changed, and ecomm_inventory_changed. Up to 75 webhooks per trigger type can be registered per site. This makes webhooks a practical way to keep React frontends in sync with Webflow-managed content.

What can you build with the React Webflow integration?

Integrating React with Webflow lets you add stateful, data-driven interfaces to visually designed sites without rebuilding the entire frontend in code.

• ROI and pricing calculators: Build calculators with complex conditional logic, real-time computation, and input validation that update results as users adjust sliders and dropdowns. Publish as a Code Component so marketing can place it on any landing page and configure labels through Webflow's canvas.
• Headless blog or content hub: Use Webflow CMS as the content backend while a Next.js frontend handles server-side rendering, custom layouts, and advanced filtering. Content editors publish in Webflow's visual interface. The React app consumes items via the Data API with ISR caching.
• Multi-step lead qualification forms: Create forms with branching logic, real-time field validation, and CRM routing that go beyond Webflow's native single-step forms. Mount the React form inside a Code Embed element or deliver it as a Code Component with configurable props for different landing pages.
• Product configurators and booking tools: Build interactive product option selectors, live preview generators, or calendar-based scheduling interfaces. React handles state and conditional rendering while Webflow provides the surrounding page design, CMS content, and hosting infrastructure.

These examples show how the integration can support both embedded widgets and larger headless frontend patterns.

If you need more control over real-time data delivery, user authentication, or e-commerce order management, the API integration path covers those cases with full flexibility.