Twitch Extension Starter
This project will get you started developing Twitch Extensions using React!
- Install with yarn or npm:
- Bundle and start development server:
yarn start or
npm run start
It will tell you the paths to the different pages in the console, e.g. "https://localhost:8080/panel.html". Go to this address in your browser.
Open file in
<h1>This is the panel!</h1>to something cool and watch it being updated live in the browser!
Testing on Twitch
To test your extension on Twitch while running the development server (
yarn start as described above), follow these steps:
Create your Twitch extension at https://dev.twitch.tv
Inside your extension versions, under "Asset Hosting", insert the correct values for
Testing Base URI(by default:
Panel Viewer Path(default:
live_config.html) respectively. These are the pages defined under
On the Versions -> Version Status page, click the "View on Twitch and Install" button.
Install your extension. You should be redirected to your config page and already see the content (default: "You're a streamer on the config page!")
Go back to the extensions inside your streamer dashboard, locate your extension under "Installed Extensions" and "Activate" your new extension.
Go to your channel and see the Viewer page of your extension integrated on Twitch! Make any changes and see them change live!!
Lastly go to your live streamer dashboard and see your live config page displayed in the Extensions widget!
Your viewer page is being displayed on your channel either as a video overlay (when your channel is live) or panel. You can choose between overlay or panel when creating the extension.
Your config page is being displayed in your streamer's extensions dashboard, after installing the extension.
Your live config page is being displayed in your streamer's live dashboard, after installing and activating the extension.
To create the ZIP, after successfully testing the extension, run "yarn package". This will create a new ZIP file in
/dist_zip folder named after the current version set in your package.json.
In your extension's settings under Versions -> Version Assets, upload the created ZIP file. Then your're ready to move to "Hosted Test" in the Version Status section.
There's now an official developer-rig by TwitchDev, which gives you a more integrated environment. For an official solution, please go to https://github.com/twitchdev/developer-rig. You could also combine the rig with this starter code.