skills.rest
drupal-canvas
drupal-canvasOFFICIAL
Explore all skills by this author →
GitHub

canvas-component-utils

Render HTML content and responsive images in React components.

3|1|Updated Feb 11, 2026
Search Tags:#ui#html#frontend#components#rendering#images#drupal-canvas
One-click install
npx skills add https://github.com/drupal-canvas/skills --skill canvas-component-utils-drupal-canvas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-component-utils
Source: https://github.com/drupal-canvas/skills/tree/main/skills/canvas-component-utils
Command: npx skills add https://github.com/drupal-canvas/skills --skill canvas-component-utils-drupal-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

  • FormattedText: Render HTML content from props using the FormattedText component for contentMediaType: text/html.
  • Image: Render responsive images with the Image component for alt, width, height, and className.
  • Use Case: In a component that receives HTML strings and image data, those props are rendered safely and responsively with these utilities.

Quick Start

Import FormattedText and Image from drupal-canvas and wrap your HTML content and image data with these components.

Frequently Asked Questions about canvas-component-utils

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render HTML content from React component props safely?▼

To render HTML content from props safely, use the FormattedText utility component designed for contentMediaType: text/html. It parses and displays HTML strings within React components without requiring complex manual setup.

What is the best way to display responsive images in a React UI component?▼

The best way to display responsive images is using the Image utility component, which accepts alt, width, height, and className properties to ensure visuals adapt correctly across different screen sizes.

Do I need any external dependencies to render formatted text and media?▼

No external dependencies are required to render formatted text and media. The FormattedText and Image utilities are exposed directly through the drupal-canvas package with a minimal setup process.

When should I use utility components for rendering HTML strings instead of native elements?▼

Use utility components for rendering HTML strings when handling contentMediaType: text/html or displaying media in React. They provide consistent, safe parsing for rich text and responsive visuals without manual DOM manipulation.

Can I apply custom CSS classes to images rendered through canvas utilities?▼

Yes, you can apply custom CSS classes to images rendered through canvas utilities. The Image component accepts a className property, allowing you to attach custom styling alongside standard alt, width, and height attributes.

Related Skills

Explore More Software Engineering Skills→
balintbrewsbalintbrews
14

canvas-component-utils

Render HTML content and images with React Canvas component utilities.

Community
Intermediate
skatedduskateddu
27

frontend-design

Generate frontend interfaces with HTML/CSS/JS for React, Vue, or plain websites.

Community
Advanced
AJV009AJV009
1

canvas-component-utils

Render HTML content and responsive images in React components with FormattedText and Image.

Community
Intermediate
acquiaacquia
16

canvas-component-utils

Render formatted HTML and responsive images from Drupal Canvas component props.

Official
Basic