• Public
  • Public/Protected
  • All

The object loaded into an HTML element, it'll contain options loaded and all data to let everything working

Particles Container

The Container class is the manager of the entire tsParticles instance. If you get the result of tsParticles.load the result it's this class, in the tsParticles.loadJSON is the then parameter.

Otherwise you can retrieve any loaded instance using tsParticles.dom() or tsParticles.domItem(index).


Container.id: the Container id, normally is the related DOM element Container.id attribute. It's set by tsParticles.load() and tsParticles.loadJSON().

Container.options: Where to find the current options loaded. Changing this options while playing can result in an unexpected behavior. A refresh() after the change is the best thing to do.
Container.sourceOptions: The options used when the Container was created, these options will be used only in the constructor.

Container.particles: The particles manager, you can add/remove particles from here.


play(): Used to resume the animations, can be stopped using pause().
pause(): Used to pause the animations, can be restarted using play().

destroy(): Prepare the instance to destruction, you won't retrieve this instance anymore. Only if you have a variable set with it.

exportImage(callback, type?, quality?): Exports an image of the canvas (without the background property if set), type and quality are optional and are the image output type and quality.
exportConfiguration(): Exports the current configuration in JSON, returns a string

start(): Starts the container, it's different from play(), this will reload everything.
stop(): Stops the container, it's different from pause(), this will clean up what need to be reloaded.
refresh(): Restarts the container, just a stop()/start() shortcut.

loadTheme(name): Sets the specified theme reloading options, if name is undefined the default theme will be used (if set)


  • Container




#engine: Engine
_initialSourceOptions: undefined | RecursivePartial<IOptions>
_options: Options
_sourceOptions: undefined | RecursivePartial<IOptions>
actualOptions: Options

The options loaded by the container, it's a full Options object

canvas: Canvas
currentTheme?: string
density: number
destroyed: boolean

Check if the particles container is destroyed, if so it's not recommended using it

drawAnimationFrame?: number
drawer: FrameManager
drawers: Map<string, IShapeDrawer>

All the shape drawers used by the container

duration: number
eventListeners: EventListeners
firstStart: boolean
fpsLimit: number
id: string
intersectionObserver?: <internal>.IntersectionObserver
lastFrameTime?: number
lifeTime: number
pageHidden: boolean
particles: Particles

The particles manager

pathGenerator: IMovePathGenerator
paused: boolean
plugins: Map<string, IContainerPlugin>

All the plugins used by the container

responsiveMaxWidth?: number
retina: Retina
started: boolean

Check if the particles container is started

zLayers: number



  • destroy(): void
  • draw(force: boolean): void
  • exportConfiguration(): string
  • Exports the current configuration using options property

    Returns string

    a JSON string created from options property

  • exportImage(callback: BlobCallback, type?: string, quality?: number): void
  • Exports the current canvas image, background property of options won't be rendered because it's css related


    • callback: BlobCallback

      The callback to handle the image

    • Optional type: string

      The exported image type

    • Optional quality: number

      The exported image quality

    Returns void

  • deprecated

    this method is deprecated, please use the exportImage method


    Returns void

  • getAnimationStatus(): boolean
  • handleClickMode(mode: string): void
  • init(): Promise<void>
  • loadTheme(name?: string): Promise<void>
  • Loads the given theme, overriding the options


    • Optional name: string

      the theme name, if undefined resets the default options or the default theme

    Returns Promise<void>

  • pause(): void
  • play(force?: boolean): void
  • refresh(): Promise<void>
  • reset(): Promise<void>
  • start(): Promise<void>
  • Starts the container, initializes what are needed to create animations and event handling

    Returns Promise<void>

  • stop(): void
  • Stops the container, opposite to start. Clears some resources and stops events.

    Returns void

  • updateActualOptions(): boolean