Migrating from Particles.js

tsParticles is compatible with particles.js, and migration can be done in a few steps.

Quick checklist

Replace particles.min.js with tsparticles.min.js
Update canvas CSS class names (particles-js -> tsparticles)
Replace particlesJS(...) APIs with tsParticles.load(...)
Gradually migrate deprecated options (snake_case -> camelCase)

1) Migrate script and CSS

<script src="particles.min.js"></script>

becomes:

<script src="tsparticles.min.js"></script>

If you had custom CSS on the canvas:

.particles-js-canvas-element {
  /* custom CSS */
}

becomes:

.tsparticles-canvas-element {
  /* custom CSS */
}

2) Migrate JavaScript API

Quick mapping

particles.js	tsParticles
`particlesJS("id", options)`	`tsParticles.load({ id: "id", options })`
`particlesJS.load("id", "path", callback)`	`tsParticles.loadJSON("id", "path").then(...)`

Practical example

Before:

particlesJS.load("particles-js", "assets/particles.json", () => {
  console.log("callback - particles.js config loaded");
});

After:

tsParticles.loadJSON("tsparticles", "assets/particles.json").then((container) => {
  console.log("callback - tsParticles config loaded", container);
});

Or with inline options:

tsParticles.load({
  id: "tsparticles",
  options: {
    /* options */
  },
});

Note: loadJSON does not use callback as a third parameter; use then(...).

3) Update options

Many legacy options still work, but updating them is recommended:

line_linked -> links
retina_detect -> detectRetina
in general, snake_case -> camelCase

If you see console warnings, use them as a guide to update your configuration file.

Common migration pitfalls

Updating script names but keeping old DOM ids/classes in templates
Migrating API calls but forgetting to convert option keys to camelCase
Using loadJSON with a callback argument instead of then(...)
Applying too many config changes at once instead of migrating incrementally

4) Next step

Root options and config structure: Options
Ready-to-use presets: https://github.com/tsparticles/presets