Text Node

Add a Text Node property to your component. In the Webflow designer, designers can edit the text content of the component on the canvas or via the properties panel.

Syntax

1
// Prop definition
2
props.TextNode({
3
    name: string,
4
    group?: string,
5
    tooltip?: string,
6
    defaultValue?: string,
7
    multiline?: boolean,
8
})
9
10
// Prop value
11
ReactNode

Prop definition

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

1
props.TextNode({
2
    name: string,
3
    group?: string,
4
    tooltip?: string,
5
    defaultValue?: string,
6
    multiline?: boolean,
7
})

Properties

• name: The name for the property.
• multiline: Whether the property allows multiple lines of text. (optional)
• group: The group for this property. (optional)
• tooltip: The tooltip for the property. (optional)
• defaultValue: Default value for all component instances. (optional)

Example

1
import { declareComponent } from "@webflow/react";
2
import { props } from "@webflow/data-types";
3
import { InfoSection } from "./InfoSection";
4
5
export default declareComponent(InfoSection, {
6
  name: "Info Section",
7
  description: "A component with a Text Node property",
8
  props: {
9
    title: props.TextNode({
10
      name: "Title",
11
      group: "Content",
12
      defaultValue: "Hello World",
13
    }),
14
    description: props.TextNode({
15
      name: "Description",
16
      multiline: true,
17
      group: "Content",
18
      defaultValue: "This is my first Webflow Code Component",
19
    }),
20
  },
21
});

Prop value

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

1
ReactNode

Properties

• n/a

Webflow properties panel

Example

1
import React from "react";
2
3
interface InfoSectionProps {
4
  title: React.ReactNode;
5
  description: React.ReactNode;
6
}
7
8
export const InfoSection = ({ title, description }: InfoSectionProps) => {
9
  return (
10
    <>
11
      <h2>{title}</h2>
12
      <p>{description}</p>
13
    </>
14
  );
15
};

When to use

Use a Text Node prop when you want designers to:

• Edit text content in the webflow editor
• Create text content with HTML markup
• Add structured content like headings and lists

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