{"id":13689557,"url":"https://github.com/christianliebel/paint","last_synced_at":"2025-04-12T15:38:26.561Z","repository":{"id":36973008,"uuid":"275839676","full_name":"christianliebel/paint","owner":"christianliebel","description":"Open source, Web Components-based remake of MS Paint using modern web capabilities. 🎨🖌","archived":false,"fork":false,"pushed_at":"2024-10-28T06:07:53.000Z","size":54689,"stargazers_count":174,"open_issues_count":37,"forks_count":26,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T21:02:53.133Z","etag":null,"topics":["hacktoberfest","mspaint","paint","pwa"],"latest_commit_sha":null,"homepage":"https://paint.js.org","language":"TypeScript","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/christianliebel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2020-06-29T14:30:28.000Z","updated_at":"2024-10-28T06:07:57.000Z","dependencies_parsed_at":"2023-11-20T08:29:44.754Z","dependency_job_id":"2302c2a1-2d04-4a37-a1a5-a079d7877f57","html_url":"https://github.com/christianliebel/paint","commit_stats":{"total_commits":1395,"total_committers":5,"mean_commits":279.0,"dds":"0.21218637992831546","last_synced_commit":"af145c45c41d2b290badc0958acb18009f749811"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianliebel%2Fpaint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianliebel%2Fpaint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianliebel%2Fpaint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianliebel%2Fpaint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christianliebel","download_url":"https://codeload.github.com/christianliebel/paint/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590595,"owners_count":21129856,"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":["hacktoberfest","mspaint","paint","pwa"],"created_at":"2024-08-02T15:01:52.743Z","updated_at":"2025-04-12T15:38:26.539Z","avatar_url":"https://github.com/christianliebel.png","language":"TypeScript","funding_links":[],"categories":["hacktoberfest"],"sub_categories":[],"readme":"# Paint: An open-source, Web Components-based remake of MS Paint using modern web capabilities\n\n![Node.js CI](https://github.com/christianliebel/paint/workflows/Node.js%20CI/badge.svg)\n[![Known Vulnerabilities](https://snyk.io/test/github/christianliebel/paint/badge.svg?targetFile=package.json)](https://snyk.io/test/github/christianliebel/paint?targetFile=package.json)\n![GitHub](https://img.shields.io/github/license/christianliebel/paint)\n\nPaint is back—right in your browser! Try it on [paint.js.org](https://paint.js.org).\n\n![Paint](https://raw.githubusercontent.com/christianliebel/paint/main/docs/screenshot.png)\n\nThis project aims to demonstrate modern web capabilities and Web Component-based application architectures on the example of a productivity app dinosaur: Paint.\nAll offline-capable and installable, just as [Progressive Web Apps](https://web.dev/progressive-web-apps/) should be.\n\n## PLEASE NOTE\n\nThis project is in an early state. Not all tools and actions are implemented right now. Your help and feedback are wanted!\n\n## Modern Web Technology\n\nThis project demonstrates the use of:\n\n- [Web Components](https://www.webcomponents.org/introduction), the built-in component model of the web (via [Lit](https://lit.dev/))\n- [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers) for offline capability (via [Workbox](https://developers.google.com/web/tools/workbox))\n- [Web App Manifest](https://github.com/w3c/manifest) for installability\n- [File System Access API](https://web.dev/file-system-access/) for file system access (via [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access)), including drag and drop\n- [File Handling API](https://web.dev/file-handling/) for registering as a handler for \\*.png files\n- [Async Clipboard API](https://web.dev/image-support-for-async-clipboard/) for clipboard access\n- [Web Share API](https://web.dev/web-share/#sharing-files) for sharing images to other applications via _File \u003e Send…_\n- [StorageManager API](https://web.dev/storage-for-the-web/#check) for estimating storage usage in _Help \u003e About Paint_\n- [prefers-color-scheme](https://web.dev/prefers-color-scheme/) for dark mode\n- [Local Font Access API](https://web.dev/local-fonts/) for accessing local fonts\n- [Vite](https://vitejs.dev/), a lightning-fast frontend build tool\n\n## Goals\n\n- This implementation tries to stick as closely as possible to the original Paint for Windows 95—not more, but also not less. You might want to check out [Felix Rieseberg’s windows95 to run the original Paint](https://github.com/felixrieseberg/windows95).\n- This implementation should stay smaller (= transferred bytes) than Paint’s executable size of 340K.\n- Everything must be achieved with web technology only, so no Cordova/Capacitor or Electron/Tauri builds. Features that are not exposed to the web must be disabled in the menu.\n- Where modern web APIs are used, they should be [progressively enhanced](https://web.dev/progressively-enhance-your-pwa/).\n\n## Setup\n\n1. Clone this repository\n2. Run `npm i`\n3. Run `npm start`\n4. Done!\n\n## Using the Web Component\n\nPaint is available as a web component, so you can easily embed it into other applications or websites.\n\n1. Install the library\n   - Download the npm package [@christianliebel/paint](https://www.npmjs.com/package/@christianliebel/paint) and register the elements by importing the library: `import '@christianliebel/paint';`\n   - Alternatively, use a service like unpkg.com: `\u003cscript src=\"https://unpkg.com/@christianliebel/paint/dist/elements/index.js\" type=\"module\"\u003e\u003c/script\u003e`\n2. Use the `\u003cpaint-app\u003e` component in your application.\n3. Optional: If you want to react to changes of the document title, listen to the `titlechange` event. You can find the updated title in the `event.details.title` property.\n4. Done!\n\n## Wait, I’ve seen this before\n\nYou’re right! The awesome [JSPaint](https://jspaint.app/) ([GitHub](https://github.com/1j01/jspaint)) has been around for a long time and is, by far, more complete.\nIn contrast to JSPaint, this project is offline-capable and makes use of modern web platform APIs.\n\n## License\n\nThis project is provided for educational purposes only.\nIt is not affiliated with and has not been approved by Microsoft.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristianliebel%2Fpaint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristianliebel%2Fpaint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristianliebel%2Fpaint/lists"}