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 / Wrapper	Package	Description
Vanilla JS	tsparticles (CDN or npm)	Direct DOM integration with tsParticles.load()
React	@tsparticles/react	Official React wrapper with hooks and component API
Vue 3	@tsparticles/vue3	Official Vue 3 plugin with composables
Angular	@tsparticles/angular	Official Angular component and module
Svelte	@tsparticles/svelte	Official 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/solid	Official SolidJS wrapper
Preact	@tsparticles/preact	Preact-compatible component
Lit	@tsparticles/lit	Lit web component wrapper
Qwik	@tsparticles/qwik	Qwik-optimized integration
jQuery	@tsparticles/jquery	jQuery plugin for legacy projects
Astro	@tsparticles/react (or any wrapper)	Island architecture with client directives
Web Components	@tsparticles/webcomponents	Custom Elements API integration
Stencil	@tsparticles/stencil	Stencil component wrapper
Ember	@tsparticles/ember	Ember addon integration
Riot	@tsparticles/riot	Riot.js wrapper
Inferno	@tsparticles/inferno	Inferno-compatible component
WordPress	Plugin + tsparticles	Block editor / shortcode integration

Choose Your Guide

• Vanilla JS (plain JavaScript)
• React
• Vue 3
• Angular
• Svelte
• Next.js
• Nuxt
• Solid
• Preact
• Lit
• Qwik
• jQuery
• Astro
• Web Components
• Stencil
• Ember
• Riot
• Inferno
• WordPress

Happy building!