https://github.com/involvex/create-electron-app
https://github.com/involvex/create-electron-app
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/involvex/create-electron-app
- Owner: involvex
- Created: 2026-05-01T14:53:11.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-01T16:47:08.000Z (about 1 month ago)
- Last Synced: 2026-05-01T18:27:28.919Z (about 1 month ago)
- Language: Go Template
- Size: 51.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- Agents: AGENTS.md
Awesome Lists containing this project
README
# create-electron-app
Interactive CLI for scaffolding Electron applications with Bun runtime, TypeScript, and modern tooling.
## Features
- 🚀 **Bun Runtime**: 10-100x faster than npm, built-in bundler
- ⚡ **Hot Reloading**: Instant HMR with electron-vite
- 🎨 **Multiple Templates**: Vanilla, React, Vue, React+Tailwind
- 🎨 **Styling Options**: Tailwind CSS, Aura UI, Kumo, shadcn/ui, custom CSS
- 🪄 **Glass Morphism**: Built-in frosted glass effects
- 🎭 **Navigation**: Native Electron MenuBar or custom navbar
- 📱 **Tray Menu**: System notification area support
- 🌗 **Themes**: Dark/light mode with multiple presets
- ✨ **Code Quality**: ESLint, Prettier, TypeScript
## Quick Start
### Interactive Usage
```bash
bunx @involvex/create-electron-app
```
The CLI will guide you through:
1. **Project Name**: Enter your project name
2. **Template Selection**: Choose vanilla, React, Vue, or React+Tailwind
3. **Styling Framework**: Tailwind, Kumo, shadcn/ui, Aura UI, or custom CSS
4. **UI Features**: Glass morphism, navbar type, tray menu, theme
5. **Code Quality**: ESLint, Prettier, Git initialization
6. **Backend**: Vite backend, Bun.serve, Express, or none
### Local Development
```bash
# Install dependencies
bun install
# Run CLI locally
bun run src/index.ts
```
## Templates
### 1. Vanilla + Vite (Minimal)
Pure TypeScript + Vite with Bun - lightweight and fast.
### 2. React + Vite
Modern React 19 with fast HMR and Bun dev server.
### 3. React + Vite + Tailwind + Component Library
Full-featured with:
- Tailwind CSS 4
- Optional: Kumo (Cloudflare) or shadcn/ui components
- Glass morphism utilities
- Dark/light theme with CSS variables
- Optional: Aura UI components
### 4. Vue + Vite
Vue 3 Composition API with TypeScript support.
## Styling Options
### Primary Frameworks
- **Tailwind CSS 4**: Industry standard with `@theme` tokens
- **Aura UI**: "Vibrant Depth" design with glass morphism
- **Kumo**: Cloudflare's design system (87K weekly downloads)
- **shadcn/ui**: 50+ customizable components
- **@casoon/tailwindcss-glass**: Dedicated glass morphism system
### Lightweight Alternatives (<35KB)
- **µCSS**: ~19KB, CSS-only, semantic HTML
- **Symphony CSS**: ~35KB, semantic-first
- **Graffiti**: ~26KB minimal toolkit
- **Lissom.CSS**: Classless, minimalist
- **Frankenstyle**: No-build utility-first
- **Cutestrap**: 2.7KB progressive enhancement
- **SamphireCSS**: 12KB gzipped, content-first
## UI Features
### Glass Morphism
Three intensity levels:
- **Soft Glass**: 8px blur, subtle transparency
- **Standard Glass**: 16px blur, moderate
- **Strong Glass**: 24px blur, dense
Plus dark glass and gradient variants.
### Navigation
- **Native Electron MenuBar**: Built-in menu system
- **Sticky Navbar**: `position: sticky` with blur effect
- **Fixed Navbar**: `position: fixed` overlay
- **Custom HTML**: Fully customizable
### Tray Menu
System notification area with:
- Show/hide window
- Recent files
- Quick settings
- Exit application
### Themes
- **Default**: Clean, light design
- **Dark Night**: Deep slate tones
- **Glass**: Frosted translucent
- **Gradient**: Colorful gradients
## Project Structure
```
my-electron-app/
├── src/
│ ├── main/ # Main process
│ │ ├── index.ts # Electron entry point
│ │ └── menu.ts # Application menu
│ ├── renderer/ # Renderer process
│ │ ├── App.tsx # Main component
│ │ ├── index.css # Global styles
│ │ └── main.tsx # Renderer entry
│ ├── preload/ # Preload scripts
│ │ └── index.ts
│ └── shared/ # Shared code
│ └── types.ts
├── vite.main.config.ts # Vite config (main)
├── vite.renderer.config.ts# Vite config (renderer)
├── electron.vite.config.ts# Combined config
├── tailwind.config.js # Tailwind config (if selected)
├── eslint.config.js # ESLint config (if selected)
├── prettier.config.js # Prettier config (if selected)
├── tsconfig.json # TypeScript config
├── bunfig.toml # Bun configuration
└── package.json
```
## Development
### Hot Reloading
**electron-vite** (recommended):
- Instant HMR for renderer process
- Hot reloading for main process
- Automatic process management
**Bun Native**:
```bash
bun --watch src/main/index.ts
```
### Build Output
```json
{
"scripts": {
"dev": "electron-vite dev",
"build": "electron-vite build",
"preview": "electron-vite preview"
}
}
```
## Code Quality
The CLI includes built-in support for code quality tools:
### Formatting (Biome)
```bash
bun run format # Format code with Biome
```
### Linting (Biome)
```bash
bun run lint # Lint code with Biome
```
### Type Checking (TypeScript)
```bash
bun run typecheck # Run TypeScript type checking
```
### Full Check
```bash
bun run check # Run format, lint, and typecheck
```
## Technical Stack
- **Runtime**: Bun 1.3+
- **Bundler**: Vite + electron-vite
- **Language**: TypeScript 5.x (strict mode)
- **Framework**: React 19 / Vue 3 / Vanilla
- **Styling**: Tailwind CSS 4
- **Components**: shadcn/ui / Kumo / Aura UI
- **Linting**: Biome
- **Formatting**: Biome
- **Type Checking**: TypeScript
## Why Bun?
- ⚡ **10-100x faster** than npm/yarn/pnpm
- 🎯 **Built-in bundler** with native TypeScript support
- 🔥 **Watch mode**: `--watch` and `--hot` flags
- 📦 **Zero-config**: Works out of the box
- 🚀 **Standalone**: Compile to single executable
## Bun + Electron Integration
- `--watch` mode: Hard restart on file changes
- `--hot` mode: Soft reload (HMR) for main process
- `Bun.build()`: Native bundling with file watching
- `import.meta.hot`: Vite-compatible HMR API
- Standalone compilation via `bun build --compile`
## Installation
### Global Usage
```bash
bunx @involvex/create-electron-app
```
### NPM
```bash
npx create-electron-app
```
### Yarn
```bash
yarn create create-electron-app
```
### PNPM
```bash
pnpm create create-electron-app
```
## Browser Support
- macOS (native menus, tray)
- Windows (native menus, tray)
- Linux (native menus, tray with limitations)
## License
MIT
## Resources
- [PLANNING.md](.kilo/plans/) - Detailed technical planning and architecture
- [electron-vite](https://electron-vite.org) - Build tool documentation
- [Bun](https://bun.sh) - Runtime documentation
- [Tailwind CSS](https://tailwindcss.com) - Styling framework
- [shadcn/ui](https://ui.shadcn.com) - Component library
- [Kumo](https://kumo-ui.com) - Cloudflare design system