Start here

Installation

How to add party.js to your project.

party.js is published on npm as party-js. It has no dependencies and ships with TypeScript types.

With a package manager

npm install party-js

pnpm add party-js

yarn add party-js

bun add party-js

Then import what you need:

import { confetti } from "party-js";

party.js is an ES module without side effects, so bundlers only include the parts you import.

With a script tag

Without a build step, you can load the bundle from a CDN. It puts everything on a global party object:

<script src="https://cdn.jsdelivr.net/npm/party-js@3/bundle/party.min.js"></script>
<script>
    const button = document.querySelector("#submit");
    button.addEventListener("click", () => party.confetti(button));
</script>

If you prefer modules, import it directly instead:

<script type="module">
    import { confetti } from "https://cdn.jsdelivr.net/npm/party-js@3/+esm";

    const button = document.querySelector("#submit");
    button.addEventListener("click", () => confetti(button));
</script>

@3 always loads the latest 3.x release. In production, pin an exact version such as @3.0.0, so an update can’t change your site without you noticing.

With a framework

party.js doesn’t need a wrapper for React, Vue or Svelte: get the element and call the effect. Effects need a browser, so start them from event handlers or after the component has mounted, never during rendering. Importing party.js on the server is fine though.

import { confetti } from "party-js";

export function SubmitButton() {
    return <button onClick={(event) => confetti(event.currentTarget)}>Submit</button>;
}

<script setup>
import { confetti } from "party-js";
</script>

<template>
    <button @click="confetti($event.currentTarget)">Submit</button>
</template>

<script>
    import { confetti } from "party-js";
</script>

<button onclick={(event) => confetti(event.currentTarget)}>Submit</button>