canvas-component-utils

Original：🇺🇸 English

Translated

Use utility components to render formatted text and media correctly. Use when (1) Rendering HTML text content from props, (2) Displaying images, (3) Working with formatted text or media. Covers FormattedText and Image utilities.

2installs

Sourcedrupal-canvas/skills

Added on2026-03-24

NPX Install

npx skill4agent add drupal-canvas/skills canvas-component-utils

SKILL.md Content

View Translation Comparison →

Import utilities from the

drupal-canvas

package:

jsx

import { FormattedText, Image } from 'drupal-canvas';

FormattedText

Use

FormattedText

to render HTML content from props. This is required for any prop with

contentMediaType: text/html

in component.yml.

yaml

# component.yml
props:
  properties:
    text:
      title: Text
      type: string
      contentMediaType: text/html
      x-formatting-context: block
      examples:
        - <p>This is <strong>formatted</strong> text.</p>

jsx

import { FormattedText } from 'drupal-canvas';

const Text = ({ text, className }) => (
  <FormattedText className={className}>{text}</FormattedText>
);

When to use FormattedText:

Props that accept rich text/HTML content
Any prop with
```
contentMediaType: text/html
```
Content that may contain
```
<p>
```
,
```
<strong>
```
,
```
<em>
```
,
```
<a>
```
, or other HTML tags

Do NOT use FormattedText for:

Plain text props (type: string without contentMediaType)
Headings or titles (use regular elements)

Image

Use

Image

for responsive image rendering. It handles responsive behavior and optimization automatically.