Template Editor

Template editor with toolbar and variable picker

SaaSTemplates

Overview

TemplateEditor provides a textarea-based editing interface for notification templates. It supports variable insertion via a picker, conditional block insertion, real-time validation errors, and read-only mode.

Usage

import { TemplateEditor } from "@leanicon/web-builder-library/saas";

<TemplateEditor
  value={content}
  onChange={setContent}
  variables={[
    { name: "user.firstName", description: "First name", dataType: "string", example: "Jane" },
    { name: "order.id", description: "Order ID", dataType: "string", example: "ORD-9821" },
  ]}
/>;

Variants

Read Only

Hello Jane, your order ORD-9821 has been confirmed.

Read Only (Dark)

Hello Jane, your order ORD-9821 has been confirmed.

Default (Editable)

Tip: Click the { } button or type {{ to insert variables

With Errors

Variable 'user.lastName' is not defined (line 1, col 14)

Tip: Click the { } button or type {{ to insert variables

Props

Name	Type	Default	Required	Description
`value`	`string`	—	Yes	Current template content
`onChange`	`(value: string) => void`	—	Yes	Callback when content changes
`variables`	`TemplateVariable[]`	—	Yes	Available variables for insertion
`helpers`	`FormattingHelper[]`	—	No	Available formatting helpers
`errors`	`TemplateValidationError[]`	`[]`	No	Validation errors to display
`onValidate`	`((content: string) => TemplateValidationError[])`	—	No	Callback for real-time validation
`isReadOnly`	`boolean`	`false`	No	Whether editor is read-only
`placeholder`	`string`	`Write your template content here. Use {{variable}} syntax to insert variables.`	No	Placeholder text when empty
`className`	`string`	—	No	Additional CSS class names
`canEdit`	`boolean`	`true`	No	Permission to edit (if false, renders read-only)