# Usage with Svelte

First of all, we recommend using [TMI.js](http://tmijs.com) to handle Twitch chat messages. Svelte will help you render messages more effectively.

## Introduction

For starters, let's consider the following Svelte component with some basic TMI.js implementation:

```html
<script>
  import { onMount } from "svelte";
  import tmi from "tmi.js";

  let messages = [];

  onMount(() => {
    const client = new tmi.Client({
      channels: [ "doceazedo911" ]
    });

    client.connect();

    client.on("message", (channel, tags, text, self) => {
      messages = [...messages, text];
    });
  });
</script>

{#each messages as message}
  <div>{message}</div>
{/each}
```

The component above will connect to the Twitch chat, and for every message we receive we added it to a messages array. Then we simply render all messages in that array.

At this point, `text` is yet to be parsed and that `tags` hold some very valuable information for us such as emote offsets and badges information. So when we receive a message let's call emoteTTV and parse the emotes and badges:

```typescript
// ...
import { parseBadges, parseEmotes } from "emotettv";
​
const options = {
    channelId: "98776633"
};

​onMount(() => {
    // ...
    client.on("message", async (channel, tags, text, self) => {
        const badges = await parseBadges(tags.badges, tags.username, options);
        const message = await parseEmotes(text, tags.emotes, options);
    });
});
```

With the message and badges parsed, we have to decide if we want to render them with the default HTML that emoteTTV provides or if we want to go trough each word and emote and render them with Svelte.

## The easy way: {@html}

Using `{@html}` to render the message is the quickest and easiest way to do it. In counterpart, if we want to style the messages with custom CSS, we will have to use global styles which may cause unwanted side effects and it might expose your users to XSS and other vulnerabilities.

emoteTTV will escape HTML characters by default, but you should still use `{@html}` with caution. If you specifically want to allow for HTML in user messages, you can [disable HTML escaping](https://emotettv.gitbook.io/emotettv/api-reference/parseemotes#tohtml) entirely.

With that in mind, we can get the parsed HTML and use other TMI tags to format our message as we want and add a limit to the last 20 messages as such:&#x20;

<pre class="language-html"><code class="lang-html">&#x3C;script>
  import { onMount } from "svelte";
  import tmi from "tmi.js";
  import { parseBadges, parseEmotes } from "emotettv";

  let messages = [];
<strong>  const options = {
</strong><strong>    channelId: "98776633",
</strong><strong>  };
</strong>
  onMount(() => {
    const client = new tmi.Client({
      channels: [ "doceazedo911" ]
    });

    client.connect();

    client.on("message", async (channel, tags, text, self) => {
      const badges = await parseBadges(tags.badges, tags.username, options);
<strong>      const badgesHTML = badges.toHTML();
</strong>      const message = await parseEmotes(text, tags.emotes, options);
<strong>      const messageHTML = message.toHTML();
</strong><strong>      const newMessage = `&#x3C;div>${badgesHTML} &#x3C;b style="color:${color}">${name}&#x3C;/b>: ${messageHTML}&#x3C;/div>`;
</strong><strong>      messages = [...messages, newMessage].slice(-20);
</strong>    });
  });
&#x3C;/script>

{#each messages as message}
<strong>  &#x3C;div>{@html message}&#x3C;/div>
</strong>{/each}

</code></pre>

## The advanced way: {#each}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://emotettv.gitbook.io/emotettv/usage/usage-with-svelte.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.