Hello World: Your First Gameface UI

You have seen how the Player works and how data flows between the engine and the UI. This article bridges you into the rest of the guide: the recommended tech stack, what the next section covers, and where to start if you want to get building immediately.

What Comes Next: Planning & Setup

The Planning & Setup section is where you go from understanding Gameface to actively building with it. It covers:

• Recommended Tech Stack - which tools and frameworks work best with Gameface and why.
• Setting Up - scaffolding a real project, connecting it to the Player, and getting HMR running.
• Prototyping & Developing - a tour of the official Gameface UI component library and boilerplate.
• The Prototyping Workflow - a hands-on walkthrough that builds a complete inventory screen from scratch.
• Design Work - tools like the Figma Exporter that bridge your design files to the engine.

The Recommended Tech Stack

For most Gameface projects we recommend:

Layer	Tool	Why
Bundler	Vite	Fast dev server, native HMR, simple config, great ecosystem
Framework	SolidJS	Fine-grained reactivity with minimal runtime overhead - ideal for a game engine environment
Component Library	Gameface UI	Official boilerplate with game-ready components pre-configured for Vite + SolidJS
Styling	SCSS	Nesting, variables, and mixins with zero runtime cost

This stack is covered in depth in Recommended Tech Stack Overview, including alternatives and the rationale behind each choice.

Start Building Now

The fastest path to hands-on development is the Prototyping Workflow series. It walks you through building a real inventory screen step-by-step using the Gameface UI boilerplate - covering layout, components, styling, and interactivity.

Start here: Section Overview: Prototyping an Inventory

If you prefer to understand the tooling and project setup first, begin with Recommended Tech Stack Overview and follow the Planning & Setup articles in order.