Content Display
Text
Simple editable text block for builder canvas and app player, built for short descriptions, section notes, helper instructions, and callout paragraphs with reliable wrapping and predictable sizing.
Component picker → Content Display → Text, then set copy, typography, and alignment.
Uses wrapping-safe styles and no line clamp by default to reduce clipping risk.
customWidth fixes width; customHeight applies as min-height so text can still grow.
Four things worth knowing
Always wraps by default
Uses wrap-first text rendering, so long copy naturally flows instead of clipping in most layouts.
Default content is ready to edit
Starts with Edit me! so the block is immediately visible and can be replaced quickly from the property editor.
Font family controls weight behavior
fontWeight is applied only when no custom font is used, or when fontFamily is System, to avoid conflicts with weight-encoded custom font files.
Sizing favors readable growth
customWidth sets fixed width, while customHeight maps to min-height so long text can expand instead of being hard-clipped.
Find it, drop it, and style copy
Where to find itAdd it to any screen
- Component picker → Content Display → Text.
- Drop it where supporting copy or helper notes are needed.
- Set content, font, size, color, alignment, and optional width/height bounds.
Before you publishThree things to check
- Verify long copy still wraps cleanly on small-width layouts.
- Check contrast and readable font size for the chosen background.
- If using
customHeight, confirm content is not visually cramped.
Content, typography, and sizing
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | ’Edit me!’ | Main visible text content. |
color | color | #222222 | Text color. |
fontSize | number | registry default | Base text size. |
fontWeight | normal | bold | normal | Applied only when no custom font family is used or when fontFamily is System. |
fontFamily | string | Urbanist-Regular | Font family for rendered text. |
textAlign | left | center | right | left | Horizontal text alignment. |
customWidth | number | unset | Optional fixed container width. |
customHeight | number | unset | Optional minimum container height. |
Make it yours
Adjust typography, color, alignment, and optional dimensions to fit each screen section while preserving readable wrapping.
| Prop | Typical value | What it controls |
|---|---|---|
color | #222222 | Primary text contrast and tone. |
fontSize | 16 to 20 | Readability and emphasis of body copy. |
fontFamily | Urbanist-Regular | Text personality and weight behavior. |
fontWeight | normal / bold | Weight fallback when custom font family is not encoding weight. |
textAlign | left, center, right | Paragraph alignment in layout. |
customWidth | 280 to 360 | Fixed-width callout and wrapping width. |
customHeight | 56+ | Minimum container height while allowing growth. |
Common mistakes to avoid
Don’t clamp unintentionally
This component is wrap-first by design. If you add line-clamp behavior later, verify long copy still works for smaller screens.
Use width and size together
Most readability issues come from large font size with very small width. Tune customWidth and fontSize together.
Know when fontWeight applies
If you pass a custom fontFamily, weight is usually encoded there and fontWeight may be ignored by design.
Sync logic when behavior changes
If you change sizing or wrapping rules, update BuilderText.tsx, registry defaults/options, and canvas dimension estimation together.