Code Components

Where to find it

For one project:

1. Open your project.
2. Go to Settings.
3. In General settings, find Include Code Components.

For every project in your team:

1. Click Settings in the main sidebar.
2. In Team Settings, find Allow Code Component.

Only team admins can see Settings and change either toggle.

How it works

Code Components are React components you add to your Webflow site and place on the canvas. On a Webflow-hosted page, each component fetches its code from Webflow's servers when the page loads.

With Include Code Components on, WCH does this for every page that contains a Code Component:

• Downloads the component files. WCH fetches the component's code, styles, and the images and fonts they reference.
• Stores them with your site. The files go in a code-components/ folder at the top of your build, one subfolder per component bundle.
• Rewrites the page. WCH points each component at the local copy, so the page makes no calls to Webflow's component servers.
• Leaves everything else alone. Only Code Component markup is changed. Other scripts and links on the page follow your usual settings.
• Pages without components are unaffected. WCH only acts on pages that contain a Code Component.

If a component's files cannot be downloaded during a publish, the page still publishes. That component keeps loading from Webflow's servers.

With the toggle off, WCH leaves Code Components as Webflow wrote them. They load from Webflow's servers on your live site.

Where the files go

• Default: code-components/ at the top of your build, next to files/.
• With a File Prefix: the prefix is added to the folder name. A prefix of site- gives site-code-components/.
• With a Root directory: the folder sits inside it, for example marketing-site/code-components/.

See File Prefix and Root directory.

Project and team settings

The team toggle, Allow Code Component, is the default for every project in the team. It is off by default. Change it and click Save in Team Settings.

A project follows the team value until you change Include Code Components on the project. From then on, the project's own value wins, even if the team value changes later.

The project toggle saves as soon as you switch it.

When it runs

WCH downloads component files each time it renders a page that uses them. That includes a single page, Publish selected, Publish all pages, Webflow webhooks, and CMS webhooks. Each render fetches the current files, so updates you make to a component in Webflow reach your site on the next publish.

Turning the toggle on or off takes effect on the next publish. If the Cache is on, click Clear all cache first so every page is rebuilt. See Cache.

Turning it on

1. Go to Settings and turn on Include Code Components.
2. Click Publish all pages on the Dashboard.
3. Promote to production. The code-components/ folder is included with the rest of your site.

Testing your changes

1. Turn on Include Code Components.
2. Open Rendering, tick one page that uses a Code Component, and click Publish selected.
3. Open that page on your staging site. Confirm the component works.
4. In your browser's developer tools, open the Network tab and reload. The component files should load from your staging site, not from Webflow.
5. Once it looks right, click Publish all pages, then promote to production.

Troubleshooting

• A component loads from Webflow on your live site: Include Code Components is off for this project, or the page has not been rebuilt since you turned it on. Check the toggle, clear the cache, and publish all pages.
• A component does not appear at all: the code-components/ folder did not reach your destination. Check that your destination receives every folder in the build.