Plugins

Extend JSX-email functionality with plugins

Overview

JSX-email supports plugins to modify the rendering pipeline. Plugins can:

• Provide custom minification after rendering
• Replace tokens in templates before rendering
• Modify HTML during processing

Core Plugins

JSX-email includes these plugins as peerDependencies:

• plugin-inline
• plugin-minify
• plugin-pretty

Creating Plugins

Plugin Interface

All plugins must implement this interface:

export interface JsxEmailPlugin {
  afterRender?: RenderHookFn;
  beforeRender?: RenderHookFn;
  name: string;
  process?: ProcessHookFn;
  symbol: typeof pluginSymbol;
}

Using Plugins

Add plugins in your configuration file:

import { defineConfig } from 'jsx-email/config';
import { somePlugin } from './plugins/some-plugin';

export const config = defineConfig({
  plugins: [somePlugin]
});

Hooks

Hook Lifecycle

Plugins can interact with templates at different stages, executed in this order:

1. afterRender
2. process
3. beforeRender

All hooks:

• Run after JSX to HTML conversion
• Can be synchronous or asynchronous
• Receive utility parameters:

  interface RenderHookParams {
    chalk: typeof chalk;  // for colored console output
    html: string;        // the template HTML
    log: any;           // logging utility
  }

Hook Types

Both afterRender and beforeRender use this function signature:

(params: RenderHookParams) => string | Promise<string>;

afterRender

Runs after processing completes but before writing to disk. Useful for:

• Final HTML modifications
• Cleanup operations
• Post-processing tasks

process

The process hook creates a rehype plugin for HTML processing:

interface ProcessHookParams {
  chalk: typeof chalk;
  log: any;
}

(params: ProcessHookParams) =>
  RehypePlugin | RehypePreset | Promise<RehypePlugin> | Promise<RehypePreset>;

See the plugin-minify for an implementation example.

beforeRender

Runs before HTML processing begins. Useful for:

• Token replacement
• HTML preprocessing
• Setup operations