Text Item

Renders a text block on the canvas with full typography control, including fonts, alignment, decorations, and effects.

Note: height is not required for text items. The height adjusts automatically based on the font size, line height, and width. You only need to set width.

Creating a Text Item

const { addItem } = useStudio()

addItem('Text', {
  x: 100,
  y: 100,
  width: 500,
  itemProps: {
    text: 'Hello, World!',
    fontSize: 48,
    fontFamily: 'Inter',
    lineHeight: 1.2,
    color: '#ffffff',
  },
})

Properties

All properties below are passed inside itemProps.

Content

Property	Type	Description
text	string	The text content. Required.

Font & Size

Property	Type	Description
fontSize	number	Font size in pixels. Required.
fontFamily	string	Font family name (e.g. 'Inter', 'Georgia'). Required.
lineHeight	number	Line height multiplier (e.g. 1.2). Required.
letterSpacing	number	Letter spacing in pixels.
bold	boolean	Bold text.
italic	boolean	Italic text.
underline	boolean	Underline decoration.
strikethrough	boolean	Strikethrough decoration.
uppercase	boolean	Uppercase transform.

Alignment

Property	Type	Description
align	'left' | 'center' | 'right'	Horizontal text alignment.

Color & Background

Property	Type	Description
color	string	Text color (hex).
backgroundColor	string	Background color behind the text.
backgroundType	'full' | 'line'	Whether the background fills the full box or each line.
backgroundRadius	number	Corner radius of the background.
padding	number	Padding around the background.
stroke	string	Stroke color around the text.
strokeWidth	number	Stroke width in pixels.
blur	number	Blur amount applied to the text.

Shadow

Property	Type	Description
shadowEnabled	boolean	Enable or disable the shadow.
shadowColor	string	Shadow color.
shadowBlur	number	Shadow blur radius.
shadowOffsetX	number	Shadow horizontal offset.
shadowOffsetY	number	Shadow vertical offset.

Full Example

addItem('Text', {
  x: 80,
  y: 80,
  width: 600,
  itemProps: {
    text: 'Asset Studio',
    fontSize: 64,
    fontFamily: 'Inter',
    lineHeight: 1.2,
    bold: true,
    color: '#ffffff',
    align: 'center',
    letterSpacing: 2,
    shadowEnabled: true,
    shadowColor: '#000000',
    shadowBlur: 10,
    shadowOffsetX: 2,
    shadowOffsetY: 4,
  },
})