{"id":20058899,"url":"https://github.com/ably-labs/collaborative-pixel-drawing","last_synced_at":"2026-05-13T06:03:17.073Z","repository":{"id":43573181,"uuid":"510690303","full_name":"ably-labs/collaborative-pixel-drawing","owner":"ably-labs","description":"A collaborative pixelart drawing carnvas to demonstrate pub/sub using Ably or Azure WebPubSub.","archived":false,"fork":false,"pushed_at":"2023-09-04T12:25:24.000Z","size":530,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-02T09:45:27.476Z","etag":null,"topics":["ably","azure-functions","demo","dotnet","javascript","pubsub","serverless","websocket"],"latest_commit_sha":null,"homepage":"https://pixel-paint.ably.dev/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ably-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-07-05T10:33:34.000Z","updated_at":"2023-08-10T01:03:43.000Z","dependencies_parsed_at":"2025-03-02T09:43:06.526Z","dependency_job_id":"445f2371-6157-46a7-ae00-23bf4875ff5d","html_url":"https://github.com/ably-labs/collaborative-pixel-drawing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"ably-labs/ably-labs-template-repo","purl":"pkg:github/ably-labs/collaborative-pixel-drawing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fcollaborative-pixel-drawing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fcollaborative-pixel-drawing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fcollaborative-pixel-drawing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fcollaborative-pixel-drawing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ably-labs","download_url":"https://codeload.github.com/ably-labs/collaborative-pixel-drawing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably-labs%2Fcollaborative-pixel-drawing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286079811,"owners_count":27282121,"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","status":"online","status_checked_at":"2025-11-27T02:00:05.795Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["ably","azure-functions","demo","dotnet","javascript","pubsub","serverless","websocket"],"created_at":"2024-11-13T13:04:50.924Z","updated_at":"2025-11-27T07:05:34.264Z","avatar_url":"https://github.com/ably-labs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Collaborative pixelart drawing\n\n![Screenshot](/media/collaborative-pixelart-drawing.gif)\n\n## Description\n\nThis repository contains an example how to synchronize state in realtime between many client devices using serverless WebSockets (Ably or Azure Web PubSub). The context of the example is a collaborative drawing canvas that multiple people can use at the same time to draw pixelart. The code in this repo is used in the blog post [Cloud pubsub services compared: Azure Web PubSub vs Ably](https://ably.com/blog/cloud-pubsub-services-compared-azure-web-pubsub-ably?utm_source=github\u0026utm_medium=repo\u0026utm_campaign=collaborative-pixelart-drawing).\n\nThis repository contains two implementations of the same project:\n\n- The [`main` branch](https://github.com/ably-labs/collaborative-pixel-drawing) of this repo contains the implementation using Ably.\n- The [`azure-web-pubsub` branch](https://github.com/ably-labs/collaborative-pixel-drawing/tree/azure-web-pubsub) contains the implementation using Azure Web PubSub.\n\n\u003e This repository also contains a [CodeTour](https://code.visualstudio.com/learn/educators/codetour) for each of these branches, which you can use to navigate the code when you're using VSCode. You will be asked to download the CodeTour extension when you open the folder.\n\n## Tech stack\n\nThis project uses the following components:\n\n- [p5js](https://p5js.org/); A creative coding library, used for the drawing canvas.\n- [Ably](https://ably.com?utm_campaign=GLB-2208-collaborative-pixel-drawing\u0026utm_content=repo-collaborative-pixel-drawing\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2208-collaborative-pixel-drawing-github); A realtime messaging platform, used as the serverless WebSockets component.\n- [Azure Functions](https://docs.microsoft.com/azure/azure-functions/functions-overview); A serverless compute service from Microsoft Azure.\n- [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview); An Azure service for hosting static websites.\n\n![Pubsub with Ably](media/Pubsub-ably-1.png)\n\nThe `src` folder contains the front-end files which are based on vanilla JavaScript and [p5js](https://p5js.org/).\n\nThe `api` folder contains a .NET 6 based Azure Function App with the following functions:\n\n- `ChangeColorPalette`; returns a color palette based on the paletteId that is provided.\n- `CreateTokenRequest`; provides an authentication token and is triggered when a connection to Ably is made via the front-end.\n\n## Building \u0026 running locally\n\n### Prerequisites\n\nYou require the following dependencies to run the solution locally:\n\n- [.NET 6 SDK](https://dotnet.microsoft.com/download/dotnet/6.0). The .NET SDK required for the C# Azure Functions.\n- [Node 16](https://nodejs.org/en/). The JavaScript runtime required to install Azure Static WebApps CLI.\n- [Azure Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli). This is the command line interface to develop and deploy Azure Static Web Apps. Install this tool globally by running this command in the terminal: `npm install -g @azure/static-web-apps-cli`.\n- [Azure Functions Core Tools](https://docs.microsoft.com/azure/azure-functions/functions-run-local?tabs=v4%2Cwindows%2Ccsharp%2Cportal%2Cbash). This is part of the Azure Functions extensions for VSCode that should be recommended for installation when this repo is opened in VSCode.\n- [Sign up](https://ably.com/signup?utm_campaign=GLB-2208-collaborative-pixel-drawing\u0026utm_content=repo-collaborative-pixel-drawing\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2208-collaborative-pixel-drawing-github) for a free Ably Account, [create a new app, and copy the API key](https://faqs.ably.com/setting-up-and-managing-api-keys?utm_campaign=GLB-2208-collaborative-pixel-drawing\u0026utm_content=repo-collaborative-pixel-drawing\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2208-collaborative-pixel-drawing-github).\n\n\n### Building the project\n\n1. Clone or fork this repo.\n2. Rename the `api\\local.settings.json.example` file to `api\\local.settings.json`.\n3. Copy/paste the Ably API key in the `ABLY_APIKEY` field in the `local.settings.json` file.\n4. Run `swa start` in the root folder.\n\nThe local Static Web App should be available at `http://localhost:4280`.\n\n## Contributing\n\nWant to help contributing to this project? Have a look at our [contributing guide](CONTRIBUTING.md)!\n\n## More info\n\n- [Join our Discord server](http://go.ably.com/discord)\n- [Follow us on Twitter](https://twitter.com/ablyrealtime)\n- [Use our SDKs](https://github.com/ably/)\n- [Visit our website](https://ably.com?utm_campaign=GLB-2208-collaborative-pixel-drawing\u0026utm_content=repo-collaborative-pixel-drawing\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2208-collaborative-pixel-drawing-github)\n\n---\n[![Ably logo](https://static.ably.dev/badge-black.svg?collaborative-pixelart-drawing)](https://ably.com?utm_campaign=GLB-2208-collaborative-pixel-drawing\u0026utm_content=repo-collaborative-pixel-drawing\u0026utm_source=github\u0026utm_medium=repo\u0026src=GLB-2208-collaborative-pixel-drawing-github)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fably-labs%2Fcollaborative-pixel-drawing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fably-labs%2Fcollaborative-pixel-drawing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fably-labs%2Fcollaborative-pixel-drawing/lists"}