# Getting started with a chromeless UI on Web

Building a chromeless UI means building a brand-new video player UI from scratch. You achieve this by implementing your own custom UI components, and by associating those components with the appropriate THEOplayer API. The screenshot below visualizes such a chromeless UI -- albeit not the most pretty one.

![Chromeless UI Layout](/pr-873/assets/images/chromeless-ui-7-4025542f4b233096015b9e6ecce5bcd5.png "Chromeless UI Layout")

A chromeless UI gives you complete control over your full UI and UX, but it also means that you are responsible for implementing your full UI and UX. Achieving this feat requires you to have an adequate grasp on the video player architecture and its underlying API.

The goal of this guide is to advance your understanding on how to connect the dots between custom components and the THEOplayer API. For example, this guide will explain to which THEOplayer APIs you could map your custom play button.

## Create a chromeless player instance

Create a [`ChromelessPlayer`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#constructor) instead of a `Player`. Unlike `Player`, a `ChromelessPlayer` doesn't render a default UI, so you can build your own UI on top of it.

```javascript
const element = document.querySelector('.theoplayer-container');
const player = new THEOplayer.ChromelessPlayer(element, {
  libraryLocation: '/path/to/your-theoplayer-folder/',
  license: 'your_license_string',
});
```

The following guides refer to this `player` variable.

## Track player states

Before adding controls, learn how to [track player states](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/player/track-player-states.md). Understanding the playback lifecycle lets your UI respond correctly when playback starts, pauses, buffers, ends, or encounters an error.

![Video Player States](/pr-873/assets/images/player-video-player-states-4f4f37f92d4b03a2c750ce7fe03d0a5a.png "Video Player States")

## Next steps

## [📄️Map UI components](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ui/chromeless/mapping-components.md)

[Connect common player controls and displays to the appropriate Player APIs.](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ui/chromeless/mapping-components.md)

## [📄️Explore the sample code](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ui/chromeless/sample-code.md)

[See a basic chromeless implementation running in the browser.](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ui/chromeless/sample-code.md)

## [📄️Add UX enhancements](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ui/chromeless/ux-enhancements.md)

[Plan loading, poster, next-content, intro-skip, and advertising experiences.](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ui/chromeless/ux-enhancements.md)

## [📄️Handle errors](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ui/chromeless/error-handling.md)

[Make failures visible and actionable in your custom UI.](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ui/chromeless/error-handling.md)