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.
yaml
# component.yml
props:
properties:
image:
title: Image
type: object
$ref: json-schema-definitions://canvas.module/image
examples:
- src: https://example.com/photo.jpg
alt: Description of image
width: 800
height: 600
jsx
import { Image } from "drupal-canvas";
const Card = ({ image }) => {
const { src, alt, width, height } = image;
return (
<Image
src={src}
alt={alt}
width={width}
height={height}
className="w-full rounded-lg object-cover"
/>
);
};
Image props:
- •
src- Image URL (required) - •
alt- Alt text for accessibility (required) - •
width- Original image width - •
height- Original image height - •
className- Tailwind classes for styling