Widget Playground

Configure and preview widgets in real-time. Customize themes and copy the code.

○ Loading SDK...

1Select Widget

2Configure Widget

Source Type

Orientation

Host

Username

Password

3Customize Theme

Theme Preset

Set colors for both light and dark modes. Uses light-dark() CSS.

☀️ Light🌙 Dark

Surface

Text

Primary

Outline

Generated Code

<pickflick-source-element orientation="vertical">
  <pickflick-source-request type="xtreme" host="demo.iptv-provider.com" username="demo_user" password="demo_pass"></pickflick-source-request>
</pickflick-source-element>

Live Preview

Container Width: 400px

Loading SDK...

CSS Variables Reference

No overrides applied. Widgets use light-dark() to automatically adapt to browser theme.

Switch to a specific theme to see and customize color values.