Installation

With a package manager

npm

npm install pagepal

pnpm

pnpm add pagepal

yarn

yarn add pagepal

bun

bun add pagepal

pagepal has no dependencies. It ships ES modules and CommonJS, with TypeScript types included.

With a script tag

No build step needed. The script-tag build includes everything, puts the API on window.PagePal, and registers the <page-pal> element:

<script src="https://unpkg.com/pagepal"></script>
<page-pal watch="form#signup" requests></page-pal>

or, from JavaScript:

<script src="https://unpkg.com/pagepal"></script>
<script>
  PagePal.createPal({ watch: 'form#signup', requests: true });
</script>

Tip

Pin a version in production, for example https://unpkg.com/pagepal@1, so a future major release can’t change your page.

Entry points

Import only what you use. Each entry point is tree-shakable, and they share code, so importing several never duplicates the core.

Import	What it gives you
pagepal	createPal() with every watcher, characters, types
pagepal/core	createPalCore() with no watchers, for smaller bundles
pagepal/watchers	Individual watchers: forms(), requests(), deadClicks(), …
pagepal/characters	blob, cat, ghost, defineCharacter()
pagepal/analytics	analytics(), summarize(), adapters
pagepal/debug	debugPanel()
pagepal/element	Registers <page-pal>
pagepal/react	React components and hooks
pagepal/vue	Vue component and composable

Browser support

pagepal targets evergreen browsers (Chrome, Edge, Firefox, Safari). It relies on Shadow DOM, color-mix() and the individual translate/rotate CSS properties. On the server it does nothing: see server-side rendering.