๐ŸŽจ HTML/CSS UI

One of the best things about building games using the web platform is the ability to use HTML and CSS to create the UI of your game. You get great accessibility for free and can use all the tools and libraries available in the CSS ecosystem. HTML and CSS are not topics specific to web game development, so I won't get into too much detail, but let's list some options to create design systems and UI components for your game.

There are tons of ways to write CSS, including plain CSS, preprocessors like Sass (opens in a new tab), CSS Modules (opens in a new tab), and CSS-in-JS. There are also a ton of component libraries, all with different approaches, supported UI libraries, and features. I cannot possibly list them all, so I will list the ones that currently seem to be the most popular, focusing mainly on the React and Tailwind ecosystems.

See the State of CSS Survey pages on CSS Frameworks (opens in a new tab) and CSS-in-JS (opens in a new tab) for interest and retention details.

Foundational libraries

Unstyled component libraries

Component libraries

See more libraries for Trois Vue (opens in a new tab), Svelte Svelte (opens in a new tab), and React React (opens in a new tab).