WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2022 • Jun 15, 2022

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

Christian Liebel

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.

Pause
Mute Enter Fullscreen
#1 about 3 min

Recreating classic MS Paint for modern browser platforms

Replacing native legacy software with web-based alternatives proves viable through comprehensive cross-platform browser execution.

#2 about 4 min

Installing web applications and managing native file handles

Installing web applications bridges the gap between browser execution and native desktop features like local file tracking.

#3 about 5 min

Handling native clipboards and offline touch device scenarios

Implementing cross-app clipboard interactions and offline modes ensures full functionality across various touch and desktop devices.

#4 about 8 min

Building framework-less architectures with native custom web components

Leveraging the lit library creates lightweight, interoperable custom HTML elements without relying on heavy frontend frameworks.

#5 about 3 min

Rendering graphics and unifying inputs with abstract pointer events

Drawing pixels on an HTML canvas utilizing abstract pointer interfaces streamlines the handling of touch, mouse, and pen inputs.

#6 about 7 min

Enabling offline capabilities and application installation via service workers

Fulfilling Progressive Web App requirements through web app manifests and dedicated service workers ensures reliable application caching.

#7 about 8 min

Bridging native capability gaps using the Project Fugu APIs

Enhancing web platforms with cross-vendor API initiatives enables online properties to handle advanced system integration tasks.

#8 about 2 min

Transferring rich media objects with the async clipboard API

Reading and writing binary image content safely to the system clipboard minimizes disruption to main interface threads.

#9 about 3 min

Integrating native file systems and registering OS file handlers

Configuring web applications as default operating system handlers allows saving and overwriting local device files seamlessly.

#10 about 2 min

Managing dynamic dark modes using cascading CSS custom properties

Intercepting system preference media queries and modifying CSS variables dynamically updates application UI color schemes across shadow boundaries.

#11 about 2 min

Recognizing the expanding potential of modern web-based applications

Successfully shipping desktop-class software systems within the browser validates the stability and integration scale of modern web APIs.

#12 about 3 min

Addressing developer questions on framework capabilities and architectural alternatives

Mapping traditional dependency injection architectures over to native custom components addresses common frontend state and lifecycle limitations.

Matching moments

6:24 min

Demonstrating persistent native web capabilities with a paint clone

Christian Liebel Christian Liebel · JS Congress

1:27 min

Introduction to progressive web apps

Laura Morinigo · WWC 2022

2:15 min

Transitioning native desktop graphics implementations to the web

Chris Heilmann +3 · LIVE

2:00 min

Bridging web and native apps with Project Fugu

Rowdy Rabouw Rowdy Rabouw · WWC 2025

6:13 min

Core capabilities of progressive web applications

Lucien Immink · LIVE

1:17 min

Bridging the gap between native and web apps

Ire Aderinokun · JS Congress

More from World Congress 2022

What the heck do "declarative" and "reactive" actually mean? thumbnail
30:40
almost 4 years ago

What the heck do "declarative" and "reactive" actually mean?

André Kovac

The Design and Evolution of C++ thumbnail
1:01:15
about 4 years ago

The Design and Evolution of C++

Bjarne Stroustrup

But, you're not Facebook thumbnail
31:12
about 4 years ago

But, you're not Facebook

Kristijan Ristovski

Communicate efficiently with Software Architecture Diagrams thumbnail
28:11
about 4 years ago

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

Get Ready for Jakarta EE 10! thumbnail
42:53
about 4 years ago

Get Ready for Jakarta EE 10!

Ivar Grimstad

Keep your code refactorable thumbnail
26:46
about 4 years ago

Keep your code refactorable

Gerrit Stapper

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

From Cloud Native to Multi-Cloud Native: Write Once, Deploy Anywhere

Sandeep Pal

Principal Member of Technical Staff at Salesforce

Sandeep Pal
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

From Idea to Production with AI: Agentic Development in Practice

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky

Related videos

Project Fugu: Progressive Web Apps, Superpowered thumbnail
45:20
JS Congress • over 4 years ago

Project Fugu: Progressive Web Apps, Superpowered

Christian Liebel

Project Fugu: Extending the web thumbnail
58:12
LIVE • over 2 years ago

Project Fugu: Extending the web

Lucien Immink

Progressive Web Apps - The next big thing thumbnail
40:01
LIVE • almost 6 years ago

Progressive Web Apps - The next big thing

Nico Martin

Native Web Apps: Are We There Yet? thumbnail
44:40
JS Congress • over 4 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

PWAs in 2021 thumbnail
41:49
JS Congress • over 4 years ago

PWAs in 2021

Ire Aderinokun

Possibilities with Web Capabilities thumbnail
27:05
WWC 2025 • 12 months ago

Possibilities with Web Capabilities

Rowdy Rabouw

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.