{"kind":"markdown","meta":{"entryType":"library","name":"tsParticles Preact","slug":"tsparticles-preact","shortDescription":"Official Preact component for configurable particle, confetti and animated canvas effects using the modular tsParticles engine.","category":"animation","packageName":"@tsparticles/preact","repositoryUrl":"https://github.com/tsparticles/tsparticles/tree/main/wrappers/preact","npmUrl":"https://www.npmjs.com/package/@tsparticles/preact","documentationUrl":"https://github.com/tsparticles/tsparticles/tree/main/wrappers/preact#readme","homepageUrl":"https://particles.js.org/","license":"MIT","compatibilityStatus":"native","typescriptSupport":"native","ssrSupport":"limited","maintenanceStatus":"active","installCommand":"npm install @tsparticles/preact @tsparticles/engine","tags":["particles","canvas","confetti","animation","effects"],"limitations":["The canvas engine must initialize in the browser and should not run during server rendering.","The published peer dependency currently declares Preact 10 only; Preact 11 compatibility is not documented upstream.","Loading the full tsParticles bundle can be large; use selected engine packages when possible.","Continuous animation should respect reduced-motion preferences and performance budgets."],"lastVerifiedAt":"2026-11-05","verificationSource":"https://github.com/tsparticles/tsparticles/tree/main/wrappers/preact#readme","lastReleaseAt":"2026-11-02","lastCommitAt":"2026-11-04","repositoryArchived":false,"notes":["Evidence level: documented.","Latest npm version checked: 4.5.1.","The monorepo labels this package as the official tsParticles Preact component and provides usage examples."],"title":"tsParticles Preact","description":"Official Preact component for configurable particle, confetti and animated canvas effects using the modular tsParticles engine.","featured":false,"islands":true,"esm":true,"qualityBadges":[],"alternatives":["animejs","motion","gsap"],"library":{"name":"tsParticles Preact","slug":"tsparticles-preact","shortDescription":"Official Preact component for configurable particle, confetti and animated canvas effects using the modular tsParticles engine.","category":"animation","categories":["animation"],"packageName":"@tsparticles/preact","repositoryUrl":"https://github.com/tsparticles/tsparticles/tree/main/wrappers/preact","npmUrl":"https://www.npmjs.com/package/@tsparticles/preact","documentationUrl":"https://github.com/tsparticles/tsparticles/tree/main/wrappers/preact#readme","homepageUrl":"https://particles.js.org/","license":"MIT","compatibilityStatus":"native","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"limited","maintenanceStatus":"active","lastVerifiedAt":"2026-11-05","verificationSource":"https://github.com/tsparticles/tsparticles/tree/main/wrappers/preact#readme","installCommand":"npm install @tsparticles/preact @tsparticles/engine","limitations":["The canvas engine must initialize in the browser and should not run during server rendering.","The published peer dependency currently declares Preact 10 only; Preact 11 compatibility is not documented upstream.","Loading the full tsParticles bundle can be large; use selected engine packages when possible.","Continuous animation should respect reduced-motion preferences and performance budgets."],"alternatives":["animejs","motion","gsap"],"tags":["particles","canvas","confetti","animation","effects"],"featured":false,"islands":true,"esm":true,"qualityBadges":[],"notes":["Evidence level: documented.","Latest npm version checked: 4.5.1.","The monorepo labels this package as the official tsParticles Preact component and provides usage examples."],"catalogDomain":"preact","lastReleaseAt":"2026-11-02","lastCommitAt":"2026-11-04","repositoryArchived":false,"route":"/libraries/tsparticles-preact","file":"entries/tsparticles-preact.md","description":"Official Preact component for configurable particle, confetti and animated canvas effects using the modular tsParticles engine.","compatibility":"native","status":"recommended","typescript":true,"ssr":true,"lastVerified":"2026-11-05","repository":"https://github.com/tsparticles/tsparticles/tree/main/wrappers/preact","documentation":"https://github.com/tsparticles/tsparticles/tree/main/wrappers/preact#readme","homepage":"https://particles.js.org/"},"libraryAlternatives":[{"slug":"animejs","name":"animejs","route":"/libraries/animejs"},{"slug":"motion","name":"Motion","route":"/libraries/motion"},{"slug":"gsap","name":"GSAP","route":"/libraries/gsap"}],"relatedProjects":[{"name":"animejs","slug":"animejs","shortDescription":"Framework-independent JavaScript animation engine.","category":"animation","categories":["animation"],"packageName":"animejs","npmUrl":"https://www.npmjs.com/package/animejs","compatibilityStatus":"native","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"supported","maintenanceStatus":"active","installCommand":"npm install animejs","tags":["animation"],"islands":true,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/animejs","file":"entries/animejs.md","description":"Framework-independent JavaScript animation engine.","compatibility":"native","status":"recommended","typescript":true,"ssr":true},{"name":"GSAP","slug":"gsap","shortDescription":"Powerful imperative animation platform independent of Preact.","category":"animation","categories":["animation"],"packageName":"gsap","npmUrl":"https://www.npmjs.com/package/gsap","compatibilityStatus":"native","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"supported","maintenanceStatus":"active","installCommand":"npm install gsap","tags":["animation"],"islands":true,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/gsap","file":"entries/gsap.md","description":"Powerful imperative animation platform independent of Preact.","compatibility":"native","status":"recommended","typescript":true,"ssr":true},{"name":"Motion","slug":"motion","shortDescription":"Modern animation APIs for layout, gestures and transitions.","category":"animation","categories":["animation"],"packageName":"motion","repositoryUrl":"https://github.com/motiondivision/motion","npmUrl":"https://www.npmjs.com/package/motion","documentationUrl":"https://motion.dev","homepageUrl":"https://motion.dev","license":"MIT","compatibilityStatus":"unverified","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"supported","maintenanceStatus":"active","installCommand":"npm install motion","alternatives":["floating-ui"],"tags":["animation","transitions","gestures"],"islands":true,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/motion","file":"entries/motion.md","description":"Modern animation APIs for layout, gestures and transitions.","compatibility":"unknown","status":"stable","typescript":true,"ssr":true,"repository":"https://github.com/motiondivision/motion","documentation":"https://motion.dev","homepage":"https://motion.dev"},{"name":"Preact Transitioning","slug":"preact-transitioning","shortDescription":"Preact components for enter, exit and grouped CSS transitions with an API inspired by react-transition-group.","category":"animation","categories":["animation"],"packageName":"preact-transitioning","repositoryUrl":"https://github.com/fakundo/preact-transitioning","npmUrl":"https://www.npmjs.com/package/preact-transitioning","documentationUrl":"https://fakundo.github.io/preact-transitioning/","homepageUrl":"https://github.com/fakundo/preact-transitioning","license":"MIT","compatibilityStatus":"native","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"limited","maintenanceStatus":"active","lastVerifiedAt":"2026-11-05","verificationSource":"https://fakundo.github.io/preact-transitioning/","installCommand":"npm install preact-transitioning","limitations":["Transitions depend on DOM lifecycle timing and CSS classes after hydration.","The API is intentionally close to react-transition-group, so Preact-specific edge cases should be tested.","Complex timeline or gesture animation requires a different tool."],"alternatives":["preact-transition-group","motion","animejs"],"tags":["animation","transitions","css","transition-group"],"featured":false,"islands":true,"esm":true,"qualityBadges":[],"notes":["Evidence level: documented.","Latest npm version checked: 1.5.3.","A newer commit history after the latest release indicates continued maintenance."],"catalogDomain":"preact","lastReleaseAt":"2025-10-22","lastCommitAt":"2026-09-11","repositoryArchived":false,"route":"/libraries/preact-transitioning","file":"entries/preact-transitioning.md","description":"Preact components for enter, exit and grouped CSS transitions with an API inspired by react-transition-group.","compatibility":"native","status":"recommended","typescript":true,"ssr":true,"lastVerified":"2026-11-05","repository":"https://github.com/fakundo/preact-transitioning","documentation":"https://fakundo.github.io/preact-transitioning/","homepage":"https://github.com/fakundo/preact-transitioning"},{"name":"preact-transition-group","slug":"preact-transition-group","shortDescription":"Transition components for enter and leave animations in Preact.","category":"animation","categories":["animation"],"packageName":"preact-transition-group","npmUrl":"https://www.npmjs.com/package/preact-transition-group","compatibilityStatus":"native","testedPreactVersions":[],"typescriptSupport":"none","ssrSupport":"unsupported","maintenanceStatus":"active","installCommand":"npm install preact-transition-group","tags":["animation","transitions"],"islands":true,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/preact-transition-group","file":"entries/preact-transition-group.md","description":"Transition components for enter and leave animations in Preact.","compatibility":"native","status":"recommended","typescript":false,"ssr":false},{"name":"Chart.js","slug":"chart-js","shortDescription":"Widely used canvas charting library with many available adapters.","category":"charts","categories":["charts"],"packageName":"chart.js","repositoryUrl":"https://github.com/chartjs/Chart.js","npmUrl":"https://www.npmjs.com/package/chart.js","documentationUrl":"https://www.chartjs.org/","homepageUrl":"https://www.chartjs.org/","license":"MIT","compatibilityStatus":"unverified","testedPreactVersions":[],"typescriptSupport":"native","ssrSupport":"unsupported","maintenanceStatus":"active","installCommand":"npm install chart.js","alternatives":["echarts"],"tags":["charts","canvas","visualization"],"islands":true,"esm":true,"qualityBadges":[],"catalogDomain":"preact","route":"/libraries/chart-js","file":"entries/chart-js.md","description":"Widely used canvas charting library with many available adapters.","compatibility":"unknown","status":"stable","typescript":true,"ssr":false,"repository":"https://github.com/chartjs/Chart.js","documentation":"https://www.chartjs.org/","homepage":"https://www.chartjs.org/"}],"libraryEditorial":{"whenToUse":"Evidence level: documented. Latest npm version checked: 4.5.1. The monorepo labels this package as the official tsParticles Preact component and provides usage examples.","example":{"language":"tsx","code":"import { useEffect, useState } from 'preact/hooks';\nimport Particles, { initParticlesEngine } from '@tsparticles/preact';\nimport { loadSlim } from '@tsparticles/slim';\n\nexport function ParticleBackground() {\n const [ready, setReady] = useState(false);\n\n useEffect(() => {\n initParticlesEngine(engine => loadSlim(engine)).then(() => setReady(true));\n }, []);\n\n return ready ? (\n \u003cParticles options={{ particles: { number: { value: 30 } } }} />\n ) : null;\n}"},"limitations":["The canvas engine must initialize in the browser and should not run during server rendering.","The published peer dependency currently declares Preact 10 only; Preact 11 compatibility is not documented upstream.","Loading the full tsParticles bundle can be large; use selected engine packages when possible.","Continuous animation should respect reduced-motion preferences and performance budgets."],"supplementalSections":[{"title":"Introduction","body":"`@tsparticles/preact` is the official Preact wrapper for the modular tsParticles canvas engine. It renders configurable particles, confetti, animated backgrounds and interactive effects."},{"title":"Preact configuration","body":"Initialize the engine once in the browser, load the required plugins and render the `Particles` component after initialization completes."},{"title":"SSR notes","body":"The canvas engine is browser-only. Render a deterministic placeholder on the server and initialize tsParticles after mount; do not access canvas or window APIs during SSR."},{"title":"Islands notes","body":"Particle effects should be isolated and lazy-hydrated. Destroy effects when their island unmounts and avoid hydrating decorative backgrounds before primary content."}]},"libraryCategory":{"slug":"animation","name":"Animation","description":"Animation and transition libraries.","icon":"✦","section":"preact"}},"html":"","title":"tsParticles Preact for Preact – Compatibility, Setup and Alternatives","description":"Official Preact component for configurable particle, confetti and animated canvas effects using the modular tsParticles engine. Review tsParticles Preact compatibility with Preact, TypeScript and SSR support on PreactHub.","tags":["particles","canvas","confetti","animation","effects"],"pageType":"website","headings":[{"id":"introduction","text":"Introduction","level":2},{"id":"installation","text":"Installation","level":2},{"id":"preact-configuration","text":"Preact configuration","level":2},{"id":"example","text":"Example","level":2},{"id":"ssr-notes","text":"SSR notes","level":2},{"id":"islands-notes","text":"Islands notes","level":2},{"id":"known-limitations","text":"Known limitations","level":2},{"id":"alternatives","text":"Alternatives","level":2}],"relativePath":"content/libraries/entries/tsparticles-preact.md","lastUpdated":"2026-11-05T09:32:25.664Z"}
Built for Preact and does not require a React compatibility layer.
When to use it
Evidence level: documented. Latest npm version checked: 4.5.1. The monorepo labels this package as the official tsParticles Preact component and provides usage examples.
Known limitations
The canvas engine must initialize in the browser and should not run during server rendering.
The published peer dependency currently declares Preact 10 only; Preact 11 compatibility is not documented upstream.
Loading the full tsParticles bundle can be large; use selected engine packages when possible.
Show 1 more limitation
Continuous animation should respect reduced-motion preferences and performance budgets.