DevLink within the Creator

DevLink allows you to construct React elements directly in the Webflow Creator. As the creator, you now possess a more direct approach to transferring designs to your programmer. DevLink also facilitates the synchronization of CSS and component attributes so that your programmer receives React components ready for production automatically.

Important: This guide elucidates the distinctive UI of DevLink in the Webflow Creator. To discover how to activate and utilize DevLink’s code synchronization, please refer to our extensive DevLink developer documentation.

This article will cover:

1. Optimal practices for creator and programmer workflows
2. Styling recommendations
3. DevLink setup in the Webflow Creator
4. Attributes
5. Dynamic props
6. Containers

Optimal practices for creator and programmer workflows

When collaborating with programmers, we suggest creators communicate explicitly about the components they’ve modified and when they’re prepared. Since DevLink’s synchronization overwrites global styles and pre-existing components, it might erase a programmer’s efforts in React.

Although there are workarounds for this (e.g., relocating components from the DevLink directory if programmers wish to update them without being overshadowed by a new synchronization), the best approach is for the creator to denote the components modified since the last synchronization. In this scenario, it might be beneficial for creators to leverage the Site Activity log.

Styling recommendations

While styling your elements, ensure you apply styles to the components themselves instead of setting them on the Body element. Any styles set on the Body won’t be included with your React components.

DevLink setup in the Webflow Creator

You can locate crucial DevLink directives and configuration code in the Components panel of the Webflow Creator. This encompasses directives for installation, configuring your React project, and synchronizing Webflow with your React project. When a programmer synchronizes Webflow with their React project utilizing DevLink, any alterations made in the Webflow Creator will manifest in the code.

To access the reference modal, navigate to the Components panel and select the “Export components” icon at the top right of the panel.

Attributes

DevLink supports component attributes, permitting you to define distinct values on component instances. This is beneficial if your application has recurring layout patterns where the internal content varies or hides. Attributes grant you the flexibility to modify this content on each instance of the component.

During design, you can define attributes on elements in component instances. The attribute’s denomination in Webflow will also correspond to the attribute’s designation in your React components. Subsequently, you can specify the component attribute values in your React project. This affords you greater flexibility in updating component content – you can do so in Webflow, or directly in your React project.

Important: DevLink operates unidirectionally and doesn’t transmit React updates back to Webflow.

Explore more about defining component attributes.

Dynamic props

Dynamic props are specialized properties in DevLink that you can append to your components in Webflow for application in your React project. Dynamic props enable you to incorporate more intricate properties to your components that Webflow doesn’t currently support out-of-the-box, like customized onClick handlers.

Important: We advise consulting with an individual familiar with React before setting up dynamic props on your components.

You can assign dynamic props to primary components or component instances in Webflow. To achieve this, modify a component, proceed to the Element settings panel > DevLink > Dynamic props, then link it to a property. The property’s denomination in Webflow will also match the property’s name in your React project.

In your React project, you can establish the dynamic prop to trigger a function (e.g., an interaction, a content modification, a style adjustment) from an event. The dynamic prop accepts an object value (e.g., a function).

Containers

A container is a specialized property in DevLink that accepts a component as its value. Containers enable you to embed components inside components within your React project. This proves handy when you possess tailored React components that cannot be constructed natively in Webflow (e.g., if the components rely on third-party libraries or necessitate support for custom logic), yet you desire to nest them in a Webflow-made component.

Important: We propose seeking advice from an individual experienced in React before establishing containers.

To configure a container property on a component, modify the component, navigate to the Element settings panel > DevLink > Container, then associate it with a property.

Subsequently, you can transfer components into the container property of the React component.. As an illustration, if you own a logo component and a division component with a “logoSlot” container property, you can inscribe logoSlot = {<logo / >} to nest the logo inside your division component.