Skip to content

Step-by-Step Guides

Welcome to the tsParticles guides section. Whether you are building a static Vanilla JS site, a single-page app in React or Vue, or a full-stack application with Next.js or Nuxt, these step-by-step tutorials will walk you through installation, basic usage, advanced configurations, and interactive effects.

Each guide is self-contained and includes copy-pasteable code examples so you can get started quickly.

Available Guides

Framework / WrapperPackageDescription
Vanilla JStsparticles (CDN or npm)Direct DOM integration with tsParticles.load()
React@tsparticles/reactOfficial React wrapper with hooks and component API
Vue 3@tsparticles/vue3Official Vue 3 plugin with composables
Angular@tsparticles/angularOfficial Angular component and module
Svelte@tsparticles/svelteOfficial Svelte component
Next.js@tsparticles/react (with Next.js)Server-side rendering and dynamic imports
Nuxt@tsparticles/vue3 (with Nuxt)SSR-safe integration as a Nuxt plugin
Solid@tsparticles/solidOfficial SolidJS wrapper
Preact@tsparticles/preactPreact-compatible component
Lit@tsparticles/litLit web component wrapper
Qwik@tsparticles/qwikQwik-optimized integration
jQuery@tsparticles/jqueryjQuery plugin for legacy projects
Astro@tsparticles/react (or any wrapper)Island architecture with client directives
Web Components@tsparticles/webcomponentsCustom Elements API integration
Stencil@tsparticles/stencilStencil component wrapper
Ember@tsparticles/emberEmber addon integration
Riot@tsparticles/riotRiot.js wrapper
Inferno@tsparticles/infernoInferno-compatible component
WordPressPlugin + tsparticlesBlock editor / shortcode integration

Choose Your Guide

Happy building!