Web Components

Use tsParticles with native Web Components via the @tsparticles/webcomponents package. This approach requires no framework — just vanilla JavaScript and custom elements.

Installation

Via CDN

Include the tsParticles core and the Web Components bundle:

html

<script src="https://cdn.jsdelivr.net/npm/tsparticles@4/tsparticles.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/webcomponents@4/tsparticles.webcomponents.min.js"></script>

Via npm + Build

bash

npm install @tsparticles/webcomponents tsparticles

Then import into your JavaScript bundle:

javascript

import { initParticlesEngine, defineParticlesElement } from "@tsparticles/webcomponents";

Engine Initialization

Before the <web-particles> element can render, the engine must be initialized with the features you need. Call initParticlesEngine with a callback that loads the desired plugins:

javascript

import { initParticlesEngine } from "@tsparticles/webcomponents";

const { loadFull } = await import("tsparticles");

await initParticlesEngine(async (engine) => {
  await loadFull(engine);
});

Why loadFull? It registers all built-in shapes (circle, square, polygon, image, etc.), interactions (hover, click), and updaters (opacity, size, color, etc.). For a smaller bundle, use tsparticles-slim or cherry-pick individual plugins.

Defining the Custom Element

After engine initialization, register the <web-particles> custom element:

javascript

import { defineParticlesElement } from "@tsparticles/webcomponents";

defineParticlesElement();

This registers the web-particles tag with the browser's CustomElementRegistry. It is safe to call multiple times — duplicate registrations are ignored.

Basic Usage

Once both initParticlesEngine and defineParticlesElement have run, use the element directly in HTML:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tsParticles Web Components</title>
  </head>
  <body>
    <web-particles id="tsparticles"></web-particles>

    <script type="module">
      import { initParticlesEngine, defineParticlesElement } from "@tsparticles/webcomponents";

      const { loadFull } = await import("tsparticles");

      await initParticlesEngine(async (engine) => {
        await loadFull(engine);
      });

      defineParticlesElement();

      const el = document.getElementById("tsparticles");
      el.options = {
        background: { color: "#0d47a1" },
        particles: {
          number: { value: 80 },
          links: { enable: true, color: "#ffffff" },
          move: { enable: true, speed: 2 },
        },
      };
    </script>
  </body>
</html>

Custom Configuration

The <web-particles> element accepts configuration via the options property (JavaScript object) or via JSON in the options attribute.

Via JavaScript Property

javascript

const el = document.querySelector("web-particles");
el.options = {
  background: { color: "#000000" },
  fpsLimit: 60,
  particles: {
    color: { value: ["#ff0000", "#00ff00", "#0000ff"] },
    links: {
      enable: true,
      distance: 150,
      color: "#ffffff",
      opacity: 0.4,
    },
    move: {
      enable: true,
      speed: 3,
      outModes: "bounce",
    },
    number: { value: 60 },
    opacity: { value: 0.6 },
    shape: { type: ["circle", "square"] },
    size: { value: { min: 2, max: 6 } },
  },
  interactivity: {
    events: {
      onHover: { enable: true, mode: "repulse" },
      onClick: { enable: true, mode: "push" },
    },
    modes: {
      repulse: { distance: 200 },
      push: { quantity: 4 },
    },
  },
};

Via HTML Attribute (JSON)

html

<web-particles
  id="tsparticles"
  options='{
    "background": { "color": "#0d47a1" },
    "particles": {
      "number": { "value": 50 },
      "links": { "enable": true, "color": "#ffffff" },
      "move": { "enable": true, "speed": 2 }
    }
  }'
></web-particles>

When using the options attribute, the value must be valid JSON. Property assignment is preferred for complex configurations.

Dynamic Creation

You can create <web-particles> elements entirely in JavaScript and add them to the DOM at any time:

javascript

import { initParticlesEngine, defineParticlesElement } from "@tsparticles/webcomponents";

const { loadFull } = await import("tsparticles");

await initParticlesEngine(async (engine) => {
  await loadFull(engine);
});

defineParticlesElement();

function createParticles(container, config) {
  const el = document.createElement("web-particles");
  el.id = "dynamic-particles";
  el.style.position = "absolute";
  el.style.width = "100%";
  el.style.height = "100%";
  el.style.top = "0";
  el.style.left = "0";
  el.options = config;
  container.appendChild(el);
  return el;
}

// Usage
const particles = createParticles(document.body, {
  background: { color: "#1a1a2e" },
  particles: {
    number: { value: 100 },
    links: { enable: true, color: "#e94560" },
    move: { enable: true, speed: 1 },
  },
});

Extending the Custom Element

You can subclass ParticlesElement to create your own custom element with built-in configuration:

javascript

import { initParticlesEngine, ParticlesElement } from "@tsparticles/webcomponents";

const { loadFull } = await import("tsparticles");

await initParticlesEngine(async (engine) => {
  await loadFull(engine);
});

class MyParticlesBackground extends ParticlesElement {
  constructor() {
    super();
    this.style.position = "fixed";
    this.style.top = "0";
    this.style.left = "0";
    this.style.width = "100%";
    this.style.height = "100%";
    this.style.zIndex = "-1";
  }

  connectedCallback() {
    this.options = {
      background: { color: "#0d47a1" },
      particles: {
        number: { value: 80 },
        links: { enable: true, color: "#ffffff" },
        move: { enable: true, speed: 2 },
      },
    };
    super.connectedCallback();
  }
}

customElements.define("my-particles-bg", MyParticlesBackground);

Usage:

html

<my-particles-bg></my-particles-bg>

Container Access and Control

The custom element exposes the tsParticles Container instance for imperative control:

javascript

const el = document.querySelector("web-particles");

// Access the container (available after connectedCallback)
const container = el.container;
container?.pause();
container?.play();

// Destroy and clean up
el.dispose();

Full Example

A complete HTML page using the Web Components module with CDN scripts:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tsParticles Web Components Demo</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      web-particles {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      .content {
        position: relative;
        z-index: 1;
        color: white;
        text-align: center;
        padding-top: 20vh;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>tsParticles + Web Components</h1>
      <p>Native custom elements, no framework required.</p>
    </div>

    <web-particles id="tsparticles"></web-particles>

    <script type="module">
      import {
        initParticlesEngine,
        defineParticlesElement,
      } from "https://cdn.jsdelivr.net/npm/@tsparticles/webcomponents@4/tsparticles.webcomponents.min.js";

      const tsParticles = window.tPparticles;

      await initParticlesEngine(async (engine) => {
        await tsParticles.loadFull(engine);
      });

      defineParticlesElement();

      const el = document.getElementById("tsparticles");
      el.options = {
        background: { color: "#0d47a1" },
        fpsLimit: 60,
        particles: {
          number: { value: 100 },
          color: { value: "#ffffff" },
          links: {
            enable: true,
            distance: 150,
            color: "#ffffff",
            opacity: 0.4,
          },
          move: {
            enable: true,
            speed: 2,
            outModes: "out",
          },
          size: {
            value: { min: 1, max: 4 },
          },
        },
        interactivity: {
          events: {
            onHover: { enable: true, mode: "grab" },
            onClick: { enable: true, mode: "push" },
          },
          modes: {
            grab: { distance: 200, links: { opacity: 0.5 } },
            push: { quantity: 4 },
          },
        },
      };
    </script>
  </body>
</html>

API Reference

Export / Property	Type	Description
`initParticlesEngine(callback)`	`function`	Initialize the tsParticles engine with plugin loaders
`defineParticlesElement()`	`function`	Register the `<web-particles>` custom element
`ParticlesElement`	`class`	Base class you can extend for custom elements
`element.options`	`ISourceOptions`	Get/set the particle configuration object
`element.container`	`Container \| undefined`	Read-only reference to the underlying `Container`
`element.dispose()`	`function`	Destroy the particle instance and clean up resources

Web Components ​

Installation ​

Via CDN ​

Via npm + Build ​

Engine Initialization ​

Defining the Custom Element ​

Basic Usage ​

Custom Configuration ​

Via JavaScript Property ​

Via HTML Attribute (JSON) ​

Dynamic Creation ​

Extending the Custom Element ​

Container Access and Control ​

Full Example ​

API Reference ​

Web Components

Installation

Via CDN

Via npm + Build

Engine Initialization

Defining the Custom Element

Basic Usage

Custom Configuration

Via JavaScript Property

Via HTML Attribute (JSON)

Dynamic Creation

Extending the Custom Element

Container Access and Control

Full Example

API Reference