Need help with preact-worker-demo?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

208 Stars 14 Forks 6 Commits 2 Opened issues


Demo of preact rendering an entire app in a Web Worker.

Services available


Need anything else?

Contributors list

# 1,192
6 commits

A full Preact app rendering in a Web Worker gitter

Have you ever wondered if you could take advantage of Web Workers to render a Virtual DOM app in a background thread? This repo contains the source code of a demo messaging app that does just that! 🌈

⚡️ A complete Preact app running entirely within a Web Worker.

💁 For a high level overview of the approach, see How It Works.

🚀 This means your UI stays interactive at 60FPS, even if your application grinds to a halt in the background.

💥 View Demo 💥

How It Works

The implementation is split into renderer/dom.js and renderer/worker.js. These modules live outside and inside the Worker (respectively), and communicate with eachother asynchronously via


The app's code, components, libraries and DOM are all isolated in a single Worker (background thread). This means even Preact's diff algorithm and component instantiation is done in the worker. The main (UI) thread simply applies a stream of serialized DOM change descriptions (MutationRecords), and proxies events back to the Worker to be handled off the main thread.

As an optimization, when serializing DOM Elements to be published up to the UI thread, any previously-sent Elements are replaced with IDs. These are correlated through a mapping retained on both sides of the thread boundary.

Quick-Start Guide


1. Clone this repo:

git clone --depth 1
cd preact-worker-demo

2. Install the dependencies:

npm install

You're done installing! Now let's get started developing.

Development Workflow

3. Start a live-reload development server:

PORT=8080 npm run dev

4. Generate a production build in


npm run build

You can now deploy the contents of the

directory to production! Example:

surge ./build -d

5. Start local production server with


npm start

This is to simulate a production (CDN) server with gzip. It just serves up the contents of




We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.