microsoft · Tyriar · Dec 24, 2025 · Dec 24, 2025
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -11,7 +11,8 @@ module.exports = {
   },
   "ignorePatterns": [
     "**/typings/*.d.ts",
-    "scripts/**/*"
+    "scripts/**/*",
+    "examples/**/*",
   ],
   "plugins": [
     "@typescript-eslint"

diff --git a/examples/electron/README.md b/examples/electron/README.md
@@ -1,12 +1,18 @@
-This is a minimal example of getting a terminal running in Electron using [node-pty](https://github.com/Tyriar/node-pty) and [xterm.js](https://github.com/sourcelair/xterm.js).
+This is a minimal example of getting a terminal running in Electron using [node-pty](https://github.com/microsoft/node-pty) and [xterm.js](https://github.com/xtermjs/xterm.js).
 
 ![](./images/preview.png)
 
+It works by using xterm.js on the renderer process and node-pty on the main process with IPC to communicate back and forth.
+
 ## Usage
 
 ```bash
-# Install npm dependencies using Electron's version of V8
-./npm_install.sh
+# Install dependencies (Windows)
+./npm-install.bat
+
+# Install dependencies (non-Windows)
+./npm-install.sh
+
 # Launch the app
 npm start
 ```
diff --git a/examples/electron/index.html b/examples/electron/index.html
@@ -7,8 +7,7 @@
   </head>
   <body>
     <div id="xterm"></div>
+    <script src="./node_modules/xterm/lib/xterm.js"></script>
+    <script type="module" src="./renderer.js"></script>
   </body>
-  <script>
-    require('./renderer.js')
-  </script>
 </html>
diff --git a/examples/electron/main.js b/examples/electron/main.js
@@ -1,70 +1,77 @@
-const electron = require('electron')
-// Module to control application life.
-const app = electron.app
-// Module to create native browser window.
-const BrowserWindow = electron.BrowserWindow
+const { app, BrowserWindow, ipcMain } = require('electron');
+const path = require('path');
+const os = require('os');
+const pty = require('node-pty');
 
-const path = require('path')
-const url = require('url')
+let mainWindow;
+let ptyProcess;
 
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-// node-pty is not yet context aware
-app.allowRendererProcessReuse = false;
-
-function createWindow () {
-  // Create the browser window.
+function createWindow() {
   mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
-    // Node integration is required to run node-pty in the renderer process
     webPreferences: {
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false
     }
-  })
+  });
 
-  // and load the index.html of the app.
-  mainWindow.loadURL(url.format({
-    pathname: path.join(__dirname, 'index.html'),
-    protocol: 'file:',
-    slashes: true
-  }))
+  mainWindow.loadFile('index.html');
 
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-  })
+  mainWindow.on('closed', () => {
+    if (ptyProcess) {
+      ptyProcess.kill();
+      ptyProcess = null;
+    }
+    mainWindow = null;
+  });
 }
 
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.on('ready', createWindow)
+// Handle pty spawn request from renderer
+ipcMain.on('pty-spawn', () => {
+  if (ptyProcess) return;
+
+  const shell = process.env[os.platform() === 'win32' ? 'COMSPEC' : 'SHELL'];
+  ptyProcess = pty.spawn(shell, [], {
+    name: 'xterm-256color',
+    cols: 80,
+    rows: 30,
+    cwd: process.env.HOME || process.env.USERPROFILE,
+    env: process.env
+  });
+
+  ptyProcess.onData(data => {
+    if (mainWindow && !mainWindow.isDestroyed()) {
+      mainWindow.webContents.send('pty-data', data);
+    }
+  });
+});
 
-// Quit when all windows are closed.
-app.on('window-all-closed', function () {
-  // On OS X it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
+// Handle pty input from renderer
+ipcMain.on('pty-write', (_, data) => {
+  if (ptyProcess) {
+    ptyProcess.write(data);
+  }
+});
+
+// Handle resize from renderer
+ipcMain.on('pty-resize', (_, { cols, rows }) => {
+  if (ptyProcess) {
+    ptyProcess.resize(cols, rows);
+  }
+});
+
+app.whenReady().then(createWindow);
+
+app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
-    app.quit()
+    app.quit();
   }
-})
+});
 
-app.on('activate', function () {
-  // On OS X it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
+app.on('activate', () => {
   if (mainWindow === null) {
-    createWindow()
+    createWindow();
   }
-})
-
-// In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and require them here.
+});