---
url: https://plugin.stripo.email/extensions/reference/blocks/BlockRenderer.md
---
# BlockRenderer

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

```typescript
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

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

## Properties

### api

Provides access to editor functionalities for the renderer.

```typescript
api!: BlockRendererApi
```

#### Type

[BlockRendererApi](../api/BlockRendererApi.md)

#### 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.

```typescript
public getPreviewInnerHtml(node: ImmutableHtmlNode): string
```

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| node | [ImmutableHtmlNode](../nodes/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

```typescript
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');
}
```