Install

Pick whatever suits your site. Nothing to download, no build step, no account. Every option below works on its own.

Everything, one tag

All 118 components in one file (about 95 KB gzipped), served free by jsDelivr. Then use any tag from these pages.

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h1>Hello <piix-pal pal="bitbug"></piix-pal></h1>

npm

For projects with a bundler. Everything ships in the package; nothing loads from a CDN.

npm install piixpal

import { PiixPal, PiixSprite } from "piixpal/react";

export default function Hero() {
  return (
    <h1>
      Hello <PiixPal pal="bitbug" />
      <PiixSprite name="gloop" size={200} />
    </h1>
  );
}

// main.js
import Piixpal from "piixpal/vue";
createApp(App).use(Piixpal).mount("#app");

<!-- any template -->
<h1>Hello <piix-pal pal="bitbug" /></h1>

<script>
  import Piixpal from "piixpal/svelte";
</script>

<Piixpal />
<h1>Hello <piix-pal pal="bitbug"></piix-pal></h1>

// once, in code that runs in the browser
import "piixpal";

// then the tags work anywhere
// <h1>Hello <piix-pal pal="bitbug"></piix-pal></h1>

shadcn

Add a component straight into your project as a file you own, like any shadcn component. Every component on these pages has its own entry.

npx shadcn@latest add https://piixpal.dvkk.dev/r/bitbug.json

import { Bitbug } from "@/components/piixpal/bitbug";

<h1>Hello <Bitbug /></h1>

Swap bitbug for any component's name. The full list is at /r/registry.json.

Just the ones you use

Every pal and sprite has its own tiny file (1–4 KB). The shared engine loads itself the first time, once, however many you add.

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/kitty.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/gloop.min.js"></script>

<h2>Nap spot <piix-pal pal="kitty"></piix-pal></h2>
<piix-sprite name="gloop"></piix-sprite>

No markup at all

For Webflow, Framer, WordPress, Shopify, Squarespace, Notion sites: anywhere with a "custom code" box. Say which pal goes where, right on the script tag. Format: name@css-selector, comma separated, optional ?attr=value.

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"
  data-pals="bitbug@h1, boing@footer, pip@.button, moss@p?at=.9"></script>

Not sure what to pick? The Builder writes this line for you.

From JavaScript

Piixpal.add("bitbug", "h1");                 // a pal on the first h1
Piixpal.add("pip", ".btn");                  // every .btn is a perch
Piixpal.add("gloop", "#hero", { size: 220 }); // sprites go inside the element
Piixpal.add("kitty", someElement);           // or pass an element

Piixpal.list();   // everything registered
Piixpal.clear();  // remove them all

React, Next.js, Vue, Svelte, Astro

Pals are standard web components, so plain tags work everywhere once the script is loaded. The wrappers just load it for you.

// copy wrappers/react.jsx + wrappers/load.js, or (soon) npm i piixpal
import { PiixPal, PiixSprite, PiixCrowd } from "piixpal/react";

export default function Hero() {
  return (
    <h1>
      Hello <PiixPal pal="bitbug" />
      <PiixSprite name="gloop" size={200} />
    </h1>
  );
}

// main.js
import Piixpal from "piixpal/vue";
createApp(App).use(Piixpal).mount("#app");

// vite.config.js
vue({ template: { compilerOptions: { isCustomElement: t => t.startsWith("piix-") } } })

<!-- any template -->
<h1>Hello <piix-pal pal="bitbug" /></h1>

<script>
  import Piixpal from "piixpal/svelte";
</script>

<Piixpal />
<h1>Hello <piix-pal pal="bitbug"></piix-pal></h1>

<!-- in your layout's <head> -->
<script is:inline src="https://cdn.jsdelivr.net/npm/piixpal@0.4/piixpal.min.js"></script>

<h1>Hello <piix-pal pal="bitbug"></piix-pal></h1>

Host it yourself

Download piixpal.min.js (or anything in dist/) and point a script tag at your copy. MIT licensed, no tracking, works offline.

Try it on any website

Drag this button to your bookmarks bar, open any website, and click it. Pals move in for a visit (only on your screen, nothing is changed). Some sites block outside scripts; they will tell you.

Piixpal visit