Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Build an Electron screenshot app as a small, explicit workflow: let the user choose a screen or window, capture one still frame, show a preview, then offer separate copy and save actions. Electron’s desktopCapturer enumerates screen and window sources; a media stream can provide the frame to render into a canvas. Keep capture, clipboard access, and file writing behind narrowly scoped main-process APIs rather than exposing Node.js or unrestricted IPC to the renderer.
The example below is an implementation pattern, not a one-line screenshot API or a guarantee of identical behavior on every operating system. Test the packaged application on each supported Electron and OS combination, especially for screen-capture permissions and source-picker behavior.
Choose the capture flow before you write the UI
There are two useful approaches. With desktopCapturer, your app builds its own source picker and controls how screens and windows are presented. Alternatively, Electron can mediate a browser getDisplayMedia request through a main-process handler; depending on Electron version and platform, you can evaluate the documented system-picker option. Electron currently labels the system-picker behavior experimental, so do not promise the same picker experience across operating systems without testing it.
| Approach | Good fit | Trade-off |
|---|---|---|
Custom picker using desktopCapturer.getSources |
You need your own screen/window list, labels, thumbnails, or app-specific flow. | You own picker design, source selection, empty states, and platform testing. |
| Display-media request mediated in the main process | You want the renderer to request a stream while the main process controls which source can be selected. | Picker and permission behavior depend on Electron version and target OS; experimental system-picker behavior requires validation. |
A screen or window still capture does not need audio. Keep audio out of the initial feature unless users need it; it brings separate platform support and permission requirements.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
Set up a secure Electron process boundary
Before adding capture, create a BrowserWindow with a preload script, context isolation, and sandboxing where suitable. The renderer should handle the picker and preview, while the main process owns access to Electron capture APIs, the clipboard, and filesystem writes. Electron’s security guidance stresses that risk includes Chromium, Node.js, Electron, dependencies, and application code; a compromised renderer becomes more consequential if it can reach privileged APIs.
Expose named operations through contextBridge, such as listSources, chooseSource, copyImage, and saveImage. Do not expose the entire ipcRenderer API or a generic helper that lets the renderer send arbitrary channel names. Avoid loading untrusted remote code with Node integration enabled.
Minimal window and preload
A secure starting point is to keep the renderer local and make the bridge deliberately small:
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute// main.js
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
function createWindow() {
const win = new BrowserWindow({
width: 900,
height: 700,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: false,
sandbox: true
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('captureApp', {
listSources: () => ipcRenderer.invoke('capture:list-sources'),
savePng: (dataUrl) => ipcRenderer.invoke('capture:save-png', dataUrl),
copyPng: (dataUrl) => ipcRenderer.invoke('capture:copy-png', dataUrl)
});In production, validate inputs at both boundaries. A data URL from the renderer is not inherently trustworthy just because the app generated it.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Enumerate sources and let the user choose
Call desktopCapturer.getSources in the main process with only the source types your product supports: screen, window, or both. If the picker displays previews, request thumbnails at a deliberate size. If it only needs names, set thumbnail dimensions to zero to avoid thumbnail work. Return a minimal representation to the UI—such as an application-managed identifier, title, and optional thumbnail—not raw privileged Electron objects.
// main.js — illustrative source-list handler
const { ipcMain, desktopCapturer } = require('electron');
ipcMain.handle('capture:list-sources', async () => {
const sources = await desktopCapturer.getSources({
types: ['screen', 'window'],
thumbnailSize: { width: 240, height: 150 }
});
return sources.map((source, index) => ({
// Use an app-managed index/selection flow; do not treat renderer input
// as authority to access arbitrary Electron objects.
index,
name: source.name,
thumbnail: source.thumbnail.toDataURL()
}));
});For a names-only picker, use thumbnailSize: { width: 0, height: 0 } and omit the thumbnail field. Handle an empty returned list as a normal UI state: explain that no source is available and let the user cancel or retry.
Electron’s documented display-media request handler offers another way to mediate source selection in the main process. The browser getDisplayMedia interface does not select a source through deviceId; do not build a flow around that assumption. If you choose the system picker, confirm its behavior against the exact Electron version and OS configurations you ship.
Capture one still frame from the selected source
Electron’s documented capture path connects a selected desktop source to media capture. For a still image, request the stream, wait for a video frame, draw that frame to a canvas, and convert the canvas to an image representation. Always stop the media tracks after the frame is obtained or when the user cancels. A stream can fail or yield no usable frame, so make those states visible rather than leaving a spinner running.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
The following renderer-side pattern assumes your main process has already mediated the display-media request and the user has selected an allowed source. The exact handler wiring should follow the Electron API for your chosen version:
// renderer.js — capture a single frame from the permitted display stream
async function captureStill() {
let stream;
try {
stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: false
});
const video = document.createElement('video');
video.srcObject = stream;
video.muted = true;
await video.play();
await new Promise((resolve, reject) => {
if (video.videoWidth && video.videoHeight) return resolve();
video.addEventListener('loadedmetadata', resolve, { once: true });
video.addEventListener('error', reject, { once: true });
});
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
return canvas.toDataURL('image/png');
} finally {
if (stream) stream.getTracks().forEach(track => track.stop());
}
}In a production implementation, also cover cancellation, permission denial, stream-ended events, zero dimensions, and exceptions from play() or canvas conversion. Do not assume every screen has the same dimensions or that the first frame is immediately ready. Keep the stream alive only as long as needed for the still capture.
Preview first, then copy or save
Put the captured image in a preview and let the user decide whether to copy or save it. The clipboard path supports the next action—pasting into another app—while file export needs a destination, format, naming behavior, and clear failure feedback. Electron’s nativeImage is a common image abstraction, and Electron’s clipboard documentation lists PNG and JPEG among standard image types.
Recommended Free Tools
Copy to clipboard
Send the validated image representation through a dedicated IPC method; perform clipboard work in the main process. Keep this path specific to images rather than exposing general clipboard access.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
// main.js — narrow clipboard handler
const { ipcMain, clipboard, nativeImage } = require('electron');
ipcMain.handle('capture:copy-png', async (_event, dataUrl) => {
if (typeof dataUrl !== 'string' || !dataUrl.startsWith('data:image/png;')) {
throw new Error('Expected a PNG data URL');
}
const image = nativeImage.createFromDataURL(dataUrl);
if (image.isEmpty()) throw new Error('Image data could not be decoded');
clipboard.writeImage(image);
return { ok: true };
});Save to a user-selected path
For file export, open a save dialog in the main process, restrict the offered extension to the formats you implement, and report cancellation separately from write failure. The sketch below intentionally writes PNG; do not present JPEG or other formats in the UI until you implement their encoding and validation.
// main.js — save PNG with a user-controlled destination
const { ipcMain, dialog } = require('electron');
const fs = require('node:fs/promises');
ipcMain.handle('capture:save-png', async (event, dataUrl) => {
if (typeof dataUrl !== 'string' || !dataUrl.startsWith('data:image/png;base64,')) {
throw new Error('Expected a base64 PNG data URL');
}
const win = BrowserWindow.fromWebContents(event.sender);
const result = await dialog.showSaveDialog(win, {
title: 'Save screenshot',
defaultPath: 'screenshot.png',
filters: [{ name: 'PNG image', extensions: ['png'] }]
});
if (result.canceled || !result.filePath) return { canceled: true };
const base64 = dataUrl.slice('data:image/png;base64,'.length);
await fs.writeFile(result.filePath, Buffer.from(base64, 'base64'));
return { canceled: false, filePath: result.filePath };
});In a finished app, enforce a sensible maximum payload size, validate the decoded image, and return errors the UI can explain. Avoid silently overwriting an existing file; the save dialog and its platform-specific behavior should be tested in the packaged build.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Test permissions and platform differences
Run checks in development and in the signed or packaged form users will actually install. Verify source enumeration, screen/window selection, permission prompts, capture output, clipboard paste, save location, cancellation, and errors on every supported target.
Free tools Windows power users keep installed
One-click scans. No signup required.
- macOS: On macOS 10.15 and later, screen-content capture requires user consent. Test denial and the later retry path. If you add audio capture, Electron documents
NSAudioCaptureUsageDescriptionfor audio capture on macOS 14.2 and later. - Linux with PipeWire: Electron documents that only one source is returned; that source can represent a window even when both screen and window types were requested. Do not assume the custom picker will receive a full list.
- Windows and other Linux configurations: Behavior can vary by OS version, compositor, packaging, and Electron version. The available documentation cited here does not establish one universal behavior for every configuration, so define your supported combinations and test them.
Still images need no audio permissions. If audio becomes a separate feature, design and test its support and permission flow independently rather than enabling it by default.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Troubleshoot the common failure points
| Symptom | Likely cause | What to check |
|---|---|---|
| No source appears | The OS returned an empty list, permissions are unavailable, or the capture environment restricts enumeration. | Handle the empty result explicitly; test permissions and the packaged build. On Linux with PipeWire, account for the documented single-source behavior. |
| Capture is denied or immediately ends | User consent was declined, the source is no longer available, or the display-media handler did not provide an allowed video source. | Show a retry/cancel state, check the main-process handler and permission flow, and avoid attempting to bypass the OS decision. |
| Preview is blank or dimensions are zero | The first frame was not ready, playback failed, or the stream ended before drawing. | Wait for metadata and a usable frame, check videoWidth/videoHeight, and stop tracks in a finally block. |
| Copy or save fails | Malformed or oversized image data, a rejected save dialog, or a filesystem/clipboard error. | Validate the image at the IPC boundary, distinguish cancellation from failure, and show a useful error rather than reporting success. |
| Works in development but not after packaging | OS consent, packaging configuration, preload path, or target-specific behavior differs. | Test the actual packaged artifact on each supported OS; verify preload loading and the permission path there. |
Keep the first version small; add features deliberately
A reliable first release needs source choice, one still frame, preview, copy, save, cancellation, and failure states. Region selection, annotation, automatic naming, and other editing features are product decisions, not requirements imposed by Electron’s capture API. Add them only after the basic flow is correct on supported platforms.
For responsiveness, request thumbnails only when the picker displays them, avoid keeping capture streams open after taking a still, and do not repeatedly enumerate sources without a user action or a clear refresh need. Electron’s documentation does not establish a performance benchmark for a screenshot app; measure your own UI and capture experience on representative target machines rather than promising a universal capture time.
Or skip the browser setup
If your goal is to capture a website rather than an arbitrary desktop screen or application window, ScreenshotNeo is a website screenshot API and MCP server. One GET request can return an image or PDF, so there is no Electron media-stream setup for that website-capture task. It is not a replacement for capturing arbitrary desktop pixels.
cURL example, with the API documentation at ScreenshotNeo docs:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpCookie banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month—no card required.
Frequently Asked Questions
Does Electron provide a one-call API that returns a screenshot file?
No. The documented flow enumerates or mediates a display source and captures it as media; a still-image step and an export path are application work.
Can I use ScreenshotNeo to capture a desktop window?
No. ScreenshotNeo captures websites from a URL. Use Electron’s display-capture flow for arbitrary screens and windows.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
