Skip to content

Build a Simple Extension

Build a small Twitch Extension with two surfaces:

  • live.html lets a broadcaster set a message of the day.
  • panel.html displays the current message to viewers and receives live updates.

Set up the project

Follow Install MEDKit manually, then create these files at the project root:

live.html
panel.html
src/live.js
src/panel.js

Add both HTML entry points to the production build:

vite.config.js
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        live: fileURLToPath(new URL("./live.html", import.meta.url)),
        panel: fileURLToPath(new URL("./panel.html", import.meta.url)),
      },
    },
  },
});

Copy the implementation from Create a broadcaster panel and Create a viewer panel.

Test the complete flow

  1. Run npm run dev.
  2. Open /live.html and /panel.html from the same Vite origin.
  3. Enter a message in the broadcaster page and select Save and broadcast.
  4. Confirm the open viewer panel changes immediately.
  5. Reload the viewer panel and confirm it still displays the saved channel state.

Run npm run build before upload. The output must contain both live.html and panel.html, with all JavaScript and CSS bundled locally; Twitch Extensions must not depend on an unapproved remote script at runtime.

The older MEDKit examples repository remains useful as historical source, but this guide uses the published @muxy/extensions-js@2.4.18 package and a current module build.