Emote Resolution

Look up emote images by their text code. Returns the CDN URL or null if the emote isn’t loaded.

SBCanvas.emotes.resolve

const url = SBCanvas.emotes.resolve('PogChamp');
// 'https://cdn.7tv.app/emote/abc/1x.webp' or null
Returns string | null.

Get All Loaded Emotes

const allEmotes = SBCanvas.emotes.getAll();
// { 'PogChamp': { code: 'PogChamp', url: '...', provider: '7tv' }, ... }
Returns a plain object mapping emote codes to their data.

Load Custom Emotes

SBCanvas.emotes.loadSet([
  { code: 'myEmote', url: 'https://cdn.example.com/emote.webp', provider: '7tv' }
]);

Example: Render Emotes in Chat

SBCanvas.on('chat:message', (msg) => {
  const container = document.getElementById('chat');
  const div = document.createElement('div');

  const words = msg.text.split(' ');
  for (const word of words) {
    const url = SBCanvas.emotes.resolve(word);
    if (url) {
      const img = document.createElement('img');
      img.src = url;
      img.alt = word;
      img.className = 'emote';
      div.appendChild(img);
    } else {
      div.appendChild(document.createTextNode(word + ' '));
    }
  }

  container.appendChild(div);
});

Example: Emote Wall Widget

SBCanvas.ready(() => {
  const wall = document.getElementById('emote-wall');

  SBCanvas.on('chat:message', (msg) => {
    const words = msg.text.split(' ');
    for (const word of words) {
      const url = SBCanvas.emotes.resolve(word);
      if (url) {
        const img = document.createElement('img');
        img.src = url;
        img.alt = word;
        img.style.position = 'absolute';
        img.style.left = `${Math.random() * 90}%`;
        img.style.top = `${Math.random() * 90}%`;
        wall.appendChild(img);
        SBCanvas.setTimeout(() => img.remove(), 3000);
      }
    }
  });
});

API Reference

MethodReturnsDescription
emotes.resolve(code)string | nullGet emote URL by code
emotes.getAll()Record<string, EmoteData>All loaded emotes
emotes.loadSet(emotes)voidLoad array of {code, url, provider}