| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| content | string | true | - | - | The text content displayed by the element. |
| textStyle | object | true | - | - | The base styling options for the text content, including font, color, shadow, and stroke settings. This serves as the default style for all text. |
| ranges | array | false | - | - | Rich text formatting ranges that allow different styles to be applied to specific portions of the text content. Each range defines a start position, end position, and style overrides. |
| bgColor | string | false | - | - | The background color of the text element, in hex format. |
| bgAlpha | number | false | - | 0 - 1 | The transparency level of the text background. 1 represents full opacity, and 0 represents full transparency. |
| bgRadius | number | false | - | - | The corner radius of the text background, in pixels. |
Rich text ranges allow you to apply different styles to specific portions of the text content. Each range object contains:
| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| start | number | true | - | >= 0 | The starting character position (inclusive) where this style should be applied. |
| end | number | true | - | > start | The ending character position (exclusive) where this style should end. |
| style | object | true | - | - | The style overrides to apply to this text range. Any properties not specified will inherit from the base textStyle. |
The textStyle object defines the base styling that applies to all text content. When using rich text ranges, any style properties not specified in a range will inherit these base values.
| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| fill | string | true | - | - | The text color, in hex format. |
| fontSize | number | true | - | > 0 | The font size of the text, in pixels. |
| fontFamily | string | true | - | Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma, Trebuchet MS, Impact, Comic Sans MS, Courier New | The font family used for the text. |
| align | string | true | - | left, center, right, justify | The alignment of the text content. |
| lineHeight | number | true | - | >= 0 | The line height of the text content, in pixels. |
| letterSpacing | number | true | - | - | The spacing between characters in the text content, in pixels. |
| wordSpacing | number | false | - | - | The spacing between words in the text content, in pixels. |
| fontWeight | string | false | - | normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 | The weight (thickness) of the font. |
| fontStyle | string | false | - | normal, italic, oblique | The style of the font. |
| textShadow | string | false | - | - | CSS text-shadow property value for additional shadow effects. |
| underline | boolean | false | - | - | Indicates whether the text content has underline decoration. |
| strikethrough | boolean | false | - | - | Indicates whether the text content has strikethrough decoration. |
| isBold | boolean | true | - | - | Indicates whether the text content is displayed in bold. |
| isItalic | boolean | true | - | - | Indicates whether the text content is displayed in italics. |
| shadowEnabled | boolean | true | - | - | Indicates whether a shadow-sm effect is applied to the text content. |
| shadowColor | string | true | - | - | The color of the shadow-sm effect, in hex format. |
| shadowBlur | number | true | - | >= 0 | The blur-sm radius of the shadow-sm effect, in pixels. |
| shadowAlpha | number | true | - | 0 - 1 | The transparency level of the shadow-sm effect. 1 represents full opacity, and 0 represents full transparency. |
| shadowAngle | number | true | - | >= 0 | The angle of the shadow-sm effect, in radians. |
| shadowDistance | number | true | - | >= 0 | The distance between the text content and the shadow-sm effect, in pixels. |
| stroke | string | true | - | - | The color of the stroke effect, in hex format. |
| strokeWidth | number | true | - | >= 0 | The width of the stroke effect, in pixels. |
1{
2 "id": "556e5b07-9f6d-49fa-804a-a1ac523cdd82",
3 "type": "Text",
4 "start": 0,
5 "duration": 5,
6 "trackIndex": 0,
7 "x": 166.1738354439909,
8 "y": -59.92190375317854,
9 "blendMode": "normal",
10 "anchorX": 0,
11 "anchorY": 0,
12 "rotation": 0,
13 "scaleX": 2.8948529361581095,
14 "scaleY": 2.8948529361581095,
15 "alpha": 1,
16 "skewX": 0,
17 "skewY": 0,
18 "keyframes": [],
19 "content": "Add Heading",
20 "textStyle": {
21 "fill": "#FFFFFF",
22 "fontSize": 36,
23 "fontFamily": "Arial",
24 "align": "center",
25 "lineHeight": 0,
26 "letterSpacing": 0,
27 "isBold": true,
28 "isItalic": false,
29 "shadowEnabled": true,
30 "shadowColor": "#000000",
31 "shadowBlur": 4,
32 "shadowAlpha": 1,
33 "shadowAngle": 0.5235987755982988,
34 "shadowDistance": 6,
35 "stroke": "#000000",
36 "strokeWidth": 3
37 },
38 "bgColor": "#f2c9ff",
39 "bgAlpha": 0,
40 "bgRadius": 10
41}
42