Christian Liebel

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

Build desktop-class PWAs with native file handling and clipboard access, all without a major framework. Here's how.

Making of paint.js.org—a Web Component-based Productivity PWA
#1about 10 minutes

Demonstrating a cross-platform PWA paint application

A live demonstration showcases paint.js.org's features, including installation, file handling, clipboard integration, and offline capabilities across desktop and mobile devices.

#2about 7 minutes

Building with Web Components and the Lit library

The application is built using standard Web Components and the lightweight Lit library, avoiding larger frameworks for better interoperability.

#3about 2 minutes

Unifying input with HTML Canvas and Pointer Events

The HTML Canvas 2D context is used for drawing, while Pointer Events provide a unified API for handling mouse, touch, and pen inputs.

#4about 6 minutes

PWA fundamentals for installation and offline support

Progressive Web App capabilities are enabled through the Web App Manifest for installability and a Service Worker for offline caching.

#5about 8 minutes

Extending web capabilities with Project Fugu APIs

Project Fugu is a cross-vendor initiative that adds native-like features to the web platform, such as clipboard and file system access.

#6about 2 minutes

Using the Async Clipboard API for copy and paste

The Async Clipboard API provides a modern, permission-based way to programmatically read and write images to the system clipboard.

#7about 3 minutes

Implementing file system access and file handling

The File System Access API allows the PWA to open, save, and overwrite files, while the Web App Manifest registers it as a file handler.

#8about 2 minutes

Creating a dark mode with CSS Custom Properties

A dynamic dark mode is implemented using CSS Custom Properties that are updated based on the `prefers-color-scheme` media feature.

#9about 4 minutes

Summary and real-world examples of advanced PWAs

A recap of how modern web technologies enable desktop-class applications, with examples like VS Code and Photoshop for the web.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Automating video post-production with local scripts
02:54 MIN

Automating video post-production with local scripts

Cat Herding with Lions and Tigers - Christian Heilmann

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

See all videos
Project Fugu: Progressive Web Apps, Superpowered45:20

Project Fugu: Progressive Web Apps, Superpowered

Christian Liebel

PWAs in 202141:49

PWAs in 2021

Ire Aderinokun

PWA Fundamentals: websites with superpowers43:06

PWA Fundamentals: websites with superpowers

Rowdy Rabouw

Native Web Apps: Are We There Yet?44:40

Native Web Apps: Are We There Yet?

Maxim Salnikov

Progressive Web Apps - The next big thing40:01

Progressive Web Apps - The next big thing

Nico Martin

Project Fugu: Extending the web58:12

Project Fugu: Extending the web

Lucien Immink

Is your Progressive Web App Lazy? How to read and improve your PWA Performance29:57

Is your Progressive Web App Lazy? How to read and improve your PWA Performance

Laura Morinigo

Possibilities with Web Capabilities27:05

Possibilities with Web Capabilities

Rowdy Rabouw

Related Articles

View all articles

From learning to earning

Jobs that call for the skills explored in this talk.