How to use tsParticles
Tags: tutorial, javascript, html, showdev
Published: 2020-07-25 16:19:00

# How to add tsParticles to your website

## How to get options

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

![Export config](https://dev-to-uploads.s3.amazonaws.com/i/36m4ws9zkr4u8mctq2mm.png)

## CSS for full screen background with particles

### particles.css

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

## Vanilla Javascript

### app.js

```javascript
tsParticles.load("tsparticles", /* paste options here */);
```

### index.html

```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>
```

## NPM / Yarn

```shell
yarn add tsparticles
```

or

```shell
npm install tsparticles
```

### ES Module

#### app.js

```javascript
import { tsParticles } from "tsparticles";

tsParticles.load("tsparticles", /* paste options here */);
```

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

### CommonJS (NodeJS)

#### app.js

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

tsParticles.load("tsparticles", /* paste options here */);
```

## ReactJS

```shell
yarn add react-tsparticles
```

or

```shell
npm install react-tsparticles
```

```javascript
import Particles from "react-tsparticles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
```

## PreactJS

```shell
yarn add preact-particles
```

or

```shell
npm install preact-particles
```

```javascript
import Particles from "preact-particles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
```

## Inferno

```shell
yarn add inferno-particles
```

or

```shell
npm install inferno-particles
```

```javascript
import Particles from "inferno-particles";

// component syntax, use it in your markup
<Particles options={/* paste options here */} />
```

## Angular

```shell
yarn add ng-particles
```

or

```shell
npm install ng-particles
```

### template.html

```html
<Particles id="tsparticles" [options]="particlesOptions"></Particles>  
```

### app.ts

```typescript
export class AppComponent {  
 /* particlesOptions is the value used in the template */
 particlesOptions = /* paste options here */;
}  
```

### app.module.ts

```typescript
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 { }  
```

## VueJS

```shell
yarn add particles.vue
```

or

```shell
npm install particles.vue
```

### app.js

```javascript
import Particles from 'particles.vue';

Vue.use(Particles);
```

### template.vue

```javascript
<template>  
  <div id="app">
    <Particles id="tsparticles" :options="{ /* your options here */ }"></Particles>
  </div>
</template>
```

## Svelte

```shell
npm install svelte-particles
```

or

```shell
yarn add svelte-particles
```

## Usage

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

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

<Particles id="tsparticles" options="{particlesConfig}" />
```