# Collab Email Template Editor

Design and composition of transactional emails and product newsletters.

- id: `collab-email-template-editor`
- Page: https://agentic-ui-kit.com/components/collab-email-template-editor
- Live preview: https://agentic-ui-kit.com/live/component/collab-email-template-editor

## Install

```bash
agentic-ui add collab-email-template-editor
npx shadcn@4.17.0 add @agentic-ui/collab-email-template-editor
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** block-based-composition, variable-interpolation, device-viewport-preview, template-preset-library, undo-redo-history, inspector-property-editing, drag-and-drop-reordering, html-source-export, test-email-dispatch, validation-diagnostics, keyboard-shortcuts, responsive-layout
- **Intents:** communicate, create-edit
- **Suits domains:** saas, marketing, crm, project-management
- **Interaction:** email-block-authoring, variable-token-insertion, device-viewport-toggle, dark-mode-simulation, template-preset-selection, live-html-source-export, undo-redo-keyboard-history
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** design and composition of transactional emails and product newsletters, simultaneous responsive preview of email templates on desktop, tablet and mobile, insertion of dynamic variable tokens for recipient, billing and subscription, pre-flight verification of CAN-SPAM regulatory compliance and unsubscribe links
- **Avoid when:** collaborative document editing in the style of Google Docs or Notion, real-time person-to-person interactive chat
- **Preserve when adapting:** block-schema-and-layout-hierarchy, variable-token-interpolation-engine, device-viewport-simulation-contracts, can-spam-compliance-rules
- **Replace when adapting:** variable-dictionary-and-sample-profiles, email-transport-dispatch-api, template-persistence-backend
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge, card, input, textarea, separator, tabs
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives