Migrating from Electron

VeloxKit targets Electron developers directly. This guide maps Electron concepts and APIs to their VeloxKit equivalents.

What changes

The big difference: no process split

Electron has a main process and renderer processes. IPC is required to cross the boundary. VeloxKit has one process — your React code and native APIs run together:

// Electron — renderer process, needs IPC
window.electron.ipcRenderer.invoke('read-file', path)
 
// VeloxKit — direct call, no IPC
const content = await fs.readText(path)

This eliminates the entire preload.js / contextBridge pattern.

Window management

// Electron
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 1200, height: 800 })
win.loadFile('index.html')
 
// VeloxKit — veloxkit.config.ts
window: {
  width: 1200,
  height: 800,
}

Multiple windows:

// VeloxKit
import { veloxWindow } from 'veloxkit'
 
function openPreferences() {
  veloxWindow.create({
    component: PreferencesWindow,
    title: 'Preferences',
    width: 600,
    height: 500,
  })
}

File dialogs

// Electron
const { dialog } = require('electron')
const result = await dialog.showOpenDialog({ properties: ['openFile'] })
const filePath = result.filePaths[0]
 
// VeloxKit
import { dialog } from 'veloxkit'
const filePath = await dialog.openFile()

Storing data

// Electron + electron-store
const Store = require('electron-store')
const store = new Store()
store.set('theme', 'dark')
const theme = store.get('theme')
 
// VeloxKit — use db directly
db.execute("INSERT OR REPLACE INTO settings VALUES ('theme', 'dark')")
const theme = db.query("SELECT value FROM settings WHERE key = 'theme'")[0]?.value

Or use @velox/store for a React-hook-based key-value store:

import { createStore } from '@velox/store'
 
const useSettings = createStore('settings', { theme: 'dark' })
 
// In a component:
const { state, set } = useSettings()
set({ theme: 'light' })

Menu bar / tray

Tray support is not yet implemented. Track it in the GitHub issues if you need it.

The recommended pattern for now is using a system notification to bring the window to the foreground:

// Workaround — bring window to foreground
veloxWindow.show()
veloxWindow.focus()

React migration

If your Electron app already uses React, migration is mostly:

1. Replace react-dom rendering with createApp
2. Replace DOM-dependent libraries with VeloxKit equivalents
3. Replace window, document, localStorage with VeloxKit APIs
4. Remove IPC code — call native APIs directly
5. Replace electron-* packages with veloxkit equivalents

// Before (Electron + React DOM)
import ReactDOM from 'react-dom/client'
ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
 
// After (VeloxKit)
import { createApp } from 'veloxkit'
createApp({ component: App })

What doesn't migrate

• Browser DevTools extensions — use CDP via veloxkit dev --inspect instead
• <webview> tag — VeloxKit doesn't embed a browser; openURL is not yet available — open a GitHub issue if you need it
• Node.js require() — use the VeloxKit binding equivalents
• Electron-specific npm packages (electron-updater, electron-builder) — replaced by veloxkit

Performance comparison

Migrating a typical Electron app to VeloxKit typically yields:

• Cold startup: 800ms → ~50ms (~16× faster)
• Binary size: 130MB → ~20MB (~6.5× smaller)
• Idle memory: ~100MB → ~18MB (~5.5× less)

These are real measurements on a notes-style app. Results vary by app complexity.