Player

The Player is a standalone desktop application that lets you preview and test your game UI as you develop it. It loads HTML pages, propagates input, and gives you access to profiling and debugging tools — all without needing to integrate your UI into a game engine first.

Running it #

Run the provided Player.bat on Microsoft Windows or Player.sh on MacOS.

Overview #

The Player provides everything you need for UI development and testing:

• Showing User Interfaces (UI) — drag and drop HTML files from your file system directly onto the Player window, type a URL in the address bar, or open a saved bookmark. It also supports loading files through HTTP and WebSockets which allows using Hot Module Replacement (HMR) with frameworks like Vite and Webpack.
• Input handling — the Player sends mouse and keyboard input to the view. Gamepad and touch input are also supported on Microsoft Windows.
• Profiling — open DevTools with F12 and use the Performance panel to measure rendering speed and identify bottlenecks.
• Debugging — inspect elements, debug JavaScript, and monitor activity through the built-in DevTools and Visual Studio Code.

Bookmarks #

The Player includes a bookmark bar and manager for quick access to frequently used pages. Bookmarks are stored in CohtmlBookmarks.html, located next to the Player executable. It uses the standard HTML bookmarks format, so you can import bookmarks from any browser by exporting them and using the Import Bookmarks menu.

Player configuration #

Command-line options #

The most useful options when working with the Player:

Player.exe [OPTIONS] [positional_url...] [SUBCOMMANDS]

POSITIONALS:
  positional_url TEXT         Initial URL(s) to load.

OPTIONS:
  -h,     --help              Print this help message and exit
          --url TEXT          Initial URL(s) to load. Provide comma-separated values
                              for multiple views.
          --root TEXT         Sets the root directory for "coui://"
          --width INT [1280]  Sets the width of the player window in pixels.
          --height INT [720]  Sets the height of the player window in pixels.
          --renderer ENUM:value in {dx11,dx12,opengl} [dx11]
                              Selects the graphics renderer.
          --debugger-port, --remote-debugging-port INT [9444]
                              Port for DevTools; open http://localhost:<port> in Chrome
                              to access them. Set to -1 to disable.
          --log-verbosity ENUM:value in {trace,debug,info,warning,error,assert,critical,none} [info]
                              Controls the verbosity of log output.
          --input ENUM:value in {mouse,touch} [mouse]
                              Type of input events to send to the UI.
          --default-font TEXT [Droid Sans]
                              Sets the default style font family.
          --redraw-all [false]
                              Tells the application to repaint Views every frame (useful for
                              debugging).
          --config [Config.toml]
                              Read options from a configuration file.

Run Player.exe --help for the full list of supported arguments.

Configuration file #

The Player looks for the Config.toml in the following locations in decreasing priority:

1. The location specified by the --config command-line option
2. The current working directory
3. The directory containing the Player executable

The configuration file may specify any command-line option, while still allowing the command-line to override the option value.

Keyboard shortcuts #

Toolbar #

The toolbar runs along the top of the Player window and gives you quick access to navigation, bookmarks, and selecting an fixed aspect ratio for showing the UI.

Font loading in the Player #

The recommended way to load fonts is to use @font-face and font-family. You can also configure the Player to load specific fonts as well:

default-font = "MyFont"

[register-font]
path = "URL or path to a font"
family = ""
sdf = "auto"
style = "auto"
weight = "auto"

[register-font]
path = "URL or path to a second font"
family = ""
sdf = "auto"
style = "auto"
weight = "auto"

To view all available font registration options, run Player.exe register-font --help.

Player and user interfaces using absolute URLs #

If your UI is using absolute URLs you could set the coui-root using the command-line --root argument at Player start-up, or, preferably, convert the absolute URLs to relative ones.

Webpack, Vite, or other similar content development tools can produce such absolute URLs.

To convert generated URLs from absolute to relative, you should check the Webpack documentation and Vite documentation or documentation of your tool of choice.