Skip to main content

Adding React Components

You can add your own React components inside your Webflow pages by using the replacer function. Open up the /design-sync/replace.js file. The replacer function will run for every element found. You can use the node object to see if it's the element you want to replace. When you've found your element, you can return a new React component, which will be rendered instead of the original Webflow element.

In this example, we're replacing every <p> element with an ID of "replace-me" with a new React component:

export default function replace(node){

if(node.tagName == `DIV` && node.attribs.id == `replace-me`){
return (
<div>Replaced!</div>
)
}

}