Socket

To customize the HTML of a view, add custom af-sock=”name” attributes in Webflow to any elements that you’d like to modify, then re-export and migrate the project again.

Such elements are called socket elements and can be customized inside your components using plugs. Continue reading there to find out how to use them from your React components.

Example

Webflow

<div af-sock="nav">
  <a af-sock="home">
    <img af-sock="logo" />
  </a>
  <a af-sock="about-us">About</a>
</div>

A sock tree is generated from this tree of socket names during migration.

Socket naming

• Socket names set in Webflow should have a kebab-case form. This is converted to camelCase during migration.
• They should be kept short. Related elements can be grouped together in a parent socket.
• The type of the element (link, image) should generally not be part of the name.