web-electron
Advanced tools
A powerful, extensible CLI tool that converts web projects (React, Vue, Angular, Svelte) into cross-platform Electron applications with zero configuration.
npm install -g web-electron
# Convert current directory
web-electron convert
# Convert specific project
web-electron convert ./my-react-app
# Convert with defaults (skip prompts)
web-electron convert --yes
# Convert without installing dependencies
web-electron convert --no-install
# Validate current directory
web-electron validate
# Validate specific project
web-electron validate ./my-vue-app
web-electron frameworks
The CLI uses a modular architecture where each framework is implemented as a separate adapter:
src/
├── core/ # Core system
│ ├── BaseFramework.js # Base class for all frameworks
│ ├── FrameworkRegistry.js # Framework registration and detection
│ ├── FrameworkFactory.js # Framework instantiation
│ ├── ConfigManager.js # Configuration management
│ ├── PluginManager.js # Plugin system
│ └── IFramework.js # Framework interface definition
├── frameworks/ # Framework adapters
│ ├── react/
│ │ └── ReactFramework.js
│ ├── vue/
│ │ └── VueFramework.js
│ ├── angular/
│ │ └── AngularFramework.js
│ └── svelte/
│ └── SvelteFramework.js
└── utils/ # Utility modules
├── file-generator.js # File generation using framework templates
└── package-manager.js # Package.json modification and dependency installation
Each framework implements the BaseFramework interface:
import { BaseFramework } from "../../core/BaseFramework.js";
export class MyFramework extends BaseFramework {
static displayName = "My Framework";
static description = "My awesome framework";
static icon = "🎯";
static supportedBuildSystems = ["vite", "webpack"];
// Detection
static canHandle(packageJson, projectDir) {
/* ... */
}
static async detectConfig(projectDir) {
/* ... */
}
// Configuration
getBuildConfig() {
/* ... */
}
getDevServerConfig() {
/* ... */
}
// Template generation
getMainTemplate() {
/* ... */
}
getPreloadTemplate() {
/* ... */
}
getHandlersTemplate() {
/* ... */
}
getBuilderTemplate() {
/* ... */
}
// Package.json modifications
getScripts() {
/* ... */
}
getPackageJsonModifications() {
/* ... */
}
getDependencies() {
/* ... */
}
}
After conversion, your project will have these new scripts:
# Start Electron in development mode
npm run electron-dev
# Build and package Electron app
npm run electron-build
# Build for distribution
npm run electron-dist
web-electron provides seamless TypeScript support for Electron main processes:
tsconfig.json presence or TypeScript dependenciesmain.ts, preload.ts, handlers/*.ts)For TypeScript projects, the CLI automatically chooses the best runtime based on your project's module system:
# For ESM projects (type: "module"), the dev script uses:
electron --loader=tsx/esm ./electron/main.ts
# For CommonJS projects, the dev script uses:
electron -r ts-node/register ./electron/main.ts
# For JavaScript projects, it uses:
electron .
TypeScript projects get:
electron/main.ts - Main Electron process with TypeScriptelectron/preload.ts - Preload script with TypeScriptelectron/handlers/app.ts - IPC handlers with TypeScript// src/frameworks/myframework/MyFramework.js
import { BaseFramework } from "../../core/BaseFramework.js";
export class MyFramework extends BaseFramework {
// Implement required methods...
}
// src/core/FrameworkRegistry.js
import { MyFramework } from "../frameworks/myframework/MyFramework.js";
export class FrameworkRegistry {
static frameworks = [
// ... existing frameworks
MyFramework,
];
}
Create plugins to extend functionality:
import { PluginManager, HOOKS } from "./src/core/PluginManager.js";
const myPlugin = {
name: "my-plugin",
hooks: {
[HOOKS.AFTER_FRAMEWORK_DETECTION]: async (data) => {
// Modify framework detection result
return data;
},
},
};
PluginManager.registerPlugin("my-plugin", myPlugin);
Create a .web-electron.json file in your project:
{
"frameworkPriority": ["react", "vue", "angular", "svelte"],
"buildConfigs": {
"react": {
"buildDir": "build",
"devPort": 3000
}
},
"electron": {
"version": "^28.0.0"
}
}
After conversion, your project will have:
your-project/
├── electron/ # Electron main process
│ ├── main.js (or .ts) # Main process entry point
│ ├── preload.js (or .ts) # Preload script for security
│ └── handlers/ # IPC handlers
│ └── app.js (or .ts) # Example handlers
├── electron-builder.yml # Electron Builder configuration
└── package.json # Updated with Electron scripts and dependencies
The generated Electron app follows security best practices:
package.json has the framework listed in dependenciesRun with verbose logging:
DEBUG=web-electron* web-electron convert
src/frameworks/BaseFrameworkMIT License - see LICENSE file for details.
FAQs
CLI tool to convert web projects into Electron apps
The npm package web-electron receives a total of 0 weekly downloads. As such, web-electron popularity was classified as not popular.
We found that web-electron demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39’s March 2026 meeting advanced eight ECMAScript proposals, including Temporal reaching Stage 4 and securing its place in the ECMAScript 2026 specification.
Research
/Security News
Since January 31, 2026, we identified at least 72 additional malicious Open VSX extensions, including transitive GlassWorm loader extensions targeting developers.
Research
Six malicious Packagist packages posing as OphimCMS themes contain trojanized jQuery that exfiltrates URLs, injects ads, and loads FUNNULL-linked redirects.