Event Functions

šŸŒ  Event Functions



For every stream event, your event handler function will be called, sending in the event data.

Managed Mode

In managed mode, slime2 will automatically handle:

  • Rendering the event (based on the DocumentFragment (opens in a new tab) you give it)
  • Calling your optional callback directly after the event has been fully rendered
    • Includes waiting for all images within to load
  • Automatic deletion of:
    • Rendered message events when chat messages are deleted or the chat is cleared
    • All rendered events from a user that has been timed out or banned
    • Old events after the event list has more than the event max
    • Expired events after the optional event expiration time has been reached

To use managed mode, return an object with a DocumentFragment (opens in a new tab) (created from cloning (opens in a new tab) a template (opens in a new tab)), along with an optional callback function. The helper function slime2.cloneTemplate() is provided to easily clone a template.

You can find all the events that slime2 current supports here:

slime2.onEvent(event => {
  if (event.type === 'message') {
    const messageClone = $(slime2.cloneTemplate('message-template'))
    return {
      fragment: messageClone,
      callback: element => {
        console.log('message rendered!')

By returning nothing, slime2 will not render the event. Slime Chat (opens in a new tab) is a great example of how to utilize this to create message filters.

You will need to handle the 'remove-user', 'remove-message', and 'remove-message' events yourself if you choose to not use managed mode at all.



Managed mode only. Sets the max number of rendered events returned in slime2.onEvent(). When the number of rendered events is greater than the max, the oldest events are automatically removed.


By default, max events is set to 100.


slime2.setEventExpiration(expirationTime, animationOptions)

Managed mode only. Removes rendered events returned in slime2.onEvent() automatically after the set expiration time (in milliseconds).

slime2.setEventExpiration(10 * 1000) // 10 seconds

You can also pass in optional animation options:

  • animationTime: Rendered events will be removed after the expiration time + animation time
  • animationClass: This class will be automatically applied to the rendered event after the expiration time
  • animationFunction: This function will be automatically called after the expiration time with the rendered event element passed in
  10 * 1000, // 10 seconds
    animationTime: 500, // 0.5 seconds
    animationClass: 'fade',
    animationFunction: element => {

Slime Chat (opens in a new tab) is a great example of how to utilize this to create exit animations.



Applies a delay (in milliseconds) to stream events before they're sent to slime2.onEvent.

slime2.setEventDelay(1000) // 1 second delay

By default, there is no delay.