Getting started

Setup your React project

Code Components are compatible with a wide variety of local setups. To get started, create a new React project.

If you’re working with an existing repository, you can skip this step.

$
npx create-react-app code-components
>
cd code-components

Install the Webflow CLI

Install the Webflow CLI and the necessary dependencies to create a code component library.

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

Create a Webflow configuration file

Create a webflow.json file in the root of your repository. This file will define the configuration for your code component library.

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

Give your library a name and specify the path to your code component files.

Create or update a .env file

Create or update a .env file in the root of your repository. This file will store your Webflow API token.

$
CODE_LIBRARIES="true" # Only needed for Private Beta

Add an example component to your library

In your editor, navigate to your src or components directory. Create a new file called Badge.tsx, and paste the following code. In the next step, you’ll create a code component declaration file to map this component to a Webflow component.

1
import * as React from "react";
2
3
interface BadgeProps {
4
  text: string;
5
  variant: 'Light' | 'Dark';
6
}
7
8
export const Badge = ({ text, variant }: BadgeProps) => (
9
  <span
10
    style={{
11
      backgroundColor: variant === 'Light' ? '#eee' : '#000',
12
      borderRadius: '1em',
13
      color: variant === 'Light' ? '#000' : '#fff',
14
      display: 'inline-block',
15
      fontSize: '14px',
16
      lineHeight: 2,
17
      padding: '0 1em',
18
    }}
19
  >
20
    {text}
21
  </span>
22
);

Create a code component file

In your editor, navigate to the your src or components directory where you added your Badge component. Create a new file called Badge.webflow.tsx. This file will define how your Badge component appears in Webflow.

Import the React component and Webflow functions

Import the necessary dependencies to create your code component: the React component, prop types and the declareComponent function.

1
import { Badge } from './Badge'; // Import your React component here
2
import { props } from '@webflow/data-types';
3
import { declareComponent } from '@webflow/react';

Declare the component

Declare the code component using the declareComponent function.

1
import { Badge } from './Badge';
2
import { props } from '@webflow/data-types';
3
import { declareComponent } from '@webflow/react';
4
5
export default declareComponent(Badge, {
6
    name: 'Badge',
7
    description: 'A badge with variants',
8
    group: 'Info',
9
});

The declareComponent function takes two parameters:

• Your React component (Badge)
• Configuration options:
  • name: The name of the component
  • description?: A description of the component (optional)
  • group?: The group the component belongs to (optional)
  • props?: The props of the component, which we’ll define in the next step. (optional)
  • options?: The options of the component, (optional)

For more information and detailed configuration options for code components, see the component definition reference.

Define the component props

Add configurable properties that users can edit in the Webflow designer.

Add a props object to the declareComponent function. This object defines which properties designers can configure in the Webflow editor, and maps them to appropriate Webflow prop types using the props constructor.

1
import { Badge } from './Badge';
2
import { props } from '@webflow/data-types';
3
import { declareComponent } from '@webflow/react';
4
5
export default declareComponent(Badge, {
6
    name: 'Badge',
7
    description: 'A badge with variants',
8
    group: 'Info',
9
    props: {
10
        text: props.Text({
11
            name: "Text",
12
            defaultValue: "Hello World",
13
        }),
14
        variant: props.Variant({
15
            name: "Variant",
16
            options: ["Light", "Dark"],
17
            defaultValue: "Light",
18
        }),
19
    },
20
});

This code component defines two props:

• text: A text field for the Badge content
• variant: A dropdown with predefined style options

Install the library on your Webflow site

Install the library on any site in your Workspace to start using your code components.

1. Open any Webflow site in your workspace.

2. Open the Libraries panel by pressing “L” or clicking the icon in the left sidebar.

   

3. Find your library in the list of available libraries.

4. Install the library by clicking the Install icon next to your library.

Open the Components panel

Open the Components panel by pressing “⇧C” or clicking the icon in the left sidebar.

Scroll to the section for the library you just installed. You should see your “Badge” component listed under the “Info” group.

Add the component to your page

Click and drag the Badge component from the components panel onto your page. The component will appear with its default text and styling.

Customize the component

Customize your component in the Properties panel on the right. You’ll see two configurable properties:

• Text: Change the text content of the Badge
• Variant: Select from Light or Dark styling

Try changing the text to “Welcome!” and selecting a different variant to see your component update in real-time.