✨ Email Style Adjuster

Easily adjust, preview, and export styled HTML emails with a live editor built using React, Tailwind CSS, and Vite. Instantly see your design changes and get production-ready email code!

🌐 Live Demo →

---

🚀 Features

• Live Preview: Instantly see your email style changes.
• Responsive Design: Works beautifully on all devices.
• Modern Stack: Built with React, Tailwind CSS, and PostCSS.
• Export HTML: Download or copy the styled email template.
• Customizable Styles: Easily tweak and experiment with CSS for your emails.
• Deployed on GitHub Pages.

---

🛠️ Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm

Installation

# Clone the repository
git clone https://github.com/Kaushall44/Email-Style-Adjuster.git
cd Email-Style-Adjuster

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:5173/ in your browser.

---

🏗️ Build & Deploy

Build for Production

npm run build

The production-ready files will be generated in the dist folder.

Deploy to GitHub Pages

1. Set the correct base in vite.config.js:

   base: '/Email-Style-Adjuster/',

2. Copy the contents of the dist folder into a new folder named docs at the root of your repo:

   # On Windows (PowerShell)
   xcopy /E /I /Y dist\* docs\

   Or manually move files.

3. Commit and push your changes:

   git add docs
   git commit -m "Deploy to GitHub Pages"
   git push

4. In GitHub, go to Settings > Pages, and set the source to the main branch and /docs folder.

5. Your site will be live at:
   https://kaushall44.github.io/Email-Style-Adjuster/

---

📁 Project Structure

Email-Style-Adjuster/
├── public/                   # Static assets
├── src/
│   ├── components/           # React components
│   ├── styles/               # Tailwind and custom styles
│   ├── App.jsx               # Main App component
│   └── main.jsx              # App entry point
├── docs/                     # GitHub Pages deploy folder
├── dist/                     # Production build output
├── index.html                # HTML template
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── vite.config.js
└── README.md

---

🎨 Customization

• Favicon: Update the favicon in index.html by editing the <link rel="icon"> tag.
• Styles: Modify or add Tailwind CSS classes in your React components for custom styles.
• Email Templates: Add or edit default templates through the codebase for different starting points.

---

🤝 Contributing

Contributions are welcome!
Feel free to open issues or submit pull requests.

---

📄 License

This project is licensed under the MIT License.

---

Made with ❤️ by Kaushall44