> ## Documentation Index > Fetch the complete documentation index at: https://docs.beyondwords.io/llms.txt > Use this file to discover all available pages before exploring further. # Build your own UI Use headless mode when you need full control over the player interface—custom layouts, branded controls, or deep integration into your app—while the BeyondWords SDK still handles playback, streaming, [analytics](/docs-and-guides/analytics/analytics-dashboard), and [ads](/docs-and-guides/monetization/ads). For most sites, [player settings](/docs-and-guides/distribution/player/player-settings) in the dashboard are enough. Only build a custom UI if you need a fundamentally different experience. For minor style tweaks, see [style overrides](#style-overrides) below—but prefer dashboard settings where possible. ## When to use headless mode | Approach | Use when | | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | | [**Player settings**](/docs-and-guides/distribution/player/player-settings) | Colors, size, widget, highlighting—no code required | | [**Style overrides**](#style-overrides) | Small CSS tweaks to the built-in UI | | **Headless mode** (this guide) | Fully custom controls and layout | | [**Direct API calls**](#direct-api-calls) | You don't want any player code (loses analytics, ads, segment playback, and more) | ## How it works 1. Initialize the player with `showUserInterface: false` (or omit `target` to mount headlessly at the end of ``). 2. The SDK still loads content, manages the media element, and fires [events](/docs-and-guides/distribution/player/developer-guides/player-events). 3. Your code reads player state (`currentTime`, `playbackState`, `content`, etc.) and renders your own UI. 4. Your UI writes back to player properties (`playbackState = 'playing'`, `currentTime = 30`, etc.). The player always mounts in the DOM because playback uses a native media element (`