Overview
ShellEditor configures the program-level email wrapper (shell) that surrounds all email content. It supports two modes: AUTO_GENERATED for brand settings-based shells, and RAW_HTML for custom HTML templates.
Key Features
- Two shell types: Auto-Generated (brand settings) or Raw HTML (custom)
- Logo upload with ImagePicker integration
- Primary and accent color pickers with semantic presets
- Footer configuration: text, company address, social links
- RAW_HTML mode with {{content}} placeholder validation
Examples
Interactive Demo
Configure shell settings. Toggle between Auto-Generated and Raw HTML modes.
Layout Type
Branding
Your company or program logo
Footer
Current Value:
{
"type": "AUTO_GENERATED",
"logoUrl": null,
"footerText": "© 2025 Demo Company",
"socialLinks": null,
"companyAddress": "123 Demo Street, San Francisco, CA 94102",
"rawHtml": null
}Props Reference
ShellEditor Props
| Prop | Type | Default | Description |
|---|---|---|---|
programId | string | required | Program ID for API calls and logo uploads |
value | ShellEditorValue | required | Current shell configuration state |
onChange | (value: ShellEditorValue) => void | required | Callback when configuration changes |
disabled | boolean | false | Disable all form interactions (during save) |
ShellPreview Props
| Prop | Type | Default | Description |
|---|---|---|---|
html | string | required | Rendered shell HTML from API |
subject | string | - | Email subject line to display |
defaultDevice | 'mobile' | 'desktop' | 'desktop' | Initial device preview mode |
Usage
import { ShellEditor, ShellPreview, type ShellEditorValue } from '@/features/messaging/components';
// State for shell configuration
const [value, setValue] = useState<ShellEditorValue>({
type: 'AUTO_GENERATED',
logoUrl: null,
primaryColor: '#2563EB',
accentColor: '#10B981',
footerText: '© 2025 Your Company',
socialLinks: null,
companyAddress: null,
rawHtml: null,
});
// Editor form
<ShellEditor
programId={programId}
value={value}
onChange={setValue}
disabled={saving}
/>
// Preview (after fetching rendered HTML from API)
<ShellPreview
html={renderedHtml}
subject="Preview Email"
defaultDevice="desktop"
/>