Webflow Confetti Cannon Component

A React-powered confetti cannon tailored for Webflow code components. This repo contains the example project used in our YouTube walkthrough built with Vite and wired up to Webflow’s Code Components SDK so you can ship celebratory UI moments anywhere.

Overview

• Built with react and bundled with Vite for fast local feedback.
• Ships a customizable ConfettiCannon component that wraps the canvas-confetti library.
• Includes a Webflow-ready declaration in ConfettiCannon.webflow.tsx, enabling the same component to be configured through the Webflow Designer UI.

Expectations

• Trigger emoji-shaped confetti bursts by clicking the rendered button.
• Toggle between light and dark variants to match your project palette.
• Optionally inject custom imagery and emoji payloads without editing code.
• Use the Webflow CLI to synchronize component updates into your Webflow site.

Getting Started

git clone https://github.com/<your-org>/confetti-cannon.git
cd confetti-cannon
npm install
npm run dev

Open the Vite dev server URL printed in the terminal to preview the demo component locally.

Using with Webflow

1. Start from the project root and execute npx webflow library share, then follow the prompts to publish the updated Confetti Cannon library bundle.
2. In the Webflow Designer, open any site in the target workspace and install (or refresh) the shared library from the Libraries panel.
3. Drag the Confetti Cannon component onto the canvas and adjust its props—text, emoji, variant, and more—directly in the sidebar.

Available Scripts

• npm run dev: Start the Vite development server with hot module reloading.
• npm run build: Type-check the project and create a production build.
• npm run preview: Serve the latest production build locally.
• npm run lint: Run ESLint across the codebase.

Project Structure

• src/components/ConfettiCannon.tsx: Core React component that configures canvas-confetti.
• src/components/ConfettiCannon.webflow.tsx: Webflow Code Component declaration with props and variants.
• webflow.json: Webflow CLI manifest for syncing the component to your workspace.
• src/App.tsx: Minimal demo showcasing the component in a standalone React app.

Resources

• canvas-confetti documentation
• Webflow Code Components guide

Tags: webflow, react, canvas-confetti