Component Architecture
You can design components in Webflow the same way you normally would, using classes, most elements, and interactions. DevLink takes care of turning those designs into React components.
By following these guidelines, you’ll make sure your components export cleanly and behave as expected in your React app.
Supported elements
The following Webflow elements are supported for export through DevLink:
Layout
Interactive
Media and Content
Ecommerce and CMS-specific elements are not supported
Ecommerce and CMS-specific elements aren’t supported in Exported Components.
Use DevLink Slots instead of Component Slots
Component slots aren’t supported in Exported Components. Please see documentation on how to use DevLink Slots instead.
Component architecture
When building components in Webflow, you can choose between two main approaches to component architecture, or even mix them together based on your specific needs:
Complex components
Larger, self-contained components that represent complete UI sections or features. They’re ideal when you want to maintain consistency between your Webflow site and React app for entire sections of your interface.
Use these for components that need to look and behave identically across both platforms
Examples:
- Navigation bars (with all their states and interactions)
- Complete pricing tables (with all cells and styling)
- Full footers (with all links and sections)
- Entire page sections (like hero sections or feature blocks)
Atomic components
Smaller, reusable building blocks that form the foundation of your design system. They’re perfect for creating a consistent look and feel across your application.
Use these for basic UI elements that you’ll combine in different ways
Examples:
- Buttons (with different variants)
- Headings (with different sizes)
- Links (with different styles)
- Cards (with different layouts)
Forms
Design forms so engineers can choose between two predictable build paths:
Export a full Webflow form as one component
Export a whole Webflow form for simple, lightweight flows when you don’t need controlled inputs or complex validation.
Add a runtime prop to the Form in Webflow so apps can pass handlers like onSubmit
.
In React, treat the exported form as an uncontrolled form: prevent default, read values via FormData
, and post to your endpoint. If your handler throws, render the form’s Error
state; otherwise show Success
and map these directly to Webflow’s built-in states.
Example
This example uses a whole Webflow form exported as one React component. The form stays visually identical to your Webflow design, but in your React code you pass it a runtime prop called formProps
. That prop lets you hook into the form’s submit event.
NewsletterSignupForm
is your exported Webflow form, now usable as a React component. It already includes the fields, labels, success message, and error message you styled in Webflow.formProps
is a runtime prop that lets you pass an object that can include handlers likeonSubmit
.onSubmit
function- The handler prevents the browser’s default form submission.
- It collects the field values with
new FormData(e.currentTarget)
. - It posts that data to your app’s backend (here: /newsletter-signup).
- If the request fails, it throws an error. That error tells the form to switch to its Error state. If the request succeeds, the form automatically shows its Success state.
- Success/Error states These are the states you set up visually in Webflow. The exported component just switches between them depending on whether your submit handler finishes or throws.
Compose forms from exported Webflow elements
Instead of exporting a whole form, you can export individual inputs and buttons and build your own <form>
in React. This gives you full control over:
- Validation (for example, with react-hook-form + Zod)
- Error messages (announced with aria-invalid and aria-describedby)
- Submission state (disable the button while sending, show a spinner)
- Success handling (show a toast, banner, or redirect)
This approach keeps the Webflow design but lets you manage all behavior in React.
In this example, you export the EmailInput
and SubmitButton
elements from Webflow. You then assemble them in your own <form>
in React. You use react-hook-form to handle the form’s state and validation.
- React manages validation and errors with
react-hook-form
. - An error message is displayed and announced when validation fails.
Success handling is left to the developer (toast, banner, redirect, etc.).
Custom Code
DevLink doesn’t export site or page-level custom code (e.g. code added in a page’s <head>
or <body>
). It also doesn’t preserve plain class selectors because DevLink applies unique namespaces to every component.
If you need custom CSS or JS with a DevLink component, add it using a Code Embed element placed inside the component.
Adding custom CSS
- Add a Code Embed inside your Webflow component.
- Wrap your CSS in
<style>
tags. - Target DevLink’s namespaced classes with an attribute selector:
Adding custom JavaScript
The Code Embed element also supports <script>
. Place scripts here only if they’re specific to the component. For logic, prefer handling interactions in your React/JS app.
Repeatable lists
When rendering lists of data in an exported component, split the implementation into:
-
Container component defines the overall list structure and exposes a slot property for content.
-
Item component defines how each item is rendered.
This pattern keeps layouts reusable, rows portable, and responsibilities clear.
Example: User table
Create the following components in Webflow:
UserTable
— table structure with a DevLink slot property namedtableContent
.UserTableRow
— a row layout for a single user.
In React, you can use the UserTable
component to render the outer table and then pass it a list of UserTableRow
components (hydrated with your own data) with the tableContent
prop.
Accessibility
DevLink components inherit their accessibility features from the Webflow elements they’re built upon. To ensure your components meet accessibility standards, follow Webflow’s accessibility guidelines.