qgn / for / developers
A screenshot tool that gets out of your editor's way.
You live in an editor, a terminal and a browser. A screenshot should cost one key and zero windows. That is what QGN is for.
Most of a developer's screenshots go one place: pasted somewhere else, ten seconds later. A pull request. An issue. A Slack thread. A chat with a coding agent that takes images. QGN is built around that. Press ctrl+q, drag, and the image is on your clipboard before the overlay closes. No save dialog, no editor popping up, no file to clean up later.
the loop
- ctrl+q from anywhere. Your editor keeps focus until you press it.
- Drag a region, or click a window to get exactly that window.
- ctrl+v into the PR, the issue or the chat. GitHub takes pasted images directly.
things that matter when you code
- Window capture. Hover a terminal or a browser and it is outlined and named with its size. Click it. You get its exact edges, no wallpaper creeping in.
- Pixel loupe. A magnifier follows the cursor with live coordinates and the colour under it. Handy when a layout is off by two pixels and you want to know which two.
- Sizes as you drag. Width and height show while you select. Hold shift for a square, or alt as you release to nudge the edges with the arrow keys before it is taken.
- Copy formats. PNG by default. JPG or WebP with a quality slider when size matters. A base64 data URI when you are pasting into code.
- Redaction that sticks. Tokens and emails get a solid block, not a blur someone can undo. See annotation.
- GIFs for pull requests. ctrl+shift+q records a region. Trim it, let Studio zoom in on your clicks, export a GIF or MP4. See screen recording.
- Already copied something? The tray menu opens whatever image is on your clipboard in Studio, so a screenshot from anywhere gets the same tools.
what it is made of
Electron, vanilla JavaScript, plain HTML for each window. The main process is one main.js. No framework, no UI build step. Sharp for images, WebCodecs for video. MIT licensed, and the source is on GitHub, so if something bugs you, you can read why.
git clone https://github.com/Mopra/qgn.app.git cd qgn.app npm install npm start
what it doesn't do
- No upload to a link. If you want a URL, paste into a GitHub comment and let GitHub host it.
- No scrolling capture of long pages.
- No command line or scripting API for automated screenshots.
- No Mac or Linux build.
questions
Can QGN copy a screenshot as base64?
Yes. Set the copy format to base64 data URI in Settings, and every capture lands on the clipboard as a data: URI you can paste into HTML, CSS or a test fixture.
Can I make a GIF for a pull request?
Yes. Record a region with Ctrl+Shift+Q, trim it in Studio, and export GIF, animated WebP, MP4 or WebM. Studio shows the output size before you export.
Is the source available?
Yes, MIT licensed on GitHub. Electron, vanilla JavaScript, one main.js. Pull requests are welcome.