{"id":21487405,"url":"https://github.com/dtinth/overlayer","last_synced_at":"2026-05-20T07:35:29.563Z","repository":{"id":37202408,"uuid":"211129841","full_name":"dtinth/overlayer","owner":"dtinth","description":"Electron app for displaying arbitrary overlays onscreen","archived":false,"fork":false,"pushed_at":"2023-01-07T04:21:34.000Z","size":305,"stargazers_count":3,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-19T12:48:23.215Z","etag":null,"topics":["electron"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dtinth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-26T16:06:27.000Z","updated_at":"2021-09-14T16:54:52.000Z","dependencies_parsed_at":"2023-02-06T11:30:26.512Z","dependency_job_id":null,"html_url":"https://github.com/dtinth/overlayer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dtinth/overlayer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Foverlayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Foverlayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Foverlayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Foverlayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dtinth","download_url":"https://codeload.github.com/dtinth/overlayer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtinth%2Foverlayer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33250371,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-20T04:48:54.280Z","status":"ssl_error","status_checked_at":"2026-05-20T04:48:10.851Z","response_time":356,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron"],"created_at":"2024-11-23T13:28:44.689Z","updated_at":"2026-05-20T07:35:29.548Z","avatar_url":"https://github.com/dtinth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# overlayer\n\nA simple Electron app that starts a web server that lets you overlay an arbitrarily HTML content on your screen.\n\n## Usage\n\n### Setting up a secret key\n\nTo secure the application from being used by unauthorized clients, we need to generate a secret key first.\nThis will do, I guess:\n\n```shell\nnode -p \"crypto.randomBytes(20).toString('hex')\"\n```\n\nThen, create a configuration file and put it at `$HOME/.overlayerrc.json`:\n\n```json\n{\n  \"key\": \"7d382308f2a4b8c2a1165bc801bd49ebc3751b3c\"\n}\n```\n\nWhen you run the app, it will say “Overlayer is ready” onscreen.\nIt will also bind a web server to localhost:29292.\n\n### Displaying an overlay\n\nYou can run the following script to display some text on screen:\n\n```js\nfetch(\n  'http://localhost:29292/overlayer/7d382308f2a4b8c2a1165bc801bd49ebc3751b3c',\n  {\n    method: 'PATCH',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n      overlays: {\n        hello: `\n          \u003cdiv style=\"font: bold 200px sans-serif; color: white; text-shadow: 0 3px 16px black\"\u003e\n            Hello, world!\n          \u003c/div\u003e\n        `\n      },\n    }),\n  },\n)\n```\n\nThis creates an overlay with ID `hello` with the specified HTML content.\n\nThis application can display multiple overlays, identified by its ID.\nThis allows multiple applications and scripts to display an overlay on the screen without each application having to create its own window.\n\n### Displaying an overlay with dynamic data\n\nAlways having to generating an HTML and taking care of escaping the content can be complicated,\nso, overlayer also supports Vue.js templates.\n\nInstead of sending your overlay data as a string, you can send an object with this these properties:\n\n- `template` — the template code to use\n- `css` — the CSS code to inject into the web page\n- `data` — the data to be bound to the Vue instance as `data` variable\n\n```js\nfetch(\n  'http://localhost:29292/overlayer/7d382308f2a4b8c2a1165bc801bd49ebc3751b3c',\n  {\n    method: 'PATCH',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n      overlays: {\n        hello: {\n          template: `\u003cdiv\u003e{{ data.text }}\u003c/div\u003e`,\n          css: `#hello div { font: bold 200px sans-serif; color: white; text-shadow: 0 3px 16px black }`,\n          data: { text: 'Hello, world!' },\n        },\n      },\n    }),\n  },\n)\n```\n\n### Removing an overlay\n\nTo clear the overlay, just set its content to `null`:\n\n```js\nfetch(\n  'http://localhost:29292/overlayer/7d382308f2a4b8c2a1165bc801bd49ebc3751b3c',\n  {\n    method: 'PATCH',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n      overlays: {\n        hello: null\n      },\n    }),\n  },\n)\n```\n\n### Restarting the app\n\nIn case some overlays get stuck on the screen or made your system unusable,\nyou can restart the app, which clears all the overlays onscreen, by pressing Command+Option+Control+Shift+R.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtinth%2Foverlayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdtinth%2Foverlayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtinth%2Foverlayer/lists"}