mirror of
https://github.com/formbricks/formbricks.git
synced 2026-05-21 03:31:20 -05:00
Dhruwang Jariwala
939fedfca4
Signed-off-by: gulshank0 <gulshanbahadur002@gmail.com> Co-authored-by: Tiago Farto <tiago@formbricks.com> Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com> Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Tiago <1585571+xernobyl@users.noreply.github.com> Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Theodór Tómas <theodortomas@gmail.com> Co-authored-by: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com> Co-authored-by: Bhagya Amarasinghe <b.sithumini@yahoo.com> Co-authored-by: Chowdhury Tafsir Ahmed Siddiki <ctafsiras@gmail.com> Co-authored-by: neila <40727091+neila@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Harsh Bhat <90265455+harshsbhat@users.noreply.github.com> Co-authored-by: Harsh Bhat <harshbhat@Harshs-MacBook-Air.local> Co-authored-by: Johannes <johannes@formbricks.com> Co-authored-by: Balázs Úr <balazs@urbalazs.hu> Co-authored-by: Gulshan <gulshanbahadur002@gmail.com> Co-authored-by: Harsh Bhat <harsh121102@gmail.com> Co-authored-by: Javi Aguilar <122741+itsjavi@users.noreply.github.com> Co-authored-by: Johannes <jobenjada@users.noreply.github.com>
@formbricks/emails
Email templates for Formbricks with React Email preview server.
Purpose
This package provides email templates for visual QA and preview. It includes:
- Email templates (auth, invite, survey, general)
- Shared email UI components
- Mock translation utilities for preview
- Example data for template rendering
- Tailwind CSS for styling with full intellisense support
Development
Preview Server
Run the React Email preview server:
pnpm dev
Visit localhost:3456 to preview all email templates with mock data.
Styling
The package uses Tailwind CSS via @react-email/components. Tailwind intellisense is configured and should work automatically in your IDE. The config files are:
tailwind.config.js- Tailwind configuration for intellisensepostcss.config.js- PostCSS configuration
Path Aliases
Use @/ prefix for clean imports:
import { FollowUpEmail } from "@/emails/survey/follow-up-email";
import { EmailTemplate } from "@/src/components/email-template";
import { mockT } from "@/src/lib/mock-translate";
Usage in Production
The web app imports render helper functions from this package:
import { renderVerificationEmail } from "@formbricks/email";
// Pass real translation function and data
const html = await renderVerificationEmail({
verifyLink,
verificationRequestLink,
t, // Real i18n function from getTranslate()
});
For complex emails with pre-processing:
import { renderResponseFinishedEmail } from "@formbricks/email";
import { getElementResponseMapping } from "@/lib/responses";
// Pre-process data before rendering
const elements = getElementResponseMapping(survey, response);
const html = await renderResponseFinishedEmail({
survey,
responseCount,
response,
WEBAPP_URL,
workspaceId,
organization,
elements, // Pre-processed data
t,
});
Architecture
- Preview Mode: Templates use mock
t()function and example data for visual QA - Production Mode: Web app passes real
t()function and pre-processed data - Render Functions: Typed helper functions abstract
@react-email/renderfrom web app - No Business Logic: SMTP, i18n, JWT, database queries, and data processing stay in web app
- Clean Separation: Web app processes data → Email package renders HTML