A modern Electron application template with React, Vite, TypeScript, and TailwindCSS. This project provides a solid foundation for developing cross-platform desktop applications.

• 🚀 Electron - Cross-platform desktop application framework
• ⚛️ React - Component-based UI library
• 📦 TypeScript - Type-safe JavaScript
• 🎨 TailwindCSS - Utility-first CSS framework
• ⚡ Vite - Lightning-fast build tool
• 🔥 Fast HMR - Hot Module Replacement
• 🎨 Dark/Light Mode - Built-in theme switching
• 🪟 Custom Window & Titlebar - Professional-looking window with custom titlebar & file menus.
• 📐 Clean Project Structure - Separation of main and renderer processes
• 🧩 Path Aliases – Keep your code organized.
• 🛠️ Electron Builder - Configured for packaging applications

• Node.js (v18 or higher)
• npm, yarn, pnpm, or bun

Clone the repository and install dependencies:

# Clone the repository git clone https://github.com/fulutas/react-electron-template.git cd electron-react-app # Install dependencies npm install # or yarn # or pnpm install # or bun install

Start the development server:

npm run dev # or yarn dev # or pnpm dev # or bun run dev

This will start Electron with hot-reload enabled so you can see changes in real time.

Build the application for your platform:

# For Windows npm run build:win # For macOS npm run build:mac # For Linux npm run build:linux # Unpacked for all platforms npm run build:unpack

Distribution files will be located in the dist directory.

The app uses a secure IPC (Inter-Process Communication) system to communicate between the renderer and main processes:

// Renderer process (send message to main) window.api.send('channel-name', ...args) // Renderer process (receive message from main) window.api.receive('channel-name', (data) => { console.log(data) }) // Renderer process (invoke a method in main and get a response) const result = await window.api.invoke('channel-name', ...args)

This template includes a custom window implementation with:

• Custom titlebar with app icon
• Window control buttons (minimize, maximize, close)
• Menu system with keyboard shortcuts
• Dark/light mode toggle
• Cross-platform support for Windows and macOS

The titlebar menu can be toggled using:

• Windows: Press the Alt key
• macOS: Press the Option (⌥) key

When you press the toggle key:

• If the menu is hidden, it becomes visible
• If the menu is already visible, it gets hidden
• The menu only toggles if menu items are available

To add, remove or modify menu items, update the lib/window/titlebarMenus.ts file.

The project supports TailwindCSS for styling:

// Example component with Tailwind classes const Button = () => ( <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"> Click me </button> );

Contributions are welcome! Feel free to submit a Pull Request.

├── app/ # Renderer process files │ ├── assets/ # Static assets (images, fonts, etc) │ ├── components/ # React components │ │ ├── App.tsx # Application component │ ├── styles/ # CSS and Tailwind files │ │ ├── app.css # App stylesheet │ │ └── tailwind.css # Tailwind stylesheet │ ├── index.html # Entry HTML file │ └── renderer.tsx # Renderer process entry ├── lib/ # Shared library code │ ├── main/ # Main process code │ │ ├── index.ts # Main entry point for Electron │ │ └── ... # Other main process modules │ ├── preload/ # Preload scripts for IPC │ │ ├── index.ts # Preload script entry │ │ └── api.ts # Exposed API for renderer │ ├── welcome/ # Welcome kit components │ └── window/ # Custom window implementation ├── resources/ # Build resources ├── .eslintrc # ESLint configuration ├── .prettierrc # Prettier format configuration ├── electron-builder.yml # Electron builder configuration ├── electron.vite.config.ts # Vite configuration for Electron ├── package.json # Project dependencies and scripts └── tsconfig.node.json # Main process tsconfig └── tsconfig.web.json # Renderer process tsconfig