Installation | Webflow Developer Documentation

Private Beta

This reference describes the configuration requirements to use code components in a React project.

Setup requirements

Webflow CLI

Install the Webflow CLI to bundle and publish your component library:

$ npm i --save-dev @webflow/webflow-cli @webflow/data-types @webflow/react

What you get:

@webflow/webflow-cli - CLI used to publish components to Webflow
@webflow/data-types - TypeScript definitions for Webflow props
@webflow/react - React utilities for code components

See the CLI reference for publishing commands.

`webflow.json`

The webflow.json file is used to configure your component library. Use this file to define the name of your library and the components that should be included in the library. Additionally, you can specify a custom webpack configuration file to use for bundling your components.

Create or update webflow.json in the root of your project with the following configuration:

webflow.json

1 {
2     "library": {
3         "name": "<Your Library Name>",
4         "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
5         "bundleConfig": "./webpack.webflow.js"
6     }
7 }
8

Field	Description	Required
`library.name`	The name of your component library as it appears in Webflow	Yes
`library.components`	Glob pattern matching your component files	Yes
`library.bundleConfig`	Path to a custom webpack configuration file	No

Configure environment variables

The Webflow CLI reads your .env file to authenticate with Webflow and publish to the correct workspace. Add the following variables to your .env file:

.env

$ WEBFLOW_WORKSPACE_API_TOKEN="<API token>"
> CODE_LIBRARIES="true"

Enable code components in private beta

During the private beta, you must include the CODE_LIBRARIES variable in your .env file to enable code components.

Variable	Description	Required	Default
`WEBFLOW_WORKSPACE_API_TOKEN`	Your workspace API token for authentication	Yes	-
`CODE_LIBRARIES`	Enables code components feature	Yes	`false`
`DEBUG`	Enables debug mode for troubleshooting	No	`false`

Authentication

If you don’t have an API token set in your .env file, the Webflow CLI will prompt you to authenticate with Webflow when you run the webflow library share command. Once authenticated, the CLI will save the token to your .env file.

Manual authentication

To manually authenticate with Webflow, run the webflow library share command with the --api-token option and include a Workspace API token in the command. This is useful when sharing your component library to a different workspace.

$ npx webflow library share --api-token <your-api-token>

Workspace API token

The CLI publishes your component library to a Webflow workspace. To publish to the correct workspace, you must provide a workspace API token for authentication.

Workspace admin required

You must be a Workspace Admin to create a Workspace token.

To get your workspace API token:

Open your workspace and navigate to Apps & Integrations.
In the left sidebar. Click Manage
Scroll to the bottom section labeled Workspace API Access
Click Generate API Token and copy the token.
Add the token to your .env file.

Security best practices

Never commit your .env file to version control. Be sure to add .env to your .gitignore file.

Next steps

After configuration, you can: