Convert Figma logo to code with AI

sindresorhus logoawesome-electron

Useful resources for creating apps with Electron

25,681
2,021
25,681
6
View on GitHub

Top Related Projects

electron's avatar

electron-api-demos

10,248

Explore the Electron APIs

electron's avatar

electron-quick-start

11,111

Clone to try a simple Electron app

electron-userland's avatar

electron-builder

13,572

A complete solution to package and build a ready for distribution Electron app with โ€œauto updateโ€ support out of the box

electron's avatar

fiddle

7,402

:electron: ๐Ÿš€ The easiest way to get started with Electron

electron-react-boilerplate's avatar

electron-react-boilerplate

23,099

A Foundation for Scalable Cross-Platform Apps

SimulatedGREG's avatar

electron-vue

15,467

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.

Quick Overview

The sindresorhus/awesome-electron repository is a curated list of useful resources for developing applications with Electron. It serves as a comprehensive collection of tools, boilerplates, videos, and other materials to help developers create cross-platform desktop applications using web technologies.

Pros

  • Extensive collection of resources for Electron development
  • Regularly updated with new and relevant content
  • Well-organized into categories for easy navigation
  • Maintained by a respected developer in the open-source community

Cons

  • May be overwhelming for beginners due to the large number of resources
  • Some listed resources might become outdated over time
  • Lacks detailed explanations or comparisons of listed items
  • Primarily focuses on English-language resources

Note: As this is not a code library but a curated list of resources, the code examples and getting started instructions sections have been omitted.

Competitor Comparisons

electron logo

electron-api-demos

10,248

Explore the Electron APIs

Pros of electron-api-demos

  • Provides interactive examples of Electron APIs
  • Offers a hands-on learning experience for developers
  • Includes working code samples that can be easily adapted

Cons of electron-api-demos

  • Limited in scope to official Electron APIs
  • May not cover advanced or third-party tools and libraries
  • Requires downloading and running the application locally

Code Comparison

electron-api-demos:

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

awesome-electron:

## Apps

- [Atom](https://atom.io) - Text editor.
- [Visual Studio Code](https://code.visualstudio.com) - Cross-platform IDE.
- [Hyper](https://hyper.is) - Terminal.

Summary

electron-api-demos is an interactive application showcasing Electron's core APIs with practical examples. It's excellent for hands-on learning but limited to official APIs. awesome-electron, on the other hand, is a curated list of Electron resources, tools, and applications. It provides a broader overview of the Electron ecosystem but doesn't offer interactive demos or code samples. The choice between them depends on whether you need practical API examples or a comprehensive resource list for Electron development.

electron logo

electron-quick-start

11,111

Clone to try a simple Electron app

Pros of electron-quick-start

  • Provides a minimal, ready-to-run Electron application template
  • Ideal for beginners to quickly start building Electron apps
  • Includes basic project structure and configuration files

Cons of electron-quick-start

  • Limited in scope, focusing only on a basic starting point
  • Lacks comprehensive resources and examples for advanced development
  • Does not provide an extensive list of tools, libraries, or community projects

Code Comparison

electron-quick-start:

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

awesome-electron:

## Apps

- [Atom](https://atom.io) - Text editor.
- [Visual Studio Code](https://code.visualstudio.com) - Cross-platform IDE.

## Boilerplates

- [electron-boilerplate](https://github.com/sindresorhus/electron-boilerplate) - Boilerplate to kickstart creating an app.

Summary

electron-quick-start is a minimal template for starting Electron projects, ideal for beginners. It provides a basic structure and configuration but lacks comprehensive resources.

awesome-electron is a curated list of Electron resources, tools, and projects. It offers a wide range of information but doesn't provide a ready-to-run application template.

Choose electron-quick-start for a quick start in Electron development, or awesome-electron for a comprehensive resource collection to enhance your Electron projects.

electron-userland logo

electron-builder

13,572

A complete solution to package and build a ready for distribution Electron app with โ€œauto updateโ€ support out of the box

Pros of electron-builder

  • Provides a complete solution for packaging and distributing Electron applications
  • Offers automated builds and updates for multiple platforms (Windows, macOS, Linux)
  • Includes code signing and notarization features for enhanced security

Cons of electron-builder

  • Focuses solely on building and packaging, not a comprehensive resource for Electron development
  • May have a steeper learning curve for beginners compared to a curated list of resources
  • Requires more setup and configuration for specific project needs

Code comparison

electron-builder:

const builder = require('electron-builder')

builder.build({
  config: {
    appId: 'com.example.app',
    mac: { category: 'public.app-category.developer-tools' },
    win: { target: 'nsis' },
    linux: { target: 'AppImage' }
  }
})

awesome-electron:

## Apps

- [Atom](https://atom.io) - Text editor.
- [Visual Studio Code](https://code.visualstudio.com) - Cross-platform IDE.

## Boilerplates

- [electron-boilerplate](https://github.com/sindresorhus/electron-boilerplate) - Boilerplate to kickstart creating an app.

Note: awesome-electron is a curated list of resources, so it doesn't contain executable code but rather links and descriptions.

electron logo

fiddle

7,402

:electron: ๐Ÿš€ The easiest way to get started with Electron

Pros of Fiddle

  • Interactive playground for experimenting with Electron code
  • Built-in version management for testing across Electron releases
  • Integrated console and preview window for immediate feedback

Cons of Fiddle

  • Limited to small-scale experiments and prototypes
  • Lacks comprehensive resources and examples for larger projects
  • Not a curated list of Electron-related tools and libraries

Code Comparison

Fiddle allows direct code editing and execution:

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Awesome Electron provides links to code examples:

- [Electron API Demos](https://github.com/electron/electron-api-demos)
- [Simple Samples](https://github.com/electron/simple-samples)
- [Electron Forge](https://github.com/electron-userland/electron-forge)

Summary

Fiddle is an interactive tool for hands-on Electron development, while Awesome Electron is a curated list of resources. Fiddle excels in quick prototyping and version testing, but lacks the breadth of information found in Awesome Electron. The latter provides a comprehensive collection of tools, libraries, and examples, making it more suitable for discovering resources for larger projects and staying updated with the Electron ecosystem.

electron-react-boilerplate logo

electron-react-boilerplate

23,099

A Foundation for Scalable Cross-Platform Apps

Pros of electron-react-boilerplate

  • Ready-to-use boilerplate with React and Electron integrated
  • Includes hot-reloading and production builds out of the box
  • Comes with TypeScript support and testing setup

Cons of electron-react-boilerplate

  • Less flexibility in choosing specific tools or libraries
  • May include unnecessary dependencies for simpler projects
  • Requires learning the specific project structure and conventions

Code Comparison

electron-react-boilerplate:

import { app, BrowserWindow, shell, ipcMain } from 'electron';
import { resolveHtmlPath } from './util';

let mainWindow: BrowserWindow | null = null;

const createWindow = async () => {
  mainWindow = new BrowserWindow({
    // ... window configuration
  });

awesome-electron (example from a linked resource):

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

Summary

electron-react-boilerplate provides a complete setup for Electron and React development, including TypeScript and testing. It's ideal for quickly starting a new project with these technologies. However, it may be overkill for simpler applications and requires learning its specific structure.

awesome-electron, on the other hand, is a curated list of Electron resources, offering more flexibility in choosing tools and libraries. It's better suited for developers who want to customize their Electron setup or learn about various Electron-related projects and resources.

SimulatedGREG logo

electron-vue

15,467

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.

Pros of electron-vue

  • Provides a complete boilerplate for Electron + Vue.js projects
  • Includes pre-configured webpack and vue-loader setup
  • Offers hot-reloading during development

Cons of electron-vue

  • More opinionated and less flexible than a curated list
  • May include outdated dependencies if not regularly maintained
  • Limited to Vue.js as the frontend framework

Code Comparison

electron-vue (template structure):

โ”œโ”€ src/
โ”‚  โ”œโ”€ main/
โ”‚  โ”‚  โ””โ”€ index.js
โ”‚  โ”œโ”€ renderer/
โ”‚  โ”‚  โ”œโ”€ App.vue
โ”‚  โ”‚  โ””โ”€ main.js
โ”‚  โ””โ”€ index.ejs
โ”œโ”€ static/
โ””โ”€ package.json

awesome-electron (example entry):

- [Electron Forge](https://github.com/electron-userland/electron-forge) - Complete tool for creating, publishing, and installing modern Electron applications.

Summary

electron-vue is a project boilerplate specifically for Electron applications using Vue.js, providing a ready-to-use development environment. awesome-electron, on the other hand, is a curated list of Electron resources, tools, and applications, offering a broader range of options and information for Electron developers. While electron-vue is more focused and opinionated, awesome-electron provides a comprehensive overview of the Electron ecosystem.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Awesome Electron Awesome

Useful resources for creating apps with Electron

Electron is an open-source framework for creating desktop apps using web technologies. It combines the Chromium rendering engine and the Node.js runtime.




Check out my macOS app

Menu Bar Spacing
Customize the gap between menu bar items on macOS




Contents

Apps

Made with Electron.

Open Source

Featured
Other
  • Git-it - Teaches you Git and GitHub.
  • Caprine - Unofficial Facebook Messenger app.
  • Simplenote - Note keeper.
  • Abricotine - Markdown editor with inline preview.
  • Kap - Screen recorder with GIF support.
  • Medis - Redis database management.
  • SmartMirror - Voice controlled smart mirror.
  • Beaker - Browser with peer-to-peer web protocols.
  • KeeWeb - Unofficial KeePass app.
  • Gitify - GitHub notifications in your menubar.
  • SpaceRadar - Interactive disk space and memory visualization.
  • Leanote - Cloud notepad.
  • Loop Drop - MIDI looper and synth for live electronic music performances.
  • Pomodoro - Timer based on the Pomodoro Technique.
  • Sia-UI - Decentralized file storage system based on cryptocurrency technology.
  • MarkRight - GitHub flavored Markdown editor with live preview.
  • Sqlectron - SQL client.
  • Light Table - Code editor with instant feedback.
  • Google Play Music Desktop Player - Unofficial Google Play Music app.
  • Chrome DevTools - Chrome DevTools packaged as an app.
  • Proton - Markdown editor with live preview.
  • Hawkpass - Password generator.
  • Boostnote - Markdown note & code snippet app for developers.
  • Before Dawn - Screensaver tool.
  • Catify - Utility for Spotify.
  • Ansel - Image organizer.
  • Tockler - Tracks your time.
  • Mattermost - Mattermost client.
  • Crypter - Secure encryption client.
  • YakYak - Unofficial Google Hangouts app.
  • Museeks - Music player.
  • Sabaki - Go/Baduk/Weiqi board.
  • Wire - Messenger and calling app.
  • Extraterm - Terminal.
  • Stacer - Ubuntu system optimizer.
  • Inpad - Notes app with GitHub-flavored Markdown.
  • Cerebro - Launcher with inline previews.
  • LosslessCut - Lossless video trimming & cutting.
  • Buka - E-book management.
  • Insomnia - Create and manage HTTP requests.
  • Tusk - Unofficial Evernote app.
  • Buttercup Desktop - Password manager.
  • Mailspring - Extensible email client. (Fork of Nylas Mail)
  • Headset - Discover, collect, and listen to music from YouTube.
  • Nuclear - Music player that streams from free sources.
  • Mark Text - Real-time preview Markdown editor.
  • Pomotroid - Pomodoro timer.
  • Netron - Visualizer for deep learning and machine learning models.
  • Etcher - Flash OS images to SD cards and USB drives.
  • Notable - Markdown-based note-taking.
  • Unsplash Wallpapers - Set desktop wallpaper from Unsplash.
  • Motrix - Download manager.
  • Franz - Skype, Slack, Hangouts, WhatsApp, Grape, Telegram, FB Messenger, Hipchat in the same app.
  • Gmail Desktop - Unofficial Gmail app.
  • Upcount - Invoicing.
  • ExifCleaner - Clean image metadata with drag and drop.
  • massCode - Code snippet manager for developers.
  • Swifty - Password manager.
  • MQTTX - Client for MQTT, which is a lightweight messaging protocol.
  • LightProxy - Web debugging proxy.
  • Beekeeper Studio - Cross-platform SQL editor and database manager.
  • Mouseless - Keyboard shortcut training and look-up.
  • Glyphfinder - Unicode character search.
  • Graviton Editor - Cross-platform code editor.
  • Yana - Notebook app with rich-text notes, nested note organization and global search.
  • SpaceEye - Live satellite imagery for your desktop background.
  • Heroic Games Launcher - Alternative Epic games launcher.
  • VIR - Intelligent time manager with automatic planning.
  • Browserosaurus - Browser prompter for macOS.
  • linked - Daily journal.
  • shadowsocks-electron - Cross-platform Shadowsocks client.
  • Sigma File Manager - Modern file manager.
  • Ostara - Monitor and interact with Spring Boot apps via Actuator.
  • PikaTorrent - BitTorrent client.
  • Wave Terminal - Open-source terminal with AI integration.

Closed Source

Featured
  • Rosefinch - Store and run SQL queries.
  • Nota - Pro writing app designed for local Markdown files.
Other
  • GitKraken - Git client.
  • 1Clipboard - Universal clipboard manager.
  • Postman - Create and send HTTP requests.
  • Slack - Desktop version.
  • Avocode - Share design and collaborate.
  • Prepros - Compile almost any preprocessing language with live browser refresh.
  • Stremio - Media center.
  • Typetalk - Share and discuss ideas with your team through instant messaging.
  • Pingendo - Bootstrap prototyping.
  • Spreaker Studio - Audio recording and broadcasting.
  • MockingBot - Prototyping tool for designing apps.
  • Caret - Markdown editor.
  • Remember - Business card management. (Korean)
  • MongoDB Compass - Official MongoDB app.
  • Freeter - Organizer for freelancers & creatives.
  • WhatsApp - Official WhatsApp app.
  • CatLight - Build status notifier.
  • Discord - Voice and text chat.
  • Cocos Creator - Game editor for creating web and native games for Cocos2D-x.
  • Inkdrop - Markdown notebook for hackers.
  • Exodus - Secure, manage, and exchange blockchain assets like Bitcoin and Ethereum.
  • Hackolade - Data modeling for NoSQL and multi-model databases.
  • CashNotify - Monitor your Stripe accounts from your menu bar.
  • Mockoon - Mock servers in seconds.
  • Twitch - Official Twitch app.
  • Fenรƒยชtre - Picture-in-picture for your Mac.
  • Cleavr - Provision servers and deploy web apps.
  • Brandy - A brand asset manager for your menu bar.
  • Cacher - Cloud-based, team-enabled code snippet manager with Gist sync.
  • MusicPlus - Free music app for macOS and Windows.
  • Mingo - MongoDB GUI.
  • Moon Modeler - Schema design tool for MongoDB, Mongoose, and MariaDB.
  • Notion - All-in-one workspace for your notes, tasks, wikis, and databases.
  • FATpick - Guitar tablature viewer that scores your performance as you play along.
  • Taskade - Realtime organization and collaboration tool for distributed teams with tasks, notes, and chat.
  • Coloban - All-in-one project management tool with chats, Kanban, Gantt, calls, screenshare, and more.
  • Dynobase - AWS DynamoDB GUI.
  • Lotus - Keep up with GitHub notifications without stress.
  • RunJS - Playground for JavaScript and TypeScript.
  • OpenSFTP - Integrated SSH and SFTP workspace client.

Samples

  • Electron API usage - Sample apps illustrating usage of Electron APIs.
  • Screen Recorder - WebRTC screen recorder.
  • Activity Monitor - Shows a doughnut chart of the CPU system, user, and idle activity time.
  • Hash - Shows the hash values of entered text using different algorithms.
  • Prices - Shows the current price of oil, gold, and silver using the Yahoo Finance API.

Boilerplates

Tools

For Electron

Using Electron

Components

  • menubar - Menubar app framework.
  • React Desktop - UI toolkit for macOS and Windows built with React.
  • chrome-tabs - Chrome like tabs.
  • Xel - Widget toolkit for building native-like apps.

Documentation

Articles

Books

Videos

Podcasts

Community

Contribute

Contributions welcome! Read the contribution guidelines first.

Related