A Build with Elements Challenge entry.
A white-label, production-ready alumni newsletter builder built entirely on @unlayer/react-email-editor. One React application renders a custom email client simulator, a responsive web portal, and a print-tuned PDF engine — and exports straight to Unlayer design JSON.
Every layout rendered in this workspace comes from the same underlying JSON design tree. No screenshots, no hand-authored HTML, no per-channel layout forks.
| 🛠️ Drag & Drop Editor Canvas | 📬 Live Client Simulator Preview |
|---|---|
 |
 |
Two things a fictional-brand demo can't claim, and this one does:
-
It's white-label. The layout schemas and design templates are separated from the layout rendering code. You can completely change the baseline design without modifying the core renderer:
src/template/defaultDesign.json ← edit or replace the baseline newsletter JSON schema src/components/NewsletterRenderer.tsx ← rendering engine (converts schema rows to elements) -
It exports to multiple targets. The workspace allows you to interact with the design and export to:
- Email-safe HTML: Table-based, responsive HTML compatible with Outlook, Gmail, and Apple Mail.
- Dynamic JSON Layout: Clean JSON schema files to backup and version control your campaigns.
- A4 PDF Document: Print-tuned styles with support for paper pagination.
The builder runs on the official Unlayer embed SDK, loading and synchronizing design schemas in real-time:
The application embeds the Unlayer frame inside a premium dark-themed workspace:
- Real-time Synchronization: Every drag-and-drop movement or edit inside the editor triggers HMR updates and synchronizes both the JSON schema layout and compiled HTML preview tabs.
- Custom Blocks Sidebar: A clean sidebar on the left lets you append custom predefined newsletter sections (Header, Spotlights, Events, RSVP footers) directly to the canvas in one click.
- Device Viewports: Dynamically toggle desktop, tablet, and mobile device frames to preview responsiveness instantly.
- The core value prop, made literal. Elements exists to render one design tree to email, web, and print. This project is built around that idea on a realistic community newsletter digest flow.
- Everything is composed from Elements primitives. The header, the 3-column stats, the spotlight card, and the RSVP buttons are all composed of
Row,Column,Heading,Paragraph,Button,Divider, andImageblocks. - Predefined Custom Blocks:
- Alumni Header: Minimalist title banner with newsletter issue branding.
- Project Spotlight: Side-by-side showcase card displaying mockups and developer bios.
- Upcoming Events: Listing upcoming milestones and hackathon deadlines.
- RSVP Footer: Styled buttons prompting readers to join community Discord servers.
The application is structured into modular components:
- [LandingPage.tsx](file:///D:/D drive/1/videos/movie/1.dev/Cohort 3.0/WEB DEV/cohort-3 codes/New folder/td1/AlumniConnect/src/components/LandingPage.tsx): The entry point featuring a premium glassmorphic dark-theme design, detailed product highlights, and a interactive device viewport simulator displaying the default email template.
- [EditorWorkspace.tsx](file:///D:/D drive/1/videos/movie/1.dev/Cohort 3.0/WEB DEV/cohort-3 codes/New folder/td1/AlumniConnect/src/components/EditorWorkspace.tsx): The dashboard hosting the Unlayer editor iframe and side panel controls. It wraps layout loading inside the
editor:readyevent listener for timing stability. - [NewsletterRenderer.tsx](file:///D:/D drive/1/videos/movie/1.dev/Cohort 3.0/WEB DEV/cohort-3 codes/New folder/td1/AlumniConnect/src/components/NewsletterRenderer.tsx): The layout compiler. It parses Unlayer row, column, and cell objects and converts them to responsive React elements styled with Tailwind.
To run the project locally:
-
Clone the repository and navigate into the folder:
cd AlumniConnect -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:3000.