https://github.com/singuerinc/overlay

Set of tools for devs and designers to measure, align and overlay on-screen graphics and layouts.
https://github.com/singuerinc/overlay

aligning electron-app measuring on-screen overlay tool

Last synced: about 19 hours ago
JSON representation

Set of tools for devs and designers to measure, align and overlay on-screen graphics and layouts.

• Host: GitHub
• URL: https://github.com/singuerinc/overlay
• Owner: singuerinc
• License: mit
• Created: 2018-04-25T13:01:18.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-09-06T09:25:09.000Z (5 months ago)
• Last Synced: 2025-01-28T06:03:58.685Z (8 days ago)
• Topics: aligning, electron-app, measuring, on-screen, overlay, tool
• Language: TypeScript
• Homepage: https://overlay.singuerinc.com
• Size: 18.7 MB
• Stars: 120
• Watchers: 5
• Forks: 10
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Overlay

![](resources/icons/128x128.png)

Overlay is a set of tools for developers and designers to measure, align and overlay on-screen graphics and layouts. Similar to [xScope](https://xscopeapp.com/) but with a simple interface, limited functionality and open source.

[Download](https://github.com/singuerinc/overlay/releases) (Mac only)

## Goals

- Minimal interface

- Simple to use

- Free - always

## Toolbox

![](resources/images/toolbox.png)

From the toolbox you can manage, add tools, display the help page, and show or hide all the items in the screen.

## Tools

### Guides

Horizontal and vertical guides are useful when you need to align several items in the same axis.

![](resources/images/guides.png)

### Rulers

Rulers are great to measure objects, they are semi-transparent, in different colors, and can be cloned.

![](resources/images/rulers.png)

### Onion images

The onion image serve as a visual guide to match a layout. Opacity and inverted colors can be applied.

![](resources/images/inverted-only.png)

![](resources/images/inverted-browser.png)

### The Grid

The grid is similar to the ruler but covers the whole screen and has no background color. It is a 10x10 pixels fixed grid but that value can be defined in the settings.

![](resources/images/grid.png)

### Columns

In progress. Not ready yet.