flexui

Still in very very early development, for now just prototyping

A light UI for C++ with XML and CSS support.

Example

<Element class="container">
    <Text id="some">Some text:</Text>
    <Button><Text>A button</Text></Button>
</Element>

* {
    font-family: "Roboto-Regular.ttf";
    font-size: 24px;
}
.container {
    background-color: white;
    color: black;

    height: 90px;
    padding: 25px;
    align-items: center;
}
#some {
    margin-right: 5px;
}
Button {
    background-color: #1266f1;
    color: white;

    align-items: center;
    padding: 5px;

    border-color: #0d6efd;
    border-width: 1px;
    border-radius: 4px;

    cursor: pointer;
}
Button:hover {
    /* ... */
}

Render using OpenGL (and GLFW)

Demo

Online demo available here: https://mlomb.github.io/flexui
Note that the demo is a build of the master branch for now, it may contain anything I'm currently working on (and probably broken)

Goals

• Support a subset of CSS
• Support XML for building elements
• Fully based on a Flex layout engine (the same engine used by React Native, Yoga Layout)
• All lists to be virtualized out of the box
• Be render agnostic, the library should only generate vertices and indices
• Be system agnostic, the library should not handle window creation or events

Non-goals

• Be a browser
• Implement a script layer (no JS or similar)

Dependencies

• FreeType, an open source font rasterizer
• Yoga Layout, an open source layout engine
• An embedded copy of tinyxml2, a fast XML parser

We may require harfbuzz-ng for complex text later on.

License

MIT, see LICENSE.