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 131 components in one file (about 239 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: a little panel lets you throw a party, make it snow or let a dragon loose (only on your screen, nothing is changed). Some sites block outside scripts; for those, and for a pet that lives on every site, get the browser extension.

Piixpal visit