DevLink in the Designer

Learn how to use DevLink in the Webflow Designer.

DevLink lets you build React components directly in the Webflow Designer. As the designer, now you have a more direct way of handing designs off to your developer. DevLink also allows syncing of CSS and component properties so your developer gets production-ready React components automatically.

Best practices for designer and developer workflows

When collaborating with developers, we recommend designers communicate clearly about which components they’ve updated and when they’re ready. Because DevLink’s sync overwrites global styles and pre-existing components, it may overwrite a developer’s work in React.

While there are workarounds for this (e.g., moving components out of the DevLink folder if developers want to update them without them being overridden by a new sync), the best practice is for the designer to communicate which components have changed since the last sync. In this case, it may be helpful for designers to utilize the Site Activity log.

Styling best practices

When styling your components, make sure you’re setting styles on the components themselves — not setting them on the Body element. Any styles you set on the Body won’t be imported with your React components.

DevLink configuration in the Webflow Designer

You can find important DevLink commands and configuration code in the Components panel of the Webflow Designer. This includes commands for installing, configuring your React project and syncing Webflow to your React project. When a developer syncs Webflow to their React project with DevLink, any changes you’ve made in the Webflow Designer will appear in code.

To access the reference modal, go to the Components panel and click the “Export components” icon on the top right of the panel.

Properties

DevLink supports component properties, which allow you to set unique values on component instances. This is useful if your app has recurring layout patterns where the content inside changes or hides. Properties give you the flexibility to change this content on each instance of the component.

When designing, you can set properties on elements in component instances. The property’s name in Webflow will also be the property’s name in your React components. Then, you can set the component property values in your React project. This gives you greater flexibility over updating component content — you can do so in Webflow, or directly in your React project.

Learn more about how to define component properties.

Runtime props

Runtime props are DevLink-specific properties that you can add to your components in Webflow for use in your React project. Runtime props allow you to add more complex properties to your components that Webflow doesn’t currently support out-of-the-box, like custom onClick handlers.

You can set runtime props on main components or component instances in Webflow. To do so, edit a component, go to the Element settings panel > DevLink > Runtime props, then connect it to a property. The property’s name in Webflow will also be the property’s name in your React project.

In your React project, you can set the runtime prop to trigger a function (e.g., an interaction, a content change, a style change) from an event. The runtime prop takes an object value (e.g., a function).

Slots

A slot is a DevLink-specific property that takes a component as its value. Slots allow you to nest components inside of components within your React project. This is useful when you have custom React components that cannot be built natively in Webflow (e.g., if the components rely on third-party libraries or need support for custom logic), but you want to nest them in a Webflow-made component.

To set a slot property on a component, edit the component, go to the Element settings panel > DevLink > Slot, then connect it to a property.

Then, you can pass components into the slot property of the React component.. For instance, if you have a logo component and a div component with a “logoSlot” slot property, you can write logoSlot = {<logo / >} to nest the logo inside of your div component.