We are thrilled to announce the beta release of GamefaceUI, our state-of-the-art prototyping tool.

What is GamefaceUI?

GamefaceUI is a comprehensive collection of components designed to simplify the prototyping of game user interfaces. Built on the SolidJS framework, it provides users with a fast and efficient way to kickstart their projects.

Why SolidJS?

SolidJS is a modern JavaScript framework for building user interfaces. We chose it for our prototyping tool for several reasons:

1. Performance: SolidJS is engineered for high performance. It employs fine-grained reactivity, updating only the necessary parts of the DOM, resulting in faster rendering and lower memory usage compared to frameworks like React.

2. Reactivity Model: SolidJS’s reactivity model is straightforward and intuitive. It uses reactive primitives that are easy to understand and work with.

3. Simplicity: SolidJS offers a simpler API and fewer concepts to learn compared to other frameworks, making it easier for new or less experienced users to get started and be productive quickly.

4. No Virtual DOM: Unlike React, SolidJS does not use a virtual DOM. Instead, it compiles templates to real DOM operations, leading to better performance and more predictable behavior.

Why is this a beta release?

In this beta release, we are introducing the core components essential for building your UI layouts. We plan to expand the component library and continuously improve based on user feedback. Your insights will be crucial in refining and enhancing GamefaceUI’s design and functionality.

How to use GamefaceUI?

To use the components, you have two options: you can either download the complete boilerplate template that uses SolidJS with TypeScript and Vite, or integrate them into an existing SolidJS project.

Using the boilerplate

To get started with the boilerplate, navigate to the directory where you want to set up your UI and run the following command:

1
npx degit CoherentLabs/Gameface-UI

This command will download the entire boilerplate into your current directory.

If you prefer to create a new directory for the boilerplate, use:

1
npx degit CoherentLabs/Gameface-UI NEW_FOLDER

Where NEW_FOLDER is the name of your new folder.

Using the components only

If you already have a SolidJS project set up, you can directly integrate the components. Simply create a new folder for the components and run the following command inside it:

1
npx degit CoherentLabs/Gameface-UI/src/components