Templates

When you create a widget you choose what it starts from. All of them can be edited with code afterwards.

Blank

The bare minimum: the connection to your Streamer.bot and an example that greets each new follower.

const app = document.querySelector("#app");

Widget.status.onChange((state) => {
  Widget.dom.text(app, Widget.t(state === "connected" ? "connected" : "connecting"));
});

Widget.on("Twitch.Follow", ({ user }) => {
  Widget.dom.text(app, Widget.t("follow", { name: user }));
});

It uses Widget.status, Widget.dom.text, Widget.t and Widget.on. Its manifest.json declares "events": ["Twitch.Follow"] and the connected, connecting and follow texts in Spanish and English.

Chat

A chat overlay for Twitch, Kick and YouTube with emotes, badges and deleted messages. It ships a parameter menu (bubble, font, colors, size, maximum messages and time before hiding them) read with Widget.parameters. It draws messages with Widget.dom.renderMessage and badges with Widget.dom.image, and removes messages deleted by a moderator, a ban or a ChatCleared.

Counter

It counts follows, subs or both since it connects. A good example of several pieces together: parameters of every type, a sound of your own with Widget.assets and a thank-you banner that uses Widget.queue so two events in a row do not overlap.

Alerts

Follow, sub, cheers and raid, with no code: you design them by dragging layers on the canvas. It starts with the Classic design and then you add alerts, amounts, animations and your own files. The editor generates the part of index.html, style.css and script.js marked with ⟦estudio⟧; what you write outside that mark is yours.