BlockRenderer

Base class for creating custom block renderers in the Stripo Email Editor Extensions SDK.

class BlockRenderer

Description

The BlockRenderer class enables custom visual representation of blocks in the editor that differs from their actual HTML content. This is particularly useful for displaying merge tags as preview values, showing placeholder content for empty blocks, or creating interactive editing experiences.

When a block uses a custom renderer, the editor displays the renderer's output instead of the actual HTML content, while the underlying template remains unchanged.

Import

import { BlockRenderer } from '@stripoinc/ui-editor-extensions';

Properties

api

Provides access to editor functionalities for the renderer.

api!: BlockRendererApi

Type

BlockRendererApi

Usage Notes

• Automatically injected by the editor
• Provides access to translation and configuration
• Available when rendering methods are called

Methods

getPreviewInnerHtml()

Returns custom content to be displayed inside the block's root TD element.

public getPreviewInnerHtml(node: ImmutableHtmlNode): string

Parameters

Parameter	Type	Description
node	ImmutableHtmlNode	The current block node to render

Returns

string - HTML string to display in the editor

Usage Notes

• Called whenever the block needs to be rendered in the editor
• The returned HTML is displayed instead of the actual node content
• Should return valid HTML that fits within a TD element
• Can access node attributes and configuration via the node parameter

Example

public getPreviewInnerHtml(node: ImmutableHtmlNode): string {
    const config = node.getNodeConfig();

    if (!config.initialized) {
        return '<div style="padding: 20px; text-align: center;">Click to configure this block</div>';
    }

    // Replace merge tags with preview values
    const content = node.getInnerHTML();
    return content.replace(/\{\{name\}\}/g, 'John Doe')
                  .replace(/\{\{email\}\}/g, 'john@example.com');
}