Blocks

@comet/mail-react ships basic block components to render Comet CMS block data types. Where the base components handle generic layout and typography, block components are tied to specific *BlockData shapes from the CMS schema.

info

For background on the broader Comet block system — what blocks are, how they're authored, and how block data flows from API to admin to site — see Blocks in the core concepts.

Pixel-image blocks

Two components render PixelImageBlockData from the CMS — one for MJML context, one for raw HTML.

Component	Renders	Use within
MjmlPixelImageBlock	re-exported MjmlImage	an MjmlColumn (standard MJML layout model)
HtmlPixelImageBlock	raw <img>	raw HTML or MJML ending tags such as MjmlRaw

import { MjmlColumn, MjmlPixelImageBlock, MjmlSection } from "@comet/mail-react";

<MjmlSection indent>
    <MjmlColumn>
        <MjmlPixelImageBlock data={pixelImageData} width={536} />
    </MjmlColumn>
</MjmlSection>;

Configuration

Both blocks read validSizes and baseUrl from config.pixelImageBlock. In a typical Comet project, validSizes is the union of cometConfig.images.imageSizes and cometConfig.images.deviceSizes; baseUrl is the API URL.

src/emails/WelcomeEmail.tsx

import { MjmlMailRoot, type Config } from "@comet/mail-react";

const config: Config = {
    pixelImageBlock: {
        validSizes: [...cometConfig.images.imageSizes, ...cometConfig.images.deviceSizes],
        baseUrl: process.env.API_URL,
    },
};

<MjmlMailRoot config={config}>
    {/* Pixel-image blocks anywhere in the tree read this config */}
</MjmlMailRoot>;

Render width

The width prop is the desktop render width — the width at which the image displays in the default breakpoint. The block picks an actual source size from config.pixelImageBlock.validSizes, accounting for retina displays.

<MjmlPixelImageBlock data={pixelImageData} width={536} />

Use largestPossibleRenderWidth when an image stretches wider on a narrower breakpoint than its desktop render width — e.g. in a two-column layout that stacks on mobile. The default is theme.sizes.bodyWidth.

<MjmlPixelImageBlock data={pixelImageData} width={300} largestPossibleRenderWidth={420} />

Aspect ratio

By default, the rendered aspect ratio comes from the DAM crop area. The aspectRatio prop overrides it — useful when the same image renders at different ratios across templates. Accepts a number or a "WxH" / "W:H" / "W/H" string.

<MjmlPixelImageBlock data={pixelImageData} width={536} aspectRatio="16x9" />

Responsive scaling

On viewports narrower than the default body width, both blocks automatically scale the rendered image to fit its container.