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 · World Congress 2022

2:15 min

Transitioning native desktop graphics implementations to the web

Chris Heilmann Chris Heilmann +3 · LIVE

2:00 min

Bridging web and native apps with Project Fugu

Rowdy Rabouw Rowdy Rabouw · World Congress 2025

6:13 min

Core capabilities of progressive web applications

Lucien Immink · LIVE

2:18 min

Transitioning from native WPF to modern web assembly

Andrew Burnett-Thompson +1 · Coffee With Developers

More from World Congress 2022

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

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

André Kovac

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

The Design and Evolution of C++

Bjarne Stroustrup

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

But, you're not Facebook

Kristijan Ristovski

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

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

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

Get Ready for Jakarta EE 10!

Ivar Grimstad

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

Keep your code refactorable

Gerrit Stapper

Related videos

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

Project Fugu: Progressive Web Apps, Superpowered

Christian Liebel

Project Fugu: Extending the web thumbnail
58:12
LIVE • almost 3 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 • almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

PWAs in 2021 thumbnail
41:49
JS Congress • almost 5 years ago

PWAs in 2021

Ire Aderinokun

Possibilities with Web Capabilities thumbnail
27:05
World Congress 2025 • about 1 year ago

Possibilities with Web Capabilities

Rowdy Rabouw

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.