skills.rest
AJV009
AJV009COMMUNITY
Explore all skills by this author →
Website𝕏@alphons009GitHub

canvas-component-utils

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

1|Updated Mar 22, 2026
Search Tags:#react#rendering#image#ui-components#formatted-text#drupal-canvas
One-click install
npx skills add https://github.com/AJV009/drupal-devkit --skill canvas-component-utils
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-component-utils
Source: https://github.com/AJV009/drupal-devkit/tree/main/plugins/migrate-drupal-canvas/reference/canvas-starter/canvas-component-utils
Command: npx skills add https://github.com/AJV009/drupal-devkit --skill canvas-component-utils

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides reusable UI primitives to render HTML content and media in React components, reducing boilerplate and ensuring consistent rendering across apps.

Core Features & Use Cases

  • FormattedText: render HTML content from props with contentMediaType: text/html
  • Image: render responsive images with alt text and sizing
  • Use Case: Build rich content cards with text blocks and media without writing boilerplate

Quick Start

Install drupal-canvas and import FormattedText and Image to start rendering HTML content and images in your 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 in a React component without writing boilerplate?▼

Use the FormattedText utility from the drupal-canvas package to render HTML content in React components. It processes text/html media types directly from props, ensuring consistent rendering while eliminating repetitive boilerplate code.

What is the best way to display responsive images with alt text in React?▼

Use the Image utility from drupal-canvas to display responsive images with alt text in React. It provides reusable UI primitives for media cards and responsive image grids, handling sizing and accessibility attributes automatically.

Do I need a specific project setup to use drupal-canvas FormattedText and Image components?▼

Yes, you need an active React project environment and the drupal-canvas package installed. These utilities are built for React component development scenarios where content includes rich text and image media.

Can I build rich content cards with both text blocks and media in React using these utilities?▼

Yes, you can build rich content cards by combining the FormattedText and Image utilities from drupal-canvas. This allows you to render HTML text blocks and responsive image media together in React without writing custom boilerplate.

What problem does using reusable UI primitives for rendering HTML and images solve?▼

Using reusable UI primitives for rendering HTML and images solves inconsistent rendering and code duplication. It provides standardized FormattedText and Image components to ensure uniform media presentation across React applications.

Related Skills

Explore More Software Engineering Skills→
drupal-canvasdrupal-canvas
3

canvas-component-utils

Render HTML content and responsive images in React components.

Official
Intermediate
balintbrewsbalintbrews
14

canvas-component-utils

Render HTML content and images with React Canvas component utilities.

Community
Intermediate
ViewableGravyViewableGravy

react_dynamic-styling

Pass React state and props as CSS variables for dynamic styling.

Community
Basic
EvanBaconEvanBacon
571

react-strict-dom

Configure react-strict-dom Babel preset, PostCSS plugin, and CSS directive for cross-platform Expo UI.

Community
Intermediate