---
url: >-
  https://plugin.stripo.email/extensions/reference/modification/TemplateModifier.md
---
# TemplateModifier

Interface for managing template modifications in the Stripo Email Editor Extensions SDK.

```typescript
interface TemplateModifier<HtmlNodeModifier, CssNodeModifier>
```

## Description

The `TemplateModifier` interface provides a unified API for modifying both HTML and CSS nodes in email templates. It follows a fluent interface pattern, allowing method chaining for multiple modifications before applying them as a single transaction.

## Import

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

## Properties

None

## Methods

### modifyHtml()

Sets the HTML node for modification and returns an HtmlNodeModifier instance.

```typescript
modifyHtml(node: ImmutableHtmlNode): HtmlNodeModifier
```

#### Parameters

| Parameter | Type                                                                  | Description |
|-----------|-----------------------------------------------------------------------|-------------|
| node | [ImmutableHtmlNode](/extensions/reference/nodes/ImmutableHtmlNode) | The HTML node to modify |

#### Returns

[HtmlNodeModifier](./HtmlNodeModifier) - Interface for chaining HTML modifications

#### Usage Notes

* Call this method to begin modifying an HTML element
* Multiple HTML nodes can be modified in a single transaction
* Changes are not applied until `apply()` is called

#### Example

```typescript
const modifier = this.api.getDocumentModifier();
modifier.modifyHtml(buttonNode)
    .setStyle('background', 'blue')
    .apply(description);
```

***

### modifyCss()

Sets the CSS node for modification and returns a CssNodeModifier instance.

```typescript
modifyCss(node: ImmutableCssNode): CssNodeModifier
```

#### Parameters

| Parameter | Type                                                                | Description            |
|-----------|---------------------------------------------------------------------|------------------------|
| node      | [ImmutableCssNode](/extensions/reference/nodes/ImmutableCssNode) | The CSS node to modify |

#### Returns

[CssNodeModifier](./CssNodeModifier) - Interface for chaining CSS modifications

#### Usage Notes

* Use this method to modify CSS rules and properties
* Can be combined with HTML modifications in the same transaction
* Supports media queries and nested rules

#### Example

```typescript
modifier.modifyCss(cssNode)
    .setProperty('color', 'red')
    .setProperty('font-size', '16px')
    .apply(description);
```

***

### apply()

Applies all accumulated modifications as a single transaction.

```typescript
apply(description: ModificationDescription): void
```

#### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| description | [ModificationDescription](./ModificationDescription) | Description object providing context about the modifications |

#### Returns

`void`

#### Usage Notes

* This method executes all queued modifications
* Modifications are applied atomically
* The description is used for version history and undo/redo
* Mark the description with [asHidden()](./ModificationDescription#ashidden) for background modifications that must not appear in version history or undo/redo (available from v3.11.0)

#### Example

```typescript
modifier
    .modifyHtml(htmlNode)
        .setInnerHtml('New content')
    .modifyCss(cssNode)
        .setProperty('margin', '10px')
    .apply(new ModificationDescription('Updated content and styling'));
```