Rich Text

Add a Rich Text property to your component so designers can create formatted content with HTML markup.

Syntax

// Prop definition
props.RichText({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: string,
})
// Prop value
ReactNode

Prop definition

Define the Rich Text prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

props.RichText({
    name: string,
    group?: string,
    tooltip?: string,
    defaultValue?: string,
})

Properties

• name: The name for the property.
• group: The group for this property. (optional)
• tooltip: The tooltip for the property. (optional)
• defaultValue: Default value for all component instances. (optional)

Example

import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";
export default declareComponent(MyComponent, {
    name: "MyComponent",
    description: "A component with a Rich Text property",
    props: {
        content: props.RichText({
            name: "Content",
            group: "Content"
        })
    }
});

Prop value

The Rich Text prop provides formatted HTML content to your React component as a ReactNode.

ReactNode

Properties

• n/a

Webflow properties panel

Example

import React from "react";
interface MyComponentProps {
content?: React.ReactNode;
}
export const MyComponent = ({ content }: MyComponentProps) => {
return (
    <div className="content-wrapper">
    {content}
    </div>
);
}

When to use

Use a Rich Text prop when you want designers to:

• Create formatted content with bold, italic, links
• Add structured content like headings and lists
• Include HTML markup in their content

Best practices

• Provide meaningful default values so the component renders when added to the canvas
• Handle missing content gracefully
• Consider content styling and layout
• Test with various HTML structures