> ## 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. # Introduction > Composable, minimal custom elements for the BeyondWords player. Own the code and style it your way. export const WebComponentsDemo = ({name}) => { const MOCK_CONTENT = [{ id: "demo-1", title: "How AI voices are changing publishing", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 124, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 124 }], video: [], summarization: { audio: [], video: [] }, segments: [] }]; const MOCK_PLAYLIST = [{ id: "7a974fb1-1b89-4be3-a25d-4ad286d5305b", title: "Part 1: The newsroom shift", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 124, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 124 }], video: [], summarization: { audio: [], video: [] }, segments: [] }, { id: "129e7681-fa4d-4526-8be9-d27c946a5023", title: "Part 2: Voices at scale", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 98, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 98 }], video: [], summarization: { audio: [], video: [] }, segments: [] }, { id: "e9f2257c-14cf-46c0-bab6-bcaa9e229775", title: "Part 3: What comes next", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 152, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 152 }], video: [], summarization: { audio: [], video: [] }, segments: [] }]; const MOCK_ADVERTS = [{ id: "advert-1", type: "native", placement: "pre-roll", vastUrl: null, clickThroughUrl: "https://sponsor.example.com", imageUrl: "/images/player-ui/demo-cover.svg", textColor: "#ffffff", backgroundColor: "#943bfc", iconColor: "#ffffff", audio: [{ id: "advert-audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 8 }], video: [] }]; const content = JSON.stringify(MOCK_CONTENT).replace(/'/g, "'"); const playlistContent = JSON.stringify(MOCK_PLAYLIST).replace(/'/g, "'"); const adverts = JSON.stringify(MOCK_ADVERTS).replace(/'/g, "'"); const DEMOS = { "play-pause-button": ``, "time-indicator": ``, "prev-segment-button": ``, "next-segment-button": ``, "prev-seconds-button": ``, "next-seconds-button": ``, "playback-rate-button": ``, "content-title": ``, "call-to-action": ``, "download-button": ``, "beyondwords-logo": ``, "prev-track-button": ``, "next-track-button": ``, "playlist": ``, "feature-image": `
`, "progress-bar": `
`, "advert-link": ``, "standard-player": ``, "minimal-player": ``, "playlist-player": ``, "video-player": ``, "vertical-video-player": `` }; const markup = DEMOS[name]; return
{markup ?
:

No preview available for “{name}”.

}
; }; A set of framework-agnostic [custom elements](https://developer.mozilla.org/docs/Web/Web_Components) for building your own UI on top of the [BeyondWords player](https://github.com/beyondwords-io/player). They give you play/pause, seeking, playback rate and more as small building blocks you compose in plain HTML and style yourself. The player keeps doing the hard part: playback, analytics, ads, segments and lock-screen integration. This is not a packaged widget. The elements are distributed as a [shadcn registry](https://ui.shadcn.com/docs/registry), so **you own the code**: the CLI copies the source straight into your project, where you can restyle, rearrange or rewrite it. ```bash npm theme={null} npx @beyondwords/cli components add play-pause-button --html ``` ```bash pnpm theme={null} pnpm dlx @beyondwords/cli components add play-pause-button --html ``` ```bash yarn theme={null} yarn dlx @beyondwords/cli components add play-pause-button --html ``` ```bash bun theme={null} bunx --bun @beyondwords/cli components add play-pause-button --html ``` Here's the [Standard Player](/player-ui/html/standard-player) example, running live, built entirely from these elements: Using React? Everything here is also available as [React components](/player-ui/react/introduction). Use the React / HTML tabs at the top of the Components section. ## How it works The kit is three layers on top of one engine. Stop at whichever layer gives you the control you need: 1. **[Player Provider](/player-ui/html/player-provider)**: `` mounts the player JavaScript SDK (loaded as the global `BeyondWords`), holds the instance, and shares it with the elements inside. This is the foundation everything else sits on. 2. **Components**: small, minimal custom elements like [Play Pause Button](/player-ui/html/play-pause-button) and [Progress Bar](/player-ui/html/progress-bar). You bring the styling. 3. **Examples**: complete, pre-assembled players you drop in and tweak, like the [Standard Player](/player-ui/html/standard-player). Every element behaves the same way: * **It reads state from the player instance** by extending `BwPlayerConsumer`, which resolves the nearest provider and exposes the instance as `this._player`. Elements stay in sync by listening for player events and updating their own markup. * **It drives the player by emitting events** built with [`newEvent`](/player-ui/html/new-event). This is the same path the standard player UI uses, so analytics, ads and segment logic stay correct. Simple state such as `playbackRate` can also be set directly on the instance. Every layer is copied into your codebase, so there's no black box and no version lock-in. The trade-off is that you maintain what you customize. ## Next steps Install the elements and build your first player. Browse the minimal building blocks. Restyle the elements to match your brand. Drop in a complete, pre-built player.