What is Granex?

Granex is a framework for building user interfaces. The main focus is a return to a native approach. You describe structure in HTML, appearance in CSS, and behavior in JavaScript. Granex stays native and adds features like themes, two-way data binding, and Godot imports that makes designing much easier.

Hooks

Wordpress-like hooksystem: add_action, do_action, add_filter, apply_filter each can reference an event name and assign a callback function. Additionally there is the priority as the 3rd parameter

Proxy

DOM Objects and other Objects dont have a way to react on changes. So we can wrap objects into proxies. every proxyObject has a watchlist, which will fire when certain properties are getting modified or deleted. This way we can realize two-way databinding.

TAB

Separation of concerns instead of MVC:

HTML	Topology	Nested DOM Hierarchy with custom tags and ids only
CSS	Appearance	customize appearance by referencing ids and tags
JS	Behavior	dynamic content and functionality

Textures

Using AtlasTexture that can be referenced. Lets make it easier to bring back bitmaps for skeuomorphic interfaces instead of using flat design everywhere.

Resources

Reusable, configurable assets like textures, atlases, StyleBoxes, and fonts.

Format

Instead of reinventing the wheel we keep it simple and human readable. We will use a plugin that can parse the formats from Godot and later UnrealEngine and Unity into our own.

Theme

A Theme assigns default fonts, colors, StyleBoxes, and icons to custom tags. Values come from loaded Resources. Load JSON or a Godot .tres.

Localization

provided i18n like __() function to translate static texts

NOTE

Not shipped yet

Fonts

Bitmap fonts in the browser. fnt2ttf turns a Godot .fnt into a .ttf.

npx fnt2ttf myProject/assets/fonts/bmFont.fnt .