Changelog

Component decorators

This update introduces component decorators, a new pattern for applying global styles and wrapping components with providers. Configure globally to apply to every component in your library or locally to a single component.

Packages:

• @webflow/webflow-cli 1.9.0
• @webflow/react 1.1.0
• @webflow/data-types 1.1.0
• @webflow/emotion-utils 1.1.0
• @webflow/styled-components-utils 1.1.0

Global component decorators

Instead of importing styles or adding decorators to each component individually, you can now configure them once in a global decorators file.

Configure in webflow.json:

1
{
2
  "library": {
3
    "globals": "./src/globals.ts"
4
  }
5
}

Global styles

Import CSS once and apply it to all components:

1
import "./globals.css";

CSS-in-JS libraries

For Emotion and styled-components, export the pre-built decorators to inject styles into the Shadow DOM:

1
import { emotionShadowDomDecorator } from "@webflow/emotion-utils";
2
3
export const decorators = [emotionShadowDomDecorator];

Pre-built decorators:

• emotionShadowDomDecorator from @webflow/emotion-utils
• styledComponentsShadowDomDecorator from @webflow/styled-components-utils

See more on pre-built decorators in the frameworks and libraries guide.

Custom decorators

Create custom decorators for error handling, analytics, or other cross-cutting concerns:

1
import "./globals.css";
2
import { errorBoundaryDecorator } from "./ErrorBoundary";
3
4
export const decorators = [errorBoundaryDecorator];

Apply decorators to a single component

To apply decorators to a single component, add a decorators property to the declareComponent configuration object.

1
import { declareComponent } from '@webflow/react';
2
import { Button } from './Button';
3
import { errorBoundaryDecorator } from "./ErrorBoundary";
4
5
export default declareComponent({Button,{
6
  name: "Button",
7
  decorators: [errorBoundaryDecorator],
8
});

Learn more in the component decorators documentation.

Prop type aliases and workflow improvements

This update includes developer experience improvements across the Code Components suite of packages. Including @webflow/data-types, @webflow/react, and @webflow/webflow-cli.

@webflow/data-types and @webflow/react 1.0.3

We’ve added aliases to the prop types that match common React patterns you already know, so you can use the naming conventions that feel natural to your team.

New aliases for prop types:

• props.String - Use interchangeably with props.Text for text-based props
• props.Children - Use interchangeably with props.Slot for child content

These aliases work seamlessly with existing prop types, giving you flexibility in how you structure your component definitions.

1
// Both of these work identically in your .webflow.tsx file
2
buttonText: props.Text({ name: "Button Text" })
3
// or
4
buttonText: props.String({ name: "Button Text" })
5
6
// And for child content:
7
children: props.Slot({ name: "Children" })
8
// or
9
children: props.Children({ name: "Children" })

@webflow/webflow-cli 1.8.50

The webflow library share command now displays your Workspace name in the confirmation prompt. This helps you verify you’re sharing to the correct workspace before proceeding, especially useful when working across multiple workspaces.

For more updates on the Webflow CLI, see the CLI changelog.