HelveteUI

// ✓ Boring Code style — explicit and readable
std::map<std::string, std::string>::const_iterator it;
it = node.props.find("color");
if (it != node.props.end())
{
    uint32_t col = parseColor(it->second);
    m_backend->setColour(
        (col      ) & 0xFF,
        (col >>  8) & 0xFF,
        (col >> 16) & 0xFF,
        (col >> 24) & 0xFF);
}

// ✓ Iterator loop instead of range-for
for (int i = 0; i < (int)node.children.size(); i++)
{
    renderNode(node.children[i], px, py, alpha);
}

class IHelveteUIBackend
{
public:
    // --- Timing ---
    virtual uint64_t getTimeMs() = 0;

    // --- Screen ---
    virtual int getScreenWidth()  = 0;
    virtual int getScreenHeight() = 0;

    // --- Input ---
    virtual int   getPointerX()   = 0;
    virtual int   getPointerY()   = 0;
    virtual bool  isPointerDown() = 0;
    virtual float getScrollDelta()= 0;
    virtual bool  isKeyDown(HvKey)= 0;
    virtual bool  popCharInput(char&) = 0;

    // --- Clipping ---
    virtual void setClipRect(int,int,int,int) = 0;
    virtual void clearClipRect()            = 0;

    // --- Render state ---
    virtual void setColour(uint8_t r,g,b,a) = 0;
    virtual void setTransform(float m00…ty)  = 0;
    virtual void resetTransform()             = 0;

    // --- Geometry ---
    virtual void fillRect(x,y,w,h)      = 0;
    virtual void drawRect(x,y,w,h)      = 0;
    virtual void fillPolygon(verts,count) = 0;

    // --- Images ---
    virtual void* loadImage(path)         = 0;
    virtual void  releaseImage(image)      = 0;
    virtual void  drawImage(img,x,y,w,h)   = 0;
    virtual void  drawImageRegion(…)       = 0;

    // --- Fonts ---
    virtual void* loadFont(path, size)     = 0;
    virtual void  drawText(font,text,…)    = 0;
};

helvelteui-raylib/

marmalade-hello/

struct UiNodeDesc {
    std::string  tag;       // "div","p","button"…
    std::string  id;
    std::map<string,string> props;  // all CSS + attrs
    std::vector<UiNodeDesc> children;
};

struct CssKeyframe {
    float offset;   // 0.0 – 1.0
    std::map<string,string> props;
};
struct CssKeyframes {
    std::string name;
    std::vector<CssKeyframe> frames;
};

// The entire hot-reload loop — just call this each frame:
ui.renderLoaded();

// Internally this happens every 500ms:
for (int i = 0; i < (int)m_watchedFiles.size(); i++)
{
    long mtime = getFileMtime(m_watchedFiles[i]);
    if (mtime != m_watchedFileTimes[i])
    {
        clearImages();       // free old textures
        loadFile(m_loadedHtmlPath,
                 m_loadedScreenW, m_loadedScreenH);
        return true;
    }
}

<!-- In your HTML: -->
<p>Score: {{score}}</p>
<p>Player: {{playerName}}</p>
<p>Lives: {{lives}}</p>
<p>Time: {{timeStr}}</p>

// In your C++ per-frame loop:
ui.setVar("score",      playerScore);
ui.setVar("playerName", playerName);
ui.setVar("lives",      livesLeft);
ui.setVar("timeStr",    formatTime(elapsed));

// Substitution happens at render time — no rebuild needed.
ui.renderLoaded();