DEV Community

Cover image for How to use tsParticles
tsParticles profile image Matteo Bruni
Matteo Bruni for tsParticles

Posted on • Updated on

How to use tsParticles

#tutorial #javascript #html #showdev

How to add tsParticles to your website

How to get options

You can get tsParticles options from https://particles.matteobruni.it

Export config

CSS for full screen background with particles

particles.css 

/* suggested css */
#tsparticles {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

Vanilla Javascript

app.js 

tsParticles.load("tsparticles", /* paste options here */);
Enter fullscreen mode Exit fullscreen mode

index.html 

<!-- particles container -->
<div id="tsparticles"></div>

<!-- script -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@1.16.2/dist/tsparticles.min.js" integrity="sha256-2Sly/Hf9UP7YBu6LEPpn/6rxMZR5EeGq89mBa4G5+YA=" crossorigin="anonymous"></script>
<script src="app.js"></script>
Enter fullscreen mode Exit fullscreen mode

NPM / Yarn 

yarn add tsparticles
Enter fullscreen mode Exit fullscreen mode

or

npm install tsparticles
Enter fullscreen mode Exit fullscreen mode

ES Module

app.js 

import { tsParticles } from "tsparticles";

tsParticles.load("tsparticles", /* paste options here */);
Enter fullscreen mode Exit fullscreen mode

Warning: This file must be built for client side usage, SSR is not supported.

CommonJS (NodeJS)

app.js 

const { tsParticles } from require("tsparticles");

tsParticles.load("tsparticles", /* paste options here */);
Enter fullscreen mode Exit fullscreen mode

ReactJS 

yarn add react-tsparticles
Enter fullscreen mode Exit fullscreen mode

or

npm install react-tsparticles
Enter fullscreen mode Exit fullscreen mode 
import Particles from "react-tsparticles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
Enter fullscreen mode Exit fullscreen mode

PreactJS 

yarn add preact-particles
Enter fullscreen mode Exit fullscreen mode

or

npm install preact-particles
Enter fullscreen mode Exit fullscreen mode 
import Particles from "preact-particles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
Enter fullscreen mode Exit fullscreen mode

Inferno 

yarn add inferno-particles
Enter fullscreen mode Exit fullscreen mode

or

npm install inferno-particles
Enter fullscreen mode Exit fullscreen mode 
import Particles from "inferno-particles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
Enter fullscreen mode Exit fullscreen mode

Angular 

yarn add ng-particles
Enter fullscreen mode Exit fullscreen mode

or

npm install ng-particles
Enter fullscreen mode Exit fullscreen mode

template.html 

<Particles id="tsparticles" [options]="particlesOptions"></Particles>
Enter fullscreen mode Exit fullscreen mode

app.ts 

export class AppComponent {  
 /* particlesOptions is the value used in the template */
 particlesOptions = /* paste options here */;
}
Enter fullscreen mode Exit fullscreen mode

app.module.ts 

import { NgParticlesModule } from 'ng-particles';  
import { NgModule } from "@angular/core";  

@NgModule({  
 declarations: [ /* AppComponent */ ],
 imports: [
   /* other imports */
   NgParticlesModule // NgParticlesModule is required
 ],
 providers: [],
 bootstrap: [ /* AppComponent */ ]
 })  
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

VueJS 

yarn add particles.vue
Enter fullscreen mode Exit fullscreen mode

or

npm install particles.vue
Enter fullscreen mode Exit fullscreen mode

app.js 

import Particles from 'particles.vue';

Vue.use(Particles);
Enter fullscreen mode Exit fullscreen mode

template.vue 

<template>  
  <div id="app">
    <Particles id="tsparticles" :options="{ /* your options here */ }"></Particles>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Svelte 

npm install svelte-particles
Enter fullscreen mode Exit fullscreen mode

or

yarn add svelte-particles
Enter fullscreen mode Exit fullscreen mode

Usage 

<script>
  import Particles from "svelte-particles";

  let particlesConfig = {
    /* your options here */
  };
</script>

<Particles id="tsparticles" options="{particlesConfig}" />
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

almaju profile image

Someone finally fixed Javascript

Almaju -

vincanger profile image

Top 5 fastest growing JavaScript repos

vincanger -

marcconci profile image

Tic-Tac-Toe JavaScript game for beginners

Marcos -

yashmahalwal profile image

Optimising React Apps

yashmahalwal -