Channel Preview

Multi-channel template preview (email, push, in-app)

SaaSTemplates

Overview

ChannelPreview renders a template across different notification channels (email, push, in-app). It replaces template variable placeholders with test data and displays the result in a channel-specific preview format. Supports error display, loading state, and channel switching via tabs.

Usage

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

<ChannelPreview
  template={{
    content: "Hi Jane, your order #ORD-9821 has been confirmed.",
    subject: "Order Confirmation",
    testData: { user: { firstName: "Jane" }, order: { id: "ORD-9821" } },
  }}
  selectedChannel="email"
  onChannelChange={(ch) => console.log("Channel:", ch)}
  availableChannels={["email", "push", "in-app"]}
/>;

Variants

Default (Email Preview)

From:Your App <[email protected]>

To:[email protected]

Subject:Order Confirmation - #ORD-9821

Default (Dark)

From:Your App <[email protected]>

To:[email protected]

Subject:Order Confirmation - #ORD-9821

With Errors

Variable 'auth.code' is not defined in test data

From:Your App <[email protected]>

To:[email protected]

Subject:Your verification code

Loading

Props

Name	Type	Default	Required	Description
`template`	`TemplatePreviewData`	—	Yes	Template data to preview
`selectedChannel`	`enum`	—	Yes	Currently selected channel
`onChannelChange`	`(channel: NotificationChannel) => void`	—	Yes	Callback when channel changes
`availableChannels`	`NotificationChannel[]`	`["email", "push", "in-app"]`	No	Available channels to show
`errors`	`TemplateValidationError[]`	`[]`	No	Validation errors
`isLoading`	`boolean`	`false`	No	Loading state
`className`	`string`	—	No	Additional CSS class names