> Markdown version of [/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa?t=2397](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa?t=2397). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Making of paint.js.org—a Web Component-based Productivity PWA

Ditch heavy frameworks and build desktop-class PWAs with native parity. Learn how to leverage standard Web Components and Project Fugu to create a 320kb Windows 95 Paint clone.

- **Speakers:** [Christian Liebel](https://www.wearedevelopers.com/@christian-liebel)
- **Event:** World Congress 2022
- **Published:** June 15, 2022
- **Duration:** 44:22
- **URL:** https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa

## Summary

The evolution of browser capabilities has made it entirely viable to build desktop-class, cross-platform productivity tools directly on the web. Using "paint.js.org"—a robust Progressive Web App (PWA) clone of Windows 95 Paint—as a representative model, developers can construct native-feeling applications without relying on heavy frontend frameworks like React or Angular. Instead, utilizing standard Web Components alongside the minimal Lit library provides a highly interoperable, lightweight architecture. This framework-agnostic approach allows the entire application to be packaged at under 320 kilobytes while functioning flawlessly across devices.

To achieve true parity with native software, the application heavily leverages the Progressive Web App architecture. A Web App Manifest properly configures the app to be seamlessly installed and discovered within native operating system docks, while Service Workers cache critical assets to guarantee complete offline functionality and connectivity independence. Additionally, implementing cross-platform Pointer Events unifies interactions across mouse, touch, and stylus pen inputs under a single API. Visual cohesion is maintained dynamically via CSS custom properties, allowing styling properties to cascade through Shadow DOM boundaries to easily adapt to standard system dark modes.

Closing the final integration gaps natively associated with the browser is made possible by "Project Fugu," a cross-vendor standardization effort aimed at introducing hardware and OS-level capabilities to web platforms. Through tools like the File System Access API, the web application can natively read, overwrite, and save documents directly to a user's hard drive, simultaneously registering itself as a default image handler for PNG extensions. Coupled with the Async Clipboard API—which reads and formats visual payloads without blocking the UI thread—and the seamless Web Share API, developers now have granular, cross-platform APIs to create powerful web tools previously restricted to native development ecosystems.

**Keywords:** progressive web apps, web components architecture, lit lightweight library, html canvas 2d drawing, cross-platform pointer events, web app manifest configuration, offline service workers, project fugu apis, async clipboard api, file system access api, native file handling integration, css custom properties tricking, web share api, desktop-class web apps

## Chapters

1. **Recreating classic MS Paint for modern browser platforms** (00:11) — Replacing native legacy software with web-based alternatives proves viable through comprehensive cross-platform browser execution.
1. **Installing web applications and managing native file handles** (02:34) — Installing web applications bridges the gap between browser execution and native desktop features like local file tracking.
1. **Handling native clipboards and offline touch device scenarios** (05:38) — Implementing cross-app clipboard interactions and offline modes ensures full functionality across various touch and desktop devices.
1. **Building framework-less architectures with native custom web components** (10:11) — Leveraging the lit library creates lightweight, interoperable custom HTML elements without relying on heavy frontend frameworks.
1. **Rendering graphics and unifying inputs with abstract pointer events** (17:21) — Drawing pixels on an HTML canvas utilizing abstract pointer interfaces streamlines the handling of touch, mouse, and pen inputs.
1. **Enabling offline capabilities and application installation via service workers** (19:46) — Fulfilling Progressive Web App requirements through web app manifests and dedicated service workers ensures reliable application caching.
1. **Bridging native capability gaps using the Project Fugu APIs** (26:06) — Enhancing web platforms with cross-vendor API initiatives enables online properties to handle advanced system integration tasks.
1. **Transferring rich media objects with the async clipboard API** (33:36) — Reading and writing binary image content safely to the system clipboard minimizes disruption to main interface threads.
1. **Integrating native file systems and registering OS file handlers** (35:34) — Configuring web applications as default operating system handlers allows saving and overwriting local device files seamlessly.
1. **Managing dynamic dark modes using cascading CSS custom properties** (38:04) — Intercepting system preference media queries and modifying CSS variables dynamically updates application UI color schemes across shadow boundaries.
1. **Recognizing the expanding potential of modern web-based applications** (39:57) — Successfully shipping desktop-class software systems within the browser validates the stability and integration scale of modern web APIs.
1. **Addressing developer questions on framework capabilities and architectural alternatives** (41:42) — Mapping traditional dependency injection architectures over to native custom components addresses common frontend state and lifecycle limitations.

## Related Moments

- [Demonstrating persistent native web capabilities with a paint clone](https://www.wearedevelopers.com/videos/290-project-fugu-progressive-web-apps-superpowered) (from " Project Fugu: Progressive Web Apps, Superpowered")
- [Introduction to progressive web apps](https://www.wearedevelopers.com/videos/453-is-your-progressive-web-app-lazy-how-to-read-and-improve-your-pwa-performance) (from "Is your Progressive Web App Lazy? How to read and improve your PWA Performance")
- [Transitioning native desktop graphics implementations to the web](https://www.wearedevelopers.com/videos/1794-wearedevelopers-live-from-javascript-to-webassembly-high-performance-charting-and-more) (from "WeAreDevelopers LIVE – From JavaScript to WebAssembly, High-Performance Charting and More")
- [Bridging web and native apps with Project Fugu](https://www.wearedevelopers.com/videos/1575-possibilities-with-web-capabilities) (from "Possibilities with Web Capabilities")
- [Core capabilities of progressive web applications](https://www.wearedevelopers.com/videos/832-project-fugu-extending-the-web) (from "Project Fugu: Extending the web")
- [Bridging the gap between native and web apps](https://www.wearedevelopers.com/videos/289-pwas-in-2021) (from "PWAs in 2021")

## Related Articles

- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Dev Digest 104 - Fight for your right to 3rd party](https://www.wearedevelopers.com/magazine/390-dev-digest-104-fight-for-your-right-to-3rd-party)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 113 - Debugging above the cloud](https://www.wearedevelopers.com/magazine/422-dev-digest-113-debugging-above-the-cloud)

## Related Jobs

- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse**