Partytown (3rd-party scripts in a worker)

Heavy third-party scripts (analytics, tag managers) marked type="text/partytown" are relocated to a web worker; their DOM access is proxied back to the main thread by a service worker. The main thread stays free (better TTI), and inline allowances drop out of your CSP. The real Partytown library (Builder.io), integrated and served from /~partytown/.

Tip

The box below starts as "main thread", then the worker script replaces its text — proof the code ran off the main thread and the DOM write was proxied back. Needs a service worker (default mode) or cross-origin isolation (atomics mode).

Live demo

(waiting — should be replaced by the worker)

Source

src/app/examples/partytown/page.tsxTSX

import { Partytown, partytownScript } from "@bext-stack/framework";

// render once, before any partytown script:
<Partytown forward={["dataLayer.push"]} />

// a heavy third-party script, relocated to a worker by Partytown:
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({ event: 'partytown_demo' });
  document.getElementById('pt-status').textContent = '…';
</script>