How to create a custom preset?

For tsparticles

Creating a custom tsParticles preset

Creating a custom preset

You can now create a script with your own preset to use in your website or for distributing it to others. All you have to do is give it a name and set all the options you need it to load correctly. Remember to not import all config, properties not needed can be omitted.

Publish your preset with tsparticles-preset tag on NPM so everyone can find it.

You’ll find a sample below.

Fire preset sample

fire.preset.js - The custom preset script, you can distribute it or reuse in all your websites.

// call this method before initializing tsParticles, this preset will be available in all of your tsParticles instances
// parameters: preset name, preset partial options
tsParticles.addPreset("fire", {
  fpsLimit: 40,
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 800
    color: {
      value: ["#fdcf58", "#757676", "#f27d0c", "#800909", "#f07f13"]
    opacity: {
      value: 0.5,
      random: true
    size: {
      value: 3,
      random: true
    move: {
      enable: true,
      speed: 6,
      random: false
  interactivity: {
    events: {
      onclick: {
        enable: true,
        mode: "push"
      resize: true
  background: {
    image: "radial-gradient(#4a0000, #000)"

config.json - The config section to add to your config or in your plugin readme to teach others on how to use it.

  "preset": "fire" // this should match the name above, it can be used in array values too, it will be loaded in order like everyone else
Matteo Bruni

By Matteo Bruni

I'm the author of tsParticles and I work as a full stack developer

Looking for more tsparticles tutorials?

View all tutorials for tsparticles