🚀 Build beautiful resumes using Unlayer Elements
- Drag & drop visual editor powered by Unlayer
- Live preview — syncs in real-time with the visual editor changes
- Export resume as HTML
- Export resume as PDF
- Glassmorphism UI with subtle gradients and smooth animations
- Modern sidebar navigation
- Clean, Dribbble-inspired design
- Multiple templates — switch between Dark Professional, Light Minimal, and Creative Modern
- Custom resume sections (Summary, Skills, Projects, Education, Achievements)
- React + Vite
- @unlayer/react-elements
- react-email-editor
- CSS3 (glassmorphism, gradients, animations)
| Template | Description |
|---|---|
| Dark Professional 🌙 | Clean dark theme with cyan accents. Best for tech and engineering roles. |
| Light Minimal ☀️ | Clean light theme with subtle accents. Perfect for corporate and formal roles. |
| Creative Modern 🎨 | Vibrant gradients and bold styling. Great for designers and creatives. |
Unlayer drag-and-drop editor with the pre-loaded resume design.
Clean, professional exported HTML output.
npm install
npm run dev| Export | Description |
|---|---|
| Export HTML | Downloads the visual editor design as a clean HTML file |
| Export PDF | Generates a PDF from the live preview resume card |
https://elements-resume-builder.vercel.app
This project was built for the Build with Elements Challenge 2026.
It combines the Unlayer visual editor with React Elements components to generate professional resume templates. The UI features a modern glassmorphism design with dark theme, smooth hover animations, and a split layout — editor on the left, live preview on the right.
Users can pick from three curated templates (Dark Professional, Light Minimal, Creative Modern) and see the resume update in real-time. The template selector is accessible directly from the navbar.
src/
├── App.jsx # Main app: layout, editor, export logic, template preview
├── App.css # Modern glassmorphism styles
├── main.jsx # React entry point
├── templates/
│ └── index.js # Template configurations (3 themes)
├── components/
│ ├── Header.jsx # Glassmorphism navbar with export buttons & template selector
│ └── TemplateSelector.jsx # Template dropdown selector
└── screenshots/ # Project screenshots for README
MIT
Built for the Build with Elements Challenge 2026 by Ioniță Aurel Mihai.