Component export using DevLink

Updated

You can build components in Webflow, then export them to React using DevLink.

DevLink also syncs CSS and component properties, so developers get production-ready React components automatically.

Note

The private beta formerly called “DevLink” is now “component export” — a sub-feature of DevLink. This beta is closed to new users, but any customer who configures a Webflow Cloud app will get access automatically.

DevLink configuration in Webflow

You’ll find important DevLink commands and configuration code in our developer documentation. This includes how to install DevLink, configure your React project, and sync it with Webflow. When you sync, any changes from the Webflow canvas will show up in your code.

To access the reference modal:

  1. Open the Components panel
  2. Click the Export components icon in the top right

Properties

All component properties set in Webflow are converted to React props in the exported code. This is useful for recurring layout patterns with dynamic content. You can update prop values either in Webflow or directly in your React project.

The property name in Webflow is retained in React, giving you consistent control across design and code. Learn more about defining component properties.

Runtime props

Runtime props are DevLink-specific and let you add more complex functionality, like custom onClick handlers, not supported natively in Webflow.

Note

We recommend consulting with a React developer before using runtime props.

To set runtime props:

  1. Edit the component
  2. Go to the Element settings panel
  3. Click DevLink > Runtime props
  4. Connect the prop to the element

You can then set the runtime prop in your React project to trigger a function from an event.

Slots

Slots are DevLink-specific props that let you nest components within others in your React project — useful when custom React components can’t be built natively in Webflow. We recommend working with a React developer when using slots.

Note

Component slots (used in native Webflow) are not currently supported in DevLink.

To create a slot property:

  1. Edit the component
  2. Go to the Element settings panel
  3. Click DevLink > Slot
  4. Connect the slot to the element

Then, in React, pass components to the slot, like logoSlot = {<Logo />}.

Best practices for designer and developer workflows

When collaborating, designers should communicate clearly about which components have been updated and when they’re ready for sync. Because syncing overwrites global styles and pre-existing components, it can unintentionally overwrite developer changes.

As a workaround, developers can move components out of the DevLink folder if they need to avoid being overridden. However, the best practice is for designers to notify developers of changes — using tools like the Site Activity log.

Related articles