Twitch

KBVE Twitch

Twitch Integration

Seamlessly embed Twitch streams and chat into your documentation with our custom Twitch component.

Live Stream Example

Watch live!

Features

Multiple Embed Types

Choose between stream-only, chat-only, or combined view

Theme Support

Automatic theme detection or manual dark/light selection

Interactive Controls

Built-in controls for mute, chat toggle, and fullscreen

Accessibility

Full ARIA support and keyboard navigation

Embed Types

Display both the stream and chat side-by-side for full engagement:

<TwitchEmbed
  channel="kbve"
  type="both"
  theme="auto"
/>

Embed just the video stream without chat:

<TwitchEmbed
  channel="xqc"
  type="stream"
  theme="auto"
/>

Show only the chat for text-based interaction:

<TwitchEmbed
  channel="hasanabi"
  type="chat"
  theme="auto"
  height={500}
/>

Component Props

TwitchEmbed Props

Prop	Type	Default	Description
`channel`	`string`	Required	Twitch channel username
`type`	`'stream' \| 'chat' \| 'both'`	`'both'`	Type of embed to display
`theme`	`'dark' \| 'light' \| 'auto'`	`'auto'`	Color theme
`width`	`number \| string`	`'100%'`	Width of the embed
`height`	`number \| string`	`500`	Height of the embed
`showControls`	`boolean`	`true`	Show interactive controls overlay
`autoplay`	`boolean`	`false`	Auto-play stream on load
`muted`	`boolean`	`true`	Start stream muted
`aspect`	`string`	`'aspect-video'`	Aspect ratio CSS class

TwitchChat Props

Prop	Type	Default	Description
`channel`	`string`	Required	Twitch channel username
`theme`	`'dark' \| 'light' \| 'auto'`	`'auto'`	Color theme
`height`	`number \| string`	`500`	Height of the chat
`darkpopout`	`boolean`	`true`	Force dark popout mode

Usage Examples

Basic Implementation

---
import TwitchEmbed from '@/components/twitch/TwitchEmbed.astro';
---

<TwitchEmbed channel="ninja" />

Separate Stream and Chat

---
import TwitchEmbed from '@/components/twitch/TwitchEmbed.astro';
import TwitchChat from '@/components/twitch/TwitchChat.astro';
---

<div class="space-y-4">
  <TwitchEmbed
    channel="xqc"
    type="stream"
    autoplay={true}
    muted={true}
  />

  <TwitchChat
    channel="xqc"
    height={400}
  />
</div>

Responsive with Aspect Ratio

<TwitchEmbed
  channel="lirik"
  type="stream"
  aspect="aspect-video"
  showControls={true}
/>

Dark Theme with Custom Height

<TwitchEmbed
  channel="summit1g"
  type="both"
  theme="dark"
  height={600}
  muted={false}
/>

Accessibility Features

The Twitch embed component includes comprehensive accessibility support:

ARIA Labels: All interactive elements have descriptive labels
Keyboard Navigation: Full keyboard support for controls
Screen Reader Support: Status announcements for loading and state changes
Focus Indicators: Clear visual focus states
Reduced Motion: Respects user’s motion preferences

Performance Optimization

Lazy Loading: Embeds only load when visible in viewport
Skeleton Loading: Prevents layout shift with matching placeholders
Optimized Transitions: Smooth fade-ins without jank
Responsive Design: Adapts to all screen sizes

Browser Support

The Twitch embed component works in all modern browsers:

Chrome/Edge 90+
Firefox 88+
Safari 14+
Mobile browsers (iOS Safari, Chrome Mobile)

Notes

Streams start muted by default to comply with autoplay policies
Chat requires cookies to be enabled for authentication
Some streams may have geographic restrictions
Ad-blockers may interfere with stream playback

API Integration

For advanced usage, you can interact with the component’s state:

// Access the Twitch service
import { twitchService } from '@/components/twitch/ServiceTwitch';

// Toggle chat visibility
twitchService.toggleChat();

// Toggle mute
twitchService.toggleMute();

// Set volume (0-1)
twitchService.setVolume(0.5);

// Toggle fullscreen
twitchService.toggleFullscreen();

Troubleshooting

Stream not loading?

Check if the channel name is spelled correctly
Verify the channel is currently live
Ensure cookies and JavaScript are enabled
Check for ad-blocker interference

Chat not appearing?

Twitch chat requires third-party cookies
Check browser privacy settings
Try refreshing the page
Ensure you’re not in incognito/private mode

Audio not working?

Streams start muted by default
Click the unmute button in controls
Check system volume settings
Verify browser audio permissions