Note: This component uses a Reactive/Mobile JavaScript node and is not intended for Traditional Web apps. 

Key features 

• Three effect styles — continuous side cannons, a single center burst, or a multi-burst fireworks pop. 

• One-setting intensity — a single 1–3 dial scales particle count, spread, and velocity together. 

• Fully themeable — supply your own brand colors, launch position, and duration. 

• Lazy-loaded — the confetti library is fetched only once per page and shared across every call, so repeated triggers stay fast. 

• Accessibility-aware — can automatically skip the animation for users who have “reduce motion” enabled. 

• Self-host friendly — point it at your own copy of the library if a CDN is blocked by your environment’s Content Security Policy. 

Installation 

1. Open the component’s page on the OutSystems Forge and click Install to add it to your environment. 

2. In Service Studio, open the app where you want confetti. 

3. Go to Manage Dependencies (Ctrl+Q). 

4. Select the Confetti module in the left-hand list. 

5. Check the public Confetti client action, then click Apply. 

The Confetti client action is now available under the component’s reference in your app. 

How to use 

1. Open the screen action or client action where you want the effect (for example, the OnClick of a “Submit” button or the success branch after a server call). 

2. Drag the Confetti client action from the toolbox / dependency reference into your flow. 

3. Set the input parameters (all are optional — the defaults produce a balanced celebration). 

4. Publish and test. 

That’s it. The first call downloads the library automatically; every subsequent call reuses it. 

Example: fire confetti on a successful save 

Button OnClick 
  └─ Server Action: SaveOrder 
        ├─ Success → Confetti (EffectType = "fireworks", Intensity = 3) 
        └─ Failure → Show error message 

Example: subtle, brand-colored celebration 

Call Confetti with: 

• EffectType = center 

• Intensity = 1 

• Colors = #0d6efd, #6610f2, #ffc107 

Results / Screenshots 

The component running in a Reactive Web app, showing each of the three effect styles. 

Sides 

Two continuous streams fire inward from the bottom-left and bottom-right corners — ideal for sustained, edge-to-edge celebrations. 

Sides effect — confetti streaming inward from both bottom corners 

Center 

A single burst launches from the middle of the screen — a quick, contained “moment of delight.” 

Center effect — a single confetti burst from the middle of the screen 

Fireworks 

Several overlapping bursts pop in quick succession for a dense, dramatic finish. 

Fireworks effect — multiple overlapping confetti bursts 

Input parameters reference 

All parameters are optional. Leave a parameter empty (or unset) to use its default. 

LibraryUrl 

The web address the confetti library is loaded from. Leave this blank to use the bundled default, or provide a custom URL if you host the canvas-confetti library yourself or want to pin a specific version. 

Type: Text 

Default: Bundled jsDelivr CDN URL 

Optional 

EffectType 

The style of confetti animation to play. 

• sides — two continuous streams firing inward from the bottom corners. 

• center — a single burst from the middle of the screen. 

• fireworks — several overlapping bursts in quick succession. 

Type: Text 

Accepted values: sides, center, fireworks 

Default: sides (any unrecognized value also falls back to sides) 

Intensity 

How much confetti is launched and how energetically. A single setting that scales particle count, spread, and launch speed together. 

• 1 — light and subtle 

• 2 — a balanced celebration 

• 3 — dense and dramatic 

Type: Integer 

Range: 1–3 (values outside this range are clamped) 

Default: 2 

DurationMs 

How long the continuous sides animation keeps firing, in milliseconds (1000 = 1 second). This affects the sides effect only; center and fireworks are single bursts and ignore it. If left blank or invalid, the duration is derived from Intensity (roughly 1.2s, 2s, or 3s). 

Type: Integer (milliseconds) 

Default: Based on Intensity 

Optional 

OriginY 

The vertical launch point on the screen, as a fraction: 0 is the top, 0.5 is the middle, 1 is the bottom. The default of 0.7 launches from the lower part of the screen so pieces arc upward naturally. 

Type: Decimal 

Range: 0–1 (clamped) 

Default: 0.7 

Colors 

A custom confetti palette as a comma-separated list. Mix named colors and hex codes freely, e.g. red, #00ff00, gold. Leave blank to use the library’s default multicolor mix. 

Type: Text (comma-separated) 

Default: Library default colors 

Optional 

Accessibility 

Animations can be uncomfortable or harmful for users sensitive to motion. To respect their preferences, set DisableForReducedMotion to True. When a user has the operating-system “reduce motion” setting enabled, the effect is then skipped silently — the rest of your flow runs normally. Enabling this is strongly recommended for production apps. 

Content Security Policy (CSP) and offline use 

By default the component loads canvas-confetti from a public CDN the first time it runs. If your environment is configured with a strict Content Security Policy that blocks external scripts, or if your app must work fully offline, you have two options: 

1. Self-host the library. Add the confetti.browser.min.js file to your module as a Resource (or to a Theme), publish it, and pass its app-relative URL to the LibraryUrl parameter. 

2. Allow-list the CDN. Add the CDN domain to your app’s CSP script-src directive. 

If the library cannot be loaded, the component fails gracefully — it logs a warning to the browser console and simply does not show confetti, so the rest of your flow is unaffected. 

Troubleshooting 

Performance notes 

• The library is downloaded once per page and cached for the session; concurrent triggers share a single load. 

• Each call renders to a temporary full-screen canvas that cleans itself up after the animation, so there is no lasting DOM footprint. 

• For very high Intensity on low-end mobile devices, prefer center over fireworks to keep particle counts modest. 

Credits and license 

This component wraps the open-source canvas-confetti library by Kiril Vatev (catdad), distributed under the MIT license. Please review and comply with the upstream library’s license terms. The OutSystems wrapper itself is provided as-is, without warranty. 

Support 

Found a bug or have a feature request? Please use the Support / Discussions section on the component’s Forge page.