{"id":16783117,"url":"https://github.com/bengreenier/overlayed","last_synced_at":"2025-03-22T00:31:49.267Z","repository":{"id":74695493,"uuid":"146940634","full_name":"bengreenier/overlayed","owner":"bengreenier","description":"stream overlays that broadcasters can see 🎬🔴","archived":false,"fork":false,"pushed_at":"2018-11-16T16:54:15.000Z","size":202,"stargazers_count":28,"open_issues_count":19,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T06:35:55.620Z","etag":null,"topics":["electron","react","streamer","streamer-tool"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bengreenier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-31T20:43:29.000Z","updated_at":"2024-06-11T17:05:12.000Z","dependencies_parsed_at":"2023-02-25T07:45:23.562Z","dependency_job_id":null,"html_url":"https://github.com/bengreenier/overlayed","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bengreenier%2Foverlayed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bengreenier%2Foverlayed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bengreenier%2Foverlayed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bengreenier%2Foverlayed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bengreenier","download_url":"https://codeload.github.com/bengreenier/overlayed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244890102,"owners_count":20527030,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","react","streamer","streamer-tool"],"created_at":"2024-10-13T07:49:00.202Z","updated_at":"2025-03-22T00:31:49.260Z","avatar_url":"https://github.com/bengreenier.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# overlayed 🎬🔴\n\n![project status](https://img.shields.io/badge/Project%20Status-Alpha-red.svg)\n[![GitHub release](https://img.shields.io/github/release/bengreenier/overlayed.svg)](https://github.com/bengreenier/overlayed/releases)\n[![Build Status](https://travis-ci.org/bengreenier/overlayed.svg?branch=master)](https://travis-ci.org/bengreenier/overlayed)\n[![Discord](https://img.shields.io/discord/393575719545864222.svg)](https://discord.gg/Vg7VMVe)\n\n![overlayed header](./.github/header.png)\n\nOverlayed is a tool that enables streamers to see their overlays atop their desktop. I built it to interact more seamlessly with my viewers. If you want to interact in faster, more interesting ways it may be built for you too. ❤️\n\n## Table of contents\n\n+ [Installation](#installation)\n+ [Configuration](#configuration)\n  + [Screen Layout](#screen-layout)\n  + [Built-in Overlays](#built-in-overlays)\n  + [Custom Overlays](#custom-overlays)\n+ [Contributing](#contributing)\n  + [Core](#core)\n  + [Building an Overlay](#building-an-overlay)\n+ [License](#license)\n\n## Installation\n\nCurrently, This project is in Alpha status. As such, the only way to install is to clone this repository, and [Build it](#core).\n\n## Configuration\n\n\u003e Note: Most folks will use our __shiny new editor__ ✨ \n\nTo open the settings editor, click the Overlayed icon in your taskbar, and choose \"Settings\".\n\n![settings editor](.github/access-settings.png)\n\n\u003cdetails\u003e\n\u003csummary\u003e\nTechnical details\n\u003c/summary\u003e\n\nOverlayed uses [electron-settings](https://github.com/nathanbuchar/electron-settings) under the hood, which saves settings to different locations based on your operating system. \n\n| Windows | Mac | Linux |\n| ------- | --- | ----- |\n|`%APPDATA%/overlayed/Settings`|`~/Library/Application\\ Support/Overlayed/Settings`|`$XDG_CONFIG_HOME/Overlayed/Settings`|\n||| or |\n|||`~/.config/Overlayed/Settings`|\n\nLearn more [in the electron-settings FAQ](https://github.com/nathanbuchar/electron-settings/wiki/FAQs#where-is-the-settings-file-saved).\n\n### Screen Layout\n\nOverlayed can be configured to overlay above a portion of your screen, which can be great if you don't share your entire display when streaming.\n\nTo configure the screen layout, modify the following settings:\n\n```\n{\n  \"overlayed\": {\n    \"window\": {\n      \"x\": 780,\n      \"y\": 0,\n      \"width\": 1920,\n      \"height\": 1080\n    }\n  }\n}\n```\n\n+ `x` - the left-most side of the overlay region\n+ `y` - the top-most side of the overlay region\n+ `width` - the total width of the overlay region\n+ `height` - the total height of the overlay region\n\n### Built-In Overlays\n\nOverlayed ships with some built-in overlays. These live [in this directory](./src/app/plugin) and are now configurable!  You can find more information below.\n\n### Custom Overlays\n\nOverlayed supports loading custom plugins from your home directory. To add custom overlays, create a folder in your home directory named `.overlayed` and a folder for each plugin inside that parent folder. For example:\n\n```\nhome/\n  .overlayed/\n    TestPlugin/\n      package.json\n      TestPlugin.js\n    OtherPlugin/\n      package.json\n      OtherPlugin.js\n```\n\nAll plugins, including custom plugins, are now configurable by adding an object to the configuration file containing the plugin config, indexed by the plugin name.\n For instance:\n {\n    \"clock\": {\n       \"locale\": \"en-US\"\n    }\n}\n\n\u003c/details\u003e\n\n## Contributing\n\nThis project loves new contributors, but it is maintained as a side project. If you feel you aren't getting traction, please be patient!\n\n### Core\n\nTo contribute to the core of the project (namely, this repository) you'll need the following things:\n\n+ [Git](https://git-scm.com/)\n+ [Node](https://nodejs.org/)\n\nThen clone this repository and execute the following commands from the directory in which you cloned into (likely `overlayed`):\n\n```\nnpm install\nnpm run build\nnpm start\n```\n\nThese will (in order): install dependencies, build the project, start the application. Please note that this project uses [typescript](https://www.typescriptlang.org/) to build files into the `dist/` folder. As such, the `dist/` folder should not be modified by engineers, nor should it be included in PRs.\n\n### Building an Overlay\n\n\u003e A more detailed walkthrough is coming soon! ✨ \n\n+ Create a new directory `.overlayed` in your [home directory](http://www.linfo.org/home_directory.html)\n+ Create a new directory under `.overlayed` for your overlay, like `MyOverlay`\n+ Run `npm init` or manually create a `package.json` file\n+ Ensure `package.json` contains `name`, `version`, and `main`\n+ Ensure main points to a `.js` file that has a [default export](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#Using_the_default_export) (or `module.exports.default = YourClass`)\n+ Profit! Overlayed will attempt to load your plugin on start\n\nFor example:\n\n__TestOverlay.js:__\n```\nexport default class TestOverlay extends React.Component {\n  render() {\n    return \u003ch1\u003eHello World\u003c/h1\u003e\n  }\n}\n```\n\n\n__package.json:__\n```\n{\n  \"name\": \"test-overlay\",\n  \"version\": \"0.0.1\",\n  \"main\": \"TestOverlay.js\"\n}\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbengreenier%2Foverlayed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbengreenier%2Foverlayed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbengreenier%2Foverlayed/lists"}