Elements Resume Builder

Build with Elements Challenge 2026 — An original email/document template built with Elements by Unlayer.

📋 Project Overview

Elements Resume Builder is a professional resume template generator built with the Elements ecosystem. It uses the Unlayer visual drag-and-drop editor (react-email-editor) pre-loaded with a polished, Big Tech–optimized resume design, and includes a companion React Elements component (@unlayer/react-elements) that renders the same resume structure as responsive HTML.

The app lets users:

• Visually design a professional resume using Unlayer's drag-and-drop editor
• Export clean, production-ready HTML suitable for email or document use
• Customize resume data directly in the source code

✨ Features

Feature	Description
🎨 Visual Editor	Full drag-and-drop email editor powered by react-email-editor
💻 React Elements Template	Resume template built with @unlayer/react-elements JSX components (Email, Row, Column, Heading, Paragraph)
📤 HTML Export	One-click export of the designed resume as clean HTML
📱 Responsive Layout	Clean, minimal layout optimized for readability and ATS systems

🛠 Tech Stack

• React 19 — UI framework
• Vite 8 — Build tool and dev server
• @unlayer/react-elements — Code-first email/document components used in ReactElementsCV.jsx
• react-email-editor — Visual drag-and-drop email editor used in App.jsx
• ESLint — Code linting

🚀 Getting Started

Prerequisites

• Node.js >= 18
• npm >= 9

Installation

npm install

Development

npm run dev

Open your browser to the URL shown in the terminal (usually http://localhost:5173).

Build

npm run build

Lint

npm run lint

📸 Screenshots

Visual Editor Mode

The drag-and-drop Unlayer editor with the pre-loaded professional resume template.

Exported HTML Output

Demo: one-click export from the visual editor to the final polished resume HTML.

🏗 Project Structure

src/
├── App.jsx                    # Main app: editor logic, resume data, export handler
├── main.jsx                   # React entry point
└── components/
    ├── Header.jsx             # Top navigation bar with export button
    └── ReactElementsCV.jsx    # Professional resume template built with React Elements components

🎯 How Elements Is Used

This project uses Elements to build a professional resume template:

1. Visual Design Mode — react-email-editor provides the Unlayer visual editor where the resume is built using drag-and-drop blocks. The initial design schema in App.jsx pre-loads a complete, professional resume structure.
2. Code-First Mode — ReactElementsCV.jsx uses @unlayer/react-elements declarative components (<Email>, <Row>, <Column>, <Heading>, <Paragraph>) to render the same resume structure as responsive HTML.

The template is optimized for Big Tech recruiting with a clean, scannable layout, bullet points, and quantifiable achievements.

📄 License

MIT

---

Built for the Build with Elements Challenge 2026 by Ioniță Aurel Mihai.