A comprehensive, modular Electron application template system for building consistent, professional desktop applications with modern web technologies.
- 🔷 TypeScript-first - Complete type safety throughout the stack
- ⚡ Modern Build System - Vite + Electron Builder for fast development and optimized builds
- 🎨 Design System - Tailwind CSS with custom theme and dark mode support
- 📱 Responsive Layout - Professional desktop UI patterns with collapsible sidebars
- 🔧 Universal Settings - Theme, accessibility, window management, and user preferences
- 🌍 Multi-platform - Windows, macOS, and Linux builds with GitHub Actions CI/CD
- 🧩 Pick Your Stack - Include only the modules you need
- 🔌 Plugin System - Clean integration patterns for extending functionality
- 📦 Self-contained Modules - Each module is independently developed and tested
- 🔄 Hot Reload - Fast development experience across all modules
- 🤖 AI Integration - Multi-provider support (OpenAI, Claude, Gemini, Ollama)
- 🗄️ Database - SQLite integration with migrations and backups
- 🔍 Vector Search - Local semantic search with LanceDB
- 📊 Data Visualization - Chart.js, D3.js, and Recharts integration
- 📄 Documentation - Markdown rendering with search and interactive tours
- 🔔 Notifications - Toast, system, and progress notifications
- ⌨️ Shortcuts - Comprehensive keyboard shortcut management
- 🔄 Auto-Updates - Built-in update system with rollback support
- 📤 Import/Export - Multiple format support with drag-drop interface
electron-template/
├── packages/ # Core modules
│ ├── core/ # Base Electron + React setup
│ ├── settings/ # Universal settings system
│ ├── ai/ # AI service integration
│ ├── database/ # SQLite database
│ ├── vector-search/ # Semantic search
│ ├── charts/ # Data visualization
│ ├── docs/ # Documentation system
│ ├── notifications/ # Notification system
│ ├── shortcuts/ # Keyboard shortcuts
│ ├── updater/ # Auto-update system
│ └── import-export/ # Data import/export
├── templates/ # Pre-built combinations
│ ├── basic/ # Minimal setup
│ ├── ai-app/ # AI-focused application
│ ├── data-app/ # Data analysis application
│ └── full/ # Complete feature set
└── tools/ # Development tools
└── create-app/ # CLI generator
# Create a new AI-powered application
npx @michaelborck/create-electron-kit my-ai-app --template=ai-app
# Create a data analysis application
npx @michaelborck/create-electron-kit my-data-app --template=data-app
# Create with all modules
npx @michaelborck/create-electron-kit my-full-app --template=full
# Start with minimal setup
npx @michaelborck/create-electron-kit my-basic-app --template=basic# Clone the template
git clone https://github.com/yourusername/electron-template.git my-app
cd my-app
# Install dependencies
npm install
# Start development
npm run dev| Template | Modules Included | Best For |
|---|---|---|
| basic | Core + Settings | Simple utilities, minimal apps |
| ai-app | Core + Settings + AI + Notifications | Chat apps, AI assistants, content tools |
| data-app | Core + Settings + Database + Charts + Import/Export | Analytics, reporting, data management |
| research-app | Core + AI + Database + Vector Search + Docs | Research tools, knowledge management |
| full | All modules | Feature-rich applications, demos |
| Module | Description | Key Features |
|---|---|---|
| @template/core | Base Electron setup | React 18, TypeScript, Vite, Hot reload |
| @template/settings | Universal settings | Theme, accessibility, persistence |
| Module | Description | Key Features |
|---|---|---|
| @template/ai | AI service integration | OpenAI, Claude, Gemini, Ollama, streaming |
| @template/database | SQLite database | Migrations, backups, type-safe queries |
| @template/vector-search | Semantic search | LanceDB, embeddings, similarity search |
| @template/charts | Data visualization | Chart.js, D3, Recharts, responsive |
| @template/docs | Documentation system | Markdown, search, tours, highlighting |
| @template/notifications | Notification system | Toast, system, progress, DND mode |
| @template/shortcuts | Keyboard shortcuts | Global/local, recording, conflict detection |
| @template/updater | Auto-update system | Background updates, rollback, channels |
| @template/import-export | Data import/export | JSON, CSV, Excel, drag-drop |
- Node.js 18+
- npm 9+
- Git
# Clone the repository
git clone https://github.com/yourusername/electron-template.git
cd electron-template
# Install dependencies
npm install
# Start development mode
npm run dev# Development
npm run dev # Start development servers
npm run dev:web # Web-only development
npm run dev:electron # Electron development
# Building
npm run build # Build all packages
npm run build:packages # Build packages only
npm run build:templates # Build template combinations
# Platform-specific builds
npm run build:win # Build for Windows
npm run build:mac # Build for macOS
npm run build:linux # Build for Linux
# Quality assurance
npm run test # Run all tests
npm run test:unit # Unit tests only
npm run test:e2e # End-to-end tests
npm run lint # ESLint check
npm run lint:fix # Fix linting issues
npm run type-check # TypeScript check
npm run format # Prettier formatting
# Utilities
npm run clean # Clean build artifacts
npm run reset # Reset all dependencies- USAGE.md - Comprehensive usage guide with examples
- ACKNOWLEDGMENTS.md - Open source attributions
- Module Documentation - Each package includes detailed README
- Example Applications - See
templates/directory for working examples
import React from 'react'
import {
SettingsProvider,
AIProvider,
DatabaseProvider,
NotificationProvider
} from '@template/core'
import { ChatInterface } from './components/ChatInterface'
function App() {
return (
<SettingsProvider>
<DatabaseProvider>
<AIProvider>
<NotificationProvider>
<div className="app">
<ChatInterface />
</div>
</NotificationProvider>
</AIProvider>
</DatabaseProvider>
</SettingsProvider>
)
}
export default AppGitHub Actions automatically builds for all platforms when you push tags:
git tag v1.0.0
git push origin v1.0.0# Build for current platform
npm run build
# Build for all platforms
npm run build:all
# Build and publish
npm run release- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and add tests
- Ensure all tests pass:
npm run test - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- TypeScript: All code must be properly typed
- Testing: Add tests for new features
- Documentation: Update relevant documentation
- Accessibility: Follow WCAG 2.1 AA guidelines
- Performance: Consider bundle size and runtime performance
Build fails with native dependencies:
npm run electron:rebuildTypeScript errors:
npm run type-checkModule resolution issues:
npm run clean && npm installFor more troubleshooting help, see USAGE.md.
This project is licensed under the MIT License - see the LICENSE file for details.
This template system builds upon many excellent open source projects. See ACKNOWLEDGMENTS.md for the complete list of attributions.
Built with ❤️ for the Electron community