{"id":25707722,"url":"https://github.com/jhsware/streamix-package-examples","last_synced_at":"2026-02-19T14:31:43.249Z","repository":{"id":92670968,"uuid":"542223866","full_name":"jhsware/streamix-package-examples","owner":"jhsware","description":"Graphics package examples for Streamix Panel. A graphics overlay software for the ATEM Mini series of video mixers.","archived":false,"fork":false,"pushed_at":"2023-02-15T20:11:20.000Z","size":5925,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-20T17:47:23.832Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/jhsware.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-27T18:05:54.000Z","updated_at":"2022-10-01T13:11:57.000Z","dependencies_parsed_at":"2023-03-22T00:24:00.067Z","dependency_job_id":null,"html_url":"https://github.com/jhsware/streamix-package-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jhsware/streamix-package-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Fstreamix-package-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Fstreamix-package-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Fstreamix-package-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Fstreamix-package-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhsware","download_url":"https://codeload.github.com/jhsware/streamix-package-examples/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhsware%2Fstreamix-package-examples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29618261,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T13:04:20.082Z","status":"ssl_error","status_checked_at":"2026-02-19T13:03:33.775Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":[],"created_at":"2025-02-25T08:38:52.212Z","updated_at":"2026-02-19T14:31:43.233Z","avatar_url":"https://github.com/jhsware.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Graphics Package Development\n\nStreamix Panel is a graphics overlay software for the ATEM Mini series of video mixers. Graphics are created using packages that can be imported to your project.\n\nIn the folder `examples/` you will find some example packages to get you started. You can code live in your editor but if you want to create your own package you should [create one from scratch](https://github.com/jhsware/streamix-package-templates) and copy the files in `src/` to your new project.\n\nDevelopment requirements:\n- Node.js 16 or later\n- Web browser (Safari recommended, but Chrome or Edge will work in most cases)\n\nThere are three types of packages. They are all coded in the same way but differ in configuration:\n- **graphics overlay:** used for graphics placed over the camera feed\n- **fullscreen graphics overlay:** used for video playback or fullscreen graphics\n- **stinger:** used for stinger transitions\n\n## How to Run the Examples in a Browser\n1. Check out the example repos using Git or download a ZIP-file (press the green button named \"Code v\")\n\n```sh\ngit clone git@github.com:jhsware/streamix-package-examples.git\n```\n\n2. Go to the root folder and run install \n\n```sh\ncd streamix-package-examples\nnpm i\n```\n\n3. Start the development server for the grahics package you want to try out\n\n```sh\ncd examples/graphics-logo\nnpm run dev\n```\n\nIf you are stuck on the previous graphics package due to caching, just change the port:\n\n```sh\nPORT=8080 npm run dev\n```\n\nYou can now open a webpage at the address shown in the terminal. It is recomended to use Safari for preview because it uses the same rendering engine as the Streamix Panel app, but both Chrome and Edge will work if nothing else is available.\n\n**NOTE:** Source maps are currently broken in these examples. Setting breakpoints in browser won't be useful.\n\n## How to Build the Examples for Streamix Panel\nYou can build these examples and import them into Streamix Panel. Follow steps 1 \u0026 2 in \"How to Run the Examples in a Browser\", then run the build command:\n\n```sh\nnpm run build:all\n```\n\nYou can find the importable packages in each examples `build/` folder.\n\n## Example Packages\n- **confetti-celibrate:** shoot some confetti at the push of a button\n- **count-down:** add a fullscreen countdown timer with target time\n- **fetch-json:** fetch and display a comment from an external API\n- **graphics-logo:** show an image on screen\n- **graphics-name-tag:** show a name tag with customisable text\n- **stinger-poc:** perform a stinger transition to switch between scenes\n- **video-player:** show fullscreen video content (from your project video folder)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhsware%2Fstreamix-package-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhsware%2Fstreamix-package-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhsware%2Fstreamix-package-examples/lists"}